The picture is compressed and not clear enough.

  1. Install the Scss

Note: If the installation fails, you can consider using CNPM or switching the NPM source.

NPM install node-sass --save-dev // Install node-sass NPM install sass-loader --save-dev/install sass-loader NPM install Style-loader --save-dev // Install style-loaderCopy the code
  1. Create a new page darkModelPage.vue

File location: SRC/darkModelPage.vue

Named routing path: /dark-model-page

<template>
    <div id="DarkModelPage">
        
    </div>
</template>

<script>
export default{}</script>

<style scoped lang="scss">

</style>
Copy the code

  1. Create the SCSS directory in SRC/Assets

  2. Create the common directory in SRC /assets/ SCSS

  3. Then you need to create three SCSS files respectively

_themes.scss

_handle.scss

common.scss

  1. _themes.scss
$themes: (
  light: (
    background_color: #cccccc,// background color: rgba(0.0.0.0.65Dark: (background_color:#181c27,// background-color: rgba(255.255.255.0.65), // The main text));Copy the code
  1. _handle.scss
@import "./_themes.scss";

// Iterate over the topic map
@mixin themeify {
  @each $theme-name.$theme-map in $themes {
    / /! Global increases 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
@function themed($key) {
  @return map-get($theme-map.$key);
}

// Get the background color
@mixin background_color($color) {
  @include themeify {
    background: themed($color)! important; }}// Get the font color
@mixin font_color($color) {
  @include themeify {
    color: themed($color)! important; }}Copy the code
  1. common.scss
@import "@/assets/scss/common/_handle.scss";

/** Custom public style... * * /
Copy the code
  1. DarkModelPage. Used in vue
<template>
    <div id="DarkModelPage">
        <div>
            <h1 class="title">Tian Xiaotian personal network</h1>
            <a  class="btn" @click="modelBrn">The mode switch</a>
        </div>
    </div>
</template>

<script>
export default {
    name: "DarkModelPage".data(){
        return {
          dark:false,}},methods: {modelBrn(){
            this.dark = !this.dark;
            if(this.dark){
                window.document.documentElement.setAttribute( "data-theme".'dark' );
            }else{
                 window.document.documentElement.setAttribute( "data-theme".'light'); }}},mounted() {
        window.document.documentElement.setAttribute( "data-theme".'light'); }},</script>

<style scoped lang="scss">
@import '@/assets/scss/common/common';

#DarkModelPage{// The background color variable is used here@include background_color("background_color"); // The text color variable is used again@include font_color("text-color");

    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content:center;
    align-items: center;
    transition: background 1s , color 0.6 s;
    .title{
        margin-bottom: 20px;
    }
    .btn{
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 40px;
        margin:  0auto; }}</style>
Copy the code
  1. Note: If you need more color and style switching, just set the variable in _themes. SCSS and set the switching function in _handle. SCSS, that is, you can set the style in the page.

Demo video of this article: Click browse

More front-end content welcome to pay attention to the public number: day small day personal network