在Vue3里使用scss實(shí)現(xiàn)簡(jiǎn)單的換膚功能

更新時(shí)間：2024年12月10日 10:03:49 作者：旅行中的伊蕾娜

這篇文章主要介紹了在Vue3里使用scss實(shí)現(xiàn)簡(jiǎn)單的換膚功能,主題色切換、亮色模式和暗黑模式切換、背景圖切換,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下

scss文件定義

先在variables.module.scss文件定義并導(dǎo)出初始樣式
注意此文件必須以.module.scss結(jié)尾

$main-color: #1677ff;

// while
$while-bg-color: #fafafa;
$while-first-text: #000000e0;
$while-second-text: #000000a6;
$while-third-text: #00000040;
$while-box-bg-color: rgba(255, 255, 255, 0.6);
//dark
$dark-bg-color: #141414;
$dark-first-text: #ffffffd9;
$dark-second-text: #ffffffa6;
$dark-third-text: #ffffff40;
$dark-box-bg-color: rgba(255, 255, 255, 0.05);

:export {
  MainColor: $main-color;
  //while
  WhileBgColor: $while-bg-color;
  WhileFirstText: $while-first-text;
  WhileSecondText: $while-second-text;
  WhileThirdText: $while-third-text;
  WhileBoxBgColor: $while-box-bg-color;
  //dark
  DarkBgColor: $dark-bg-color;
  DarkFirstText: $dark-first-text;
  DarkSecondText: $dark-second-text;
  DarkThirdText: $dark-third-text;
  DarkBoxBgColor: $dark-box-bg-color;
}

然后在base.scss里定義不同模式下的css屬性
此文件可以隨意命名

@import "./variables.module";

:root {
  --main-width: 1280px;
  // 切換背景圖需要的變量
  --base-background:url('../bgImgs/bgImg_53.jpeg');
}
// 亮色模式下文字顏色變量
html[data-theme='light']:root{
  --first-lv-text: #{$while-first-text};
  --second-lv-text: #{$while-second-text};
  --third-lv-text: #{$while-third-text};
  --box-bg-color: #{$while-box-bg-color};
}
// 暗色模式下的文字顏色變量
html[data-theme='dark']:root{
  --first-lv-text: #{$dark-first-text};
  --second-lv-text: #{$dark-second-text};
  --third-lv-text:#{$dark-third-text};
  --box-bg-color: #{$dark-box-bg-color};
}

html[data-theme='dark']{
  div,p,span,a,h1,h2,h3,h4,h5,h6,h7,ul,li,button,i{
    color: #{$dark-first-text};
  }
}

然后在mian.scss里引入這兩個(gè)文件并使用css變量

@import './base.scss';
@import "./variables.module";
body {
  min-width: var(--main-width);
  overflow-x: hidden;
  background: var(--base-background) left top no-repeat;
  background-size: cover;
  transition: all 0.3s ease;
}

修改主題方法定義

然后在store里定義需要的方法

先定義下ts類(lèi)型themeTypes.ts（沒(méi)有ts的可以忽略）

export interface themeType {
  mode: themeMode
  bgImg: string
  isWhile: boolean
  isDark: boolean
  mainColor: string
}
export enum themeMode {
  light = 'light',
  dark = 'dark'
}

再定義個(gè)修改css變量的工具類(lèi)

/** 修改css樣式
 * @param {string} property css屬性名
 * @param {string} value 要修改的值
 */
export function setCssProperty(property: string, value: string) {
  document.documentElement.style.setProperty(property, value);
}

然后在theme.ts里定義

因?yàn)榱辽Ｊ较路譃榧儼缀捅尘皥D，所以需要mode + isWhile和isDark來(lái)區(qū)分是亮色模式還是暗黑模式，不需要背景圖的話可以修改這部分邏輯

亮色模式和暗黑模式修改關(guān)鍵代碼：window.document.documentElement.setAttribute(‘data-theme’, themeMode.light)

import { computed, reactive, ref } from 'vue'
import { defineStore } from 'pinia'
import { themeMode, type themeType } from './types/themeTypes'
import { setCssProperty } from '@/utils/index'
import variable from '@/assets/styles/variables.module.scss'

export const useThemeStore = defineStore('theme', () => {
  /**
   * 主題分為兩種模式：亮色和暗黑
   * 亮色下又分為兩種風(fēng)格：純白色風(fēng)格 和 背景圖風(fēng)格
   * 暗黑模式就是純黑背景模式
   * 三種風(fēng)格不可兼容
   * */
  const theme = reactive<themeType>({
    mode: themeMode.light,
    // 修改為你真實(shí)的背景圖地址
    bgImg: new URL('@/assets/bgImgs/bgImg_53.jpeg', import.meta.url).href, // 僅在mode === light時(shí)生效
    isWhile: false, // 僅在mode === light時(shí)生效
    isDark: false,
    mainColor: variable.MainColor
  })

  const setTheme = (mode: themeMode, imgUrl?: string) => {
    theme.mode = mode
    // theme.isWhile為true表示使用純白模式；確保isDark為false，并且移除背景圖，背景色修改為純白
    if (theme.isWhile && mode === themeMode.light) {
      theme.isDark = false
      window.document.documentElement.setAttribute('data-theme', themeMode.light)
      setCssProperty('--base-background', variable.WhileBgColor)
    } else if (theme.isDark && mode === themeMode.dark) {
    // 暗黑模式，確保isWhile為false，并且移除背景圖，背景色為純黑
      theme.isWhile = false
      window.document.documentElement.setAttribute('data-theme', themeMode.dark)
      setCssProperty('--base-background', variable.DarkBgColor)
    } else {
     // theme.isWhile和theme.isWhile都為false表示使用背景圖，此時(shí)mode必須為light
      theme.mode = themeMode.light
      theme.isWhile = false
      theme.isDark = false
      theme.bgImg = imgUrl || theme.bgImg
      window.document.documentElement.setAttribute('data-theme', themeMode.light)
      setCssProperty('--base-background', `url(${theme.bgImg})`)
    }
    // 這里把配置存在了本地，有條件的可以存在后臺(tái)跟用戶(hù)綁定用接口加載
    localStorage.setItem('theme', JSON.stringify(theme))
  }
//頁(yè)面加載時(shí)使用此方法加載配置的主體
  const loadTheme = () => {
    const localTheme = localStorage.getItem('theme')
    if (theme) {
      Object.assign(theme, JSON.parse(localTheme as string))
      setTheme(theme.mode, theme.bgImg)
    }
  }
  
  return {
    theme,
    setTheme,
    loadTheme
  }
})

使用

然后在換膚vue文件里使用這些方法，注：template非完整代碼，僅示例如何調(diào)用

<template>
<!--修改主題色我使用的vue3-colorpicker組件 -->
	<ColorPicker
            is-widget
            picker-type="chrome"
            shape="square"
            v-model:pure-color="theme.mainColor"
            format="hex"
            @pureColorChange="setMainColor"
          />
     <!--修改為純白 暗黑模式-->
	<div class="use-style">
		<span>純白</span>
		<a-switch v-model:checked="theme.isWhile" @change="themeStore.setTheme(themeMode.light)" />
	</div>
	<div class="use-style">
		<span>暗黑</span>
		<a-switch v-model:checked="theme.isDark" @change="themeStore.setTheme(themeMode.dark)" />
	</div>
	<!--選擇皮膚(純白/暗黑模式下,不能選擇)-->
	 <div class="img-list">
        <div
          v-for="(img, index) in bgImgList"
          :key="index"
          class="img-item"
        >
          <img
            :src="img"
            :alt="'皮膚' + index"
            :style="{ cursor: theme.isWhile || theme.isDark ? 'not-allowed' : 'pointer' }"
            loading="lazy"
            @click="useImg(img)"
          />
          <CheckCircleFilled v-if="theme.bgImg === img" class="selected-icon" />
        </div>
      </div>
</template>
<script setup lang="ts">
  import { reactive, ref, watch } from 'vue';
  // 把sotre和類(lèi)型導(dǎo)入進(jìn)來(lái)
  import { useThemeStore } from '@/stores/theme';
  import { themeMode } from '@/stores/types/appTypes';
  import { ColorPicker } from 'vue3-colorpicker';
  import 'vue3-colorpicker/style.css';
  import { storeToRefs } from 'pinia';

  const themeStore = useThemeStore();
  const { theme } = storeToRefs(themeStore);
  themeStore.loadTheme();
  const bgImgList = reactive<string[]>([]);
  const imgCurrent = ref(1);
// 獲取圖片列表，我這樣寫(xiě)是因?yàn)榉旁诹吮镜?，根?jù)你的實(shí)際情況修改
  function getBgImgList() {
    for (let i = 0; i < 100; i++) {
      bgImgList.push(new URL(`../../assets/bgImgs/bgImg_${i}.jpeg`, import.meta.url).href);
    }
  }
  onMounted(()=>{
  	getBgImgList();
  })
// 設(shè)置主題色，
  function setMainColor() {
    localStorage.setItem('theme', JSON.stringify(theme.value));
  }

  function useImg(imgUrl: string) {
    if (theme.value.isWhile || theme.value.isDark) return;
    themeStore.setTheme(themeMode.light, imgUrl);
  }
</script>

如果使用了組件庫(kù),別忘了把主題色配置到組件上

 <template>
  <a-config-provider
    :locale="zhCN"
    :theme="{
      algorithm: appStore.theme.isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
      token: {
        colorPrimary: appStore.theme.mainColor,
      },
    }"
  >
    <a-app>
      <RouterView />
    </a-app>
  </a-config-provider>
</template>

<script setup lang="ts">
  import zhCN from 'ant-design-vue/es/locale/zh_CN';
  import {  theme } from 'ant-design-vue';
  import { useThemeStore } from '@/stores/theme';

  const themeStore = useThemeStore();
</script>

要在不同模式下修改組件庫(kù)的樣式,可以創(chuàng)建如antDesign.scss文件來(lái)修改

// 主題兼容
html[data-theme='light']{
  .ant-layout-sider{
    background: rgba(255,255,255,0.4);
  }
  .ant-layout-header{
    background: rgba(255,255,255,0.2);
  }
}
html[data-theme='dark']{
  .ant-layout-sider{
    background: rgba(255,255,255,0.08);
  }
  .ant-layout-header{
    background: rgba(255,255,255,0.05);
  }
}

需要其他配置可以自行往關(guān)鍵文件里添加

以上就是在Vue3里使用scss實(shí)現(xiàn)簡(jiǎn)單的換膚功能的詳細(xì)內(nèi)容，更多關(guān)于Vue3 scss換膚功能的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: