File tree Expand file tree Collapse file tree 4 files changed +7
-63
lines changed Expand file tree Collapse file tree 4 files changed +7
-63
lines changed Original file line number Diff line number Diff line change 1
1
<script setup lang="ts">
2
2
import type { ConfigProviderTheme } from ' vant'
3
- import { localStorage } from ' @/utils/local-storage'
4
- import { useStore } from ' @/stores'
5
3
import { useRouteTransitionNameHook } from ' @/stores/modules/routeTransitionName'
6
4
7
- const store = useStore ()
8
5
const theme = ref <ConfigProviderTheme >(' light' )
9
- const mode = computed (() => store .mode )
10
-
11
- watch (mode , (val ) => {
12
- if (val === ' dark' || localStorage .get (' theme' ) === ' dark' ) {
13
- theme .value = ' dark'
14
- document .querySelector (' html' )
15
- .setAttribute (' data-theme' , ' dark' )
16
- }
17
- else {
18
- theme .value = ' light'
19
- document .querySelector (' html' )
20
- .setAttribute (' data-theme' , ' light' )
21
- }
22
- }, { immediate: true })
23
-
24
6
provide (' isRealDark' , computed (() => theme .value === ' dark' ))
25
7
</script >
26
8
Original file line number Diff line number Diff line change 1
- import { createPinia , defineStore } from 'pinia'
2
-
3
- export const useStore = defineStore ( {
4
- id : 'index' ,
5
- persist : true ,
6
- state : ( ) => ( {
7
- // light || dark
8
- mode : '' ,
9
- } ) ,
10
- } )
1
+ import { createPinia } from 'pinia'
11
2
12
3
const store = createPinia ( )
13
4
export { store }
Original file line number Diff line number Diff line change
1
+ body {
2
+ background-color : #eff2f5 ;
3
+ }
4
+
1
5
#app {
2
6
min-height : 100vh ;
3
7
position : relative ;
29
33
opacity : 0 ;
30
34
}
31
35
32
- [data- theme= ' dark' ] {
33
- & ,
34
- * {
35
- color-scheme : dark !important ;
36
- }
37
- }
38
-
39
- [data- theme= ' light' ] {
40
- & ,
41
- * {
42
- color-scheme : light !important ;
43
- }
44
-
45
- body {
46
- background-color : #eff2f5 ;
47
- }
48
- }
Original file line number Diff line number Diff line change 1
1
<script setup lang="ts">
2
- import { useStore } from ' @/stores'
3
- import { localStorage } from ' @/utils/local-storage'
4
-
5
2
definePage ({
6
3
name: ' index' ,
7
4
meta: {
8
5
level: 1 ,
9
6
},
10
7
})
11
8
12
- const store = useStore ()
13
- const themeStore = localStorage .get (' theme' )
14
- const checked = ref <boolean >(themeStore === ' dark' )
15
-
16
- watch (checked , (val ) => {
17
- if (val ) {
18
- store .mode = ' dark'
19
- localStorage .set (' theme' , ' dark' )
20
- }
21
- else {
22
- store .mode = ' light'
23
- localStorage .set (' theme' , ' light' )
24
- }
25
- })
9
+ const checked = ref <boolean >(false )
26
10
</script >
27
11
28
12
<template >
29
13
<div class =" container" >
30
14
<VanCellGroup title =" 一个集成最新技术栈、完整干净的移动端模板" inset >
31
15
<VanCell center title =" 🌗 暗黑模式" >
32
16
<template #right-icon >
33
- <VanSwitch v-model =" checked" size =" 23px" />
17
+ <VanSwitch v-model =" checked" size =" 23px" disabled />
34
18
</template >
35
19
</VanCell >
36
20
You can’t perform that action at this time.
0 commit comments