theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(docs): 自适应系统暗色主题+持久化

Browse Source
This commit is contained in:
sight 2022-04-03 02:56:07 +08:00
parent 34f2c9d992
commit 4ada2ac9b5
2 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
example/src/layouts/Layout.vue
View File

@ -229,7 +229,9 @@ export default {
{ name: "zh_CN", locale: zh_CN, merge: true }, { name: "zh_CN", locale: zh_CN, merge: true },
{ name: "en_US", locale: en_US, merge: true }, { name: "en_US", locale: en_US, merge: true },
]; ];
const theme = ref("light"); let isDark = (localStorage.getItem('layui-vue-theme-dark') !== "false") ||
window.matchMedia('prefers-color-scheme: dark').matches;
const theme = ref(isDark ? "dark":"light");
const themeVariable = ref({ const themeVariable = ref({
"--global-primary-color": "#009688", "--global-primary-color": "#009688",
"--global-normal-color": "#1e9fff", "--global-normal-color": "#1e9fff",
@ -285,6 +287,9 @@ export default {
locale.value = lang; locale.value = lang;
}; };
window.matchMedia('(prefers-color-scheme: dark)')
.addListener(e => theme.value = e.matches ? "dark" : "light");
provide("theme",theme); provide("theme",theme);
provide('LayuiVueVersion', layuiVueVersion); provide('LayuiVueVersion', layuiVueVersion);

2
src/provider/index.vue
View File

@ -60,8 +60,10 @@ const changeTheme = (theme: string) => {
disableStyleSheetsProxy: false, disableStyleSheetsProxy: false,
} }
); );
localStorage.setItem('layui-vue-theme-dark','true')
} else { } else {
disableDarkMode(); disableDarkMode();
localStorage.setItem('layui-vue-theme-dark','false')
} }
}; };