Create the theme switch color library file

1. Declare the variables default-theme and default-theme and default-theme and deepblue-theme. I only need two themes here.

$default-theme:(header-top-bgcolor:#161e43,table-word:#fff,);
$deepBlue-theme:(header-top-bgcolor:#006272,table-word:#Awesome!,); The theme declares the header background color, as well as the text color variableCopy the code

2. Initialize the method for invocation

$themes: (default-theme: $default-theme,
  deepBlue-theme: $deepBlue-theme);
// Traverse the theme map to get the HTML data-theme value
@mixin themeify {

  @each $theme-name,
  $theme-map in $themes {
    / /! Global promotes a local variable to a global variable
    $theme-map: $theme-map !global;
    #{} is a sass interpolation
    // the parent container in the &sass nesting identifies @Content as a mixer slot, like vue slot
    [data-theme='#{$theme-name}'] & { @content; }}}// declare a function that gets a color based on key
// Use the HTML data-theme value and the key passed by the caller to get the corresponding color in _themes. SCSS
@function themed($key) {@return map-get($theme-map, $key);
}

// Get the table font size
@mixin eltable_size($size) {
  @include themeify {
    font-size: themed($size) !important;
  }
}

// Get the background color
@mixin background_color($color) {
  @include themeify {
    background-color: themed($color) !important;
  }
}

// Get the font color
@mixin font_color($color) {
  @include themeify {
    color: themed($color) !important;
  }
}

// Get the border color
@mixin border_color($color) {
  @include themeify {
    border: themed($color) !important;
  }
}
Copy the code

3. Click the event initializer to change the theme

    // Switch theme store to cache and store, convenient for different interfaces to listen to switch theme.
changeTheme() {
  let theme = localStorage.getItem("znyd1-theme");
    if(! theme || theme ==="default-theme") {
       window.document.documentElement.setAttribute(
          "data-theme"."deepBlue-theme"
        );
        this.$store.commit("SET_THEME".'deepBlue-theme')
        localStorage.setItem("my-theme"."deepBlue-theme");
      } else if(! theme || theme ==="deepBlue-theme") {
        window.document.documentElement.setAttribute(
          "data-theme"."default-theme"
        );
        this.$store.commit("SET_THEME".'default-theme')
        localStorage.setItem("my-theme"."default-theme"); }},Copy the code

4. Initialize The page. If the default theme is not initialized, the page is white or other colors.

if (localStorage.getItem('my-theme') = ="default-theme") {
  window.document.documentElement.setAttribute(
    "data-theme"."default-theme"
  );
  localStorage.setItem('v-theme'.'default-theme');
} else if (localStorage.getItem('my-theme') = ="deepBlue-theme") {
  window.document.documentElement.setAttribute(
    "data-theme"."deepBlue-theme"
  );
  localStorage.setItem('my-theme'.'deepBlue-theme');
} else {
  window.document.documentElement.setAttribute(
    "data-theme"."default-theme"
  );
  localStorage.setItem('my-theme'.'default-theme');
}
Copy the code

5. Interface or initialize style sheet index.scSS call

@import "@/styles/element-my.scss";
@include background_color("header-top-bgcolor");
Copy the code

Private reasons, partial effect display