20
20
</li >
21
21
<CDropdown variant =" nav-item" placement =" bottom-end" >
22
22
<CDropdownToggle :caret =" false" >
23
- <CIcon v-if =" theme === 'dark'" icon =" cil-moon" size =" xl" />
24
- <CIcon v-else-if =" theme === 'light'" icon =" cil-sun" size =" xl" />
23
+ <CIcon v-if =" storedTheme === 'dark'" icon =" cil-moon" size =" xl" />
24
+ <CIcon v-else-if =" storedTheme === 'light'" icon =" cil-sun" size =" xl" />
25
25
<CIcon v-else icon =" cil-contrast" size =" xl" />
26
26
</CDropdownToggle >
27
27
<CDropdownMenu >
28
28
<CDropdownItem
29
- :active =" theme === 'light'"
29
+ :active =" storedTheme === 'light'"
30
30
class =" d-flex align-items-center"
31
31
component =" button"
32
32
type =" button"
33
- @click =" $emit('toggle-color-mode', 'light')"
34
- >
33
+ @click =" toggleColorMode( 'light')"
34
+ >
35
35
<CIcon class =" me-2" icon =" cil-sun" size =" lg" /> Light
36
36
</CDropdownItem >
37
37
<CDropdownItem
38
- :active =" theme === 'dark'"
38
+ :active =" storedTheme === 'dark'"
39
39
class =" d-flex align-items-center"
40
40
component =" button"
41
41
type =" button"
42
- @click =" $emit('toggle-color-mode', 'dark')"
42
+ @click =" toggleColorMode( 'dark')"
43
43
>
44
44
<CIcon class =" me-2" icon =" cil-moon" size =" lg" /> Dark
45
45
</CDropdownItem >
46
46
<CDropdownItem
47
- :active =" theme === 'auto'"
47
+ :active =" storedTheme === 'auto'"
48
48
class =" d-flex align-items-center"
49
49
component =" button"
50
50
type =" button"
51
- @click =" $emit('toggle-color-mode', 'auto')"
51
+ @click =" toggleColorMode( 'auto')"
52
52
>
53
53
<CIcon class =" me-2" icon =" cil-contrast" size =" lg" /> Auto
54
54
</CDropdownItem >
88
88
</template >
89
89
<script lang="ts">
90
90
import { defineComponent , ref , watch } from ' vue'
91
+ import { useColorMode } from ' ../composables'
91
92
92
93
export default defineComponent ({
93
94
name: ' Header' ,
@@ -96,7 +97,11 @@ export default defineComponent({
96
97
},
97
98
emits: [' toggle-color-mode' , ' toggle-sidebar' ],
98
99
setup(props ) {
100
+ const storedTheme = useColorMode ()
99
101
const theme = ref (props .theme )
102
+ const toggleColorMode = (theme : string ): void => {
103
+ storedTheme .value = theme
104
+ }
100
105
watch (
101
106
() => props .theme ,
102
107
() => {
@@ -105,8 +110,10 @@ export default defineComponent({
105
110
)
106
111
107
112
return {
108
- theme
113
+ theme ,
114
+ storedTheme ,
115
+ toggleColorMode ,
109
116
}
110
- }
117
+ },
111
118
})
112
119
</script >
0 commit comments