@@ -14,7 +14,7 @@ import {
14
14
import { ColorMode , ColorModeRef , getColorModeUtils } from "./color-mode.utils"
15
15
import { StorageManager } from "./storage-manager"
16
16
import { createContext } from "@chakra-ui/vue-utils"
17
- import { mountColorModeScript } from ' ./color-mode-script'
17
+ import { mountColorModeScript } from " ./color-mode-script"
18
18
19
19
export type { ColorModeRef }
20
20
@@ -74,7 +74,6 @@ export function setupColorModeContext(
74
74
initialColorMode,
75
75
} : SetupColorModeContext
76
76
) {
77
-
78
77
mountColorModeScript ( {
79
78
initialColorMode : _colorMode . value ,
80
79
type : colorModeManager . type ,
@@ -107,7 +106,6 @@ export function setupColorModeContext(
107
106
108
107
const resolvedColorMode = computed ( ( ) => getTheme ( colorModeManager ) )
109
108
110
-
111
109
function setColorMode ( value : ColorMode | "system" ) {
112
110
const { setClassName, setDataset, getSystemTheme } = utils . value
113
111
const resolved = value === "system" ? getSystemTheme ( ) : value
@@ -146,19 +144,21 @@ export function setupColorModeContext(
146
144
} )
147
145
}
148
146
149
- /**
147
+ /**
150
148
* Injects color mode into component instance
151
149
*/
152
150
export const useColorMode = ( ) => {
153
151
const context = inject < IColorModeContext > ( AppColorModeContextSymbol , {
154
152
colorMode : computed ( ( ) => "light" as Exclude < ColorMode , "system" > ) ,
155
- toggleColorMode : ( ) => { } ,
153
+ toggleColorMode : ( ) => { } ,
156
154
} )
157
155
158
156
return {
159
157
forced : context . forced ,
160
- colorMode : computed ( ( ) => context . colorMode . value as Exclude < ColorMode , "system" > ) ,
161
- toggleColorMode : context . toggleColorMode
158
+ colorMode : computed (
159
+ ( ) => context . colorMode . value as Exclude < ColorMode , "system" >
160
+ ) ,
161
+ toggleColorMode : context . toggleColorMode ,
162
162
}
163
163
}
164
164
@@ -188,31 +188,25 @@ export function useColorModeValue<TLight = unknown, TDark = unknown>(
188
188
return modeValue
189
189
}
190
190
191
-
192
- export const DarkMode = defineComponent ( ( _ , { slots, attrs } ) => {
191
+ export const CDarkMode = defineComponent ( ( _ , { slots, attrs } ) => {
193
192
provide ( AppColorModeContextSymbol , {
194
193
colorMode : computed ( ( ) => "dark" as Exclude < ColorMode , "system" > ) ,
195
- toggleColorMode : ( ) => { } ,
196
- forced : true
194
+ toggleColorMode : ( ) => { } ,
195
+ forced : true ,
197
196
} )
198
197
199
- return ( ) => (
200
- < >
201
- { slots . default ?.( ) }
202
- </ >
203
- )
198
+ return ( ) => < > { slots . default ?.( ) } </ >
204
199
} )
200
+ CDarkMode . name = "CDarkMode"
205
201
206
- export const LightMode = defineComponent ( ( _ , { slots, attrs } ) => {
202
+ export const CLightMode = defineComponent ( ( _ , { slots, attrs } ) => {
207
203
provide ( AppColorModeContextSymbol , {
208
204
colorMode : computed ( ( ) => "light" as Exclude < ColorMode , "system" > ) ,
209
- toggleColorMode : ( ) => { } ,
210
- forced : true
205
+ toggleColorMode : ( ) => { } ,
206
+ forced : true ,
211
207
} )
212
208
213
- return ( ) => (
214
- < >
215
- { slots . default ?.( ) }
216
- </ >
217
- )
209
+ return ( ) => < > { slots . default ?.( ) } </ >
218
210
} )
211
+
212
+ CLightMode . name = "CLightMode"
0 commit comments