dedecms 网站安全设置,普通话手抄报简单又漂亮,织梦移动端网站怎么做,WordPress出现归档实现的换肤功能#xff1a;主题色切换、亮色模式和暗黑模式切换、背景图切换 主题色就是网站主色#xff0c;可以配置到组件库上面#xff1b;亮色模式又分为两种风格#xff1a;纯白风格和背景图风格#xff0c;不需要背景图的话可以删掉这部分逻辑和相关定义#xff1b…实现的换肤功能主题色切换、亮色模式和暗黑模式切换、背景图切换 主题色就是网站主色可以配置到组件库上面亮色模式又分为两种风格纯白风格和背景图风格不需要背景图的话可以删掉这部分逻辑和相关定义暗黑模式就是黑底白字。 写法仅在vue3里有效vue2或其他框架自行修改写法 换肤示例 scss文件定义
先在variables.module.scss文件定义并导出初始样式 注意此文件必须以.module.scss结尾
$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;//whileWhileBgColor: $while-bg-color;WhileFirstText: $while-first-text;WhileSecondText: $while-second-text;WhileThirdText: $while-third-text;WhileBoxBgColor: $while-box-bg-color;//darkDarkBgColor: $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-themelight]: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-themedark]: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-themedark]{div,p,span,a,h1,h2,h3,h4,h5,h6,h7,ul,li,button,i{color: #{$dark-first-text};}
}然后在mian.scss里引入这两个文件并使用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类型themeTypes.ts没有ts的可以忽略
export interface themeType {mode: themeModebgImg: stringisWhile: booleanisDark: booleanmainColor: string
}
export enum themeMode {light light,dark dark
}
再定义个修改css变量的工具类
/** 修改css样式* param {string} property css属性名* param {string} value 要修改的值*/
export function setCssProperty(property: string, value: string) {document.documentElement.style.setProperty(property, value);
}然后在theme.ts里定义 因为亮色模式下分为纯白和背景图所以需要mode isWhile和isDark来区分是亮色模式还是暗黑模式不需要背景图的话可以修改这部分逻辑 亮色模式和暗黑模式修改关键代码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.scssexport const useThemeStore defineStore(theme, () {/*** 主题分为两种模式亮色和暗黑* 亮色下又分为两种风格纯白色风格 和 背景图风格* 暗黑模式就是纯黑背景模式* 三种风格不可兼容* */const theme reactivethemeType({mode: themeMode.light,// 修改为你真实的背景图地址bgImg: new URL(/assets/bgImgs/bgImg_53.jpeg, import.meta.url).href, // 仅在mode light时生效isWhile: false, // 仅在mode light时生效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 falsewindow.document.documentElement.setAttribute(data-theme, themeMode.light)setCssProperty(--base-background, variable.WhileBgColor)} else if (theme.isDark mode themeMode.dark) {// 暗黑模式确保isWhile为false并且移除背景图背景色为纯黑theme.isWhile falsewindow.document.documentElement.setAttribute(data-theme, themeMode.dark)setCssProperty(--base-background, variable.DarkBgColor)} else {// theme.isWhile和theme.isWhile都为false表示使用背景图此时mode必须为lighttheme.mode themeMode.lighttheme.isWhile falsetheme.isDark falsetheme.bgImg imgUrl || theme.bgImgwindow.document.documentElement.setAttribute(data-theme, themeMode.light)setCssProperty(--base-background, url(${theme.bgImg}))}// 这里把配置存在了本地有条件的可以存在后台跟用户绑定用接口加载localStorage.setItem(theme, JSON.stringify(theme))}
//页面加载时使用此方法加载配置的主体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非完整代码仅示例如何调用
template
!--修改主题色我使用的vue3-colorpicker组件 --ColorPickeris-widgetpicker-typechromeshapesquarev-model:pure-colortheme.mainColorformathexpureColorChangesetMainColor/!--修改为纯白 暗黑模式--div classuse-stylespan纯白/spana-switch v-model:checkedtheme.isWhile changethemeStore.setTheme(themeMode.light) //divdiv classuse-stylespan暗黑/spana-switch v-model:checkedtheme.isDark changethemeStore.setTheme(themeMode.dark) //div!--选择皮肤(纯白/暗黑模式下,不能选择)--div classimg-listdivv-for(img, index) in bgImgList:keyindexclassimg-itemimg:srcimg:alt皮肤 index:style{ cursor: theme.isWhile || theme.isDark ? not-allowed : pointer }loadinglazyclickuseImg(img)/CheckCircleFilled v-iftheme.bgImg img classselected-icon //div/div
/template
script setup langtsimport { reactive, ref, watch } from vue;// 把sotre和类型导入进来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 reactivestring[]([]);const imgCurrent ref(1);
// 获取图片列表我这样写是因为放在了本地根据你的实际情况修改function getBgImgList() {for (let i 0; i 100; i) {bgImgList.push(new URL(../../assets/bgImgs/bgImg_${i}.jpeg, import.meta.url).href);}}onMounted((){getBgImgList();})
// 设置主题色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如果使用了组件库,别忘了把主题色配置到组件上 templatea-config-provider:localezhCN:theme{algorithm: appStore.theme.isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,token: {colorPrimary: appStore.theme.mainColor,},}a-appRouterView //a-app/a-config-provider
/templatescript setup langtsimport zhCN from ant-design-vue/es/locale/zh_CN;import { theme } from ant-design-vue;import { useThemeStore } from /stores/theme;const themeStore useThemeStore();
/script要在不同模式下修改组件库的样式,可以创建如antDesign.scss文件来修改
// 主题兼容
html[data-themelight]{.ant-layout-sider{background: rgba(255,255,255,0.4);}.ant-layout-header{background: rgba(255,255,255,0.2);}
}
html[data-themedark]{.ant-layout-sider{background: rgba(255,255,255,0.08);}.ant-layout-header{background: rgba(255,255,255,0.05);}
}
需要其他配置可以自行往关键文件里添加
