本文主要介紹了Vue+scss白天和夜間模式切換功能的實現方法，分享給大家，具體如下：

效果圖

圖片被壓縮了不夠清晰。

安裝Scss

注：若安裝失敗可以考慮使用cnpm，或者切換npm源等方式安裝。

npm install node-sass --save-dev  //安裝node-sass
npm install sass-loader --save-dev //安裝sass-loader
npm install style-loader --save-dev //安裝style-loader

新建頁面DarkModelPage.vue

檔案所在位置：src/DarkModelPage.vue

命名路由路徑：/dark-model-page

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

<script>
export default {
  
}
</script>

<style scoped lang="scss">

</style>

在src/assets新建目錄scss

在src/assets/scss新建目錄common

然後需要新建三個scss檔案分別是

• _themes.scss
• _handle.scss
• common.scss

_themes.scss

$themes: (
 light: (
  background_color: #cccccc,//背景色
  text-color: rgba(0,0.65),// 主文字色
 ),dark: (
  background_color: #181c27,//背景
  text-color: rgba(255,255,// 主文字色
 )
);

_handle.scss

@import "./_themes.scss";

//遍歷主題map
@mixin themeify {
 @each $theme-name,$theme-map in $themes {
  //!global 把區域性變數強升為全域性變數
  $theme-map: $theme-map !global;
  //判斷html的data-theme的屬性值 #{}是sass的插值表示式
  //& sass巢狀裡的父容器標識  @content是混合器插槽，像vue的slot
  [data-theme="#{$theme-name}"] & {
   @content;
  }
 }
}

//宣告一個根據Key獲取顏色的function
@function themed($key) {
 @return map-get($theme-map,$key);
}

//獲取背景顏色
@mixin background_color($color) {
 @include themeify {
  background: themed($color)!important;
 }
}
//獲取字型顏色
@mixin font_color($color) {
 @include themeify {
  color: themed($color)!important;
 }
}

common.scss

@import "@/assets/scss/common/_handle.scss";
/**
自定義的公共樣式...
**/

DarkModelPage.vue中使用

<template>
  <div id="DarkModelPage">
    <div>
      <h1 class="title">天小天個人網</h1>
      <a class="btn" @click="modelBrn">模式切換</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{
  //在此使用了背景顏色變數
  @include background_color("background_color");
  //再次使用了文字顏色變數
  @include font_color("text-color");

  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content:center;
  align-items: center;
  transition: background 1s,color 0.6s;
  .title{
    margin-bottom: 20px;
  }
  .btn{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 40px;
    margin: 0 auto;
  }
}
</style>

注：如需更多顏色及樣式切換，只需要在_themes.scss設定好變數，通過 _handle.scss設定切換函式，即可以在頁面中通過該函式對指定樣式進行設定。

本文演示視訊： 點選瀏覽

到此這篇關於Vue+scss白天和夜間模式切換功能的實現方法的文章就介紹到這了,更多相關Vue 白天和夜間模式切換 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！