8000 feat(useColorModes): add the new composable function to handle color … · coreui/coreui-vue@c5c35a1 · GitHub
[go: up one dir, main page]
Skip to content

Commit c5c35a1

Browse files
mrholekmrholek
committed
feat(useColorModes): add the new composable function to handle color modes
1 parent 2544c5b commit c5c35a1

File tree

6 files changed

+83
-19
lines changed

6 files changed

+83
-19
lines changed

‎packages/coreui-vue/src/composables/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { useColorModes } from './useColorModes'
2+
3+
export { useColorModes }

‎packages/coreui-vue/src/composables/useColorModes.ts

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { onMounted, ref, watch } from 'vue'
2+
3+
const getStoredTheme = (localStorageItemName: string) => localStorage.getItem(localStorageItemName)
4+
const setStoredTheme = (localStorageItemName: string, colorMode: string) =>
5+
localStorage.setItem(localStorageItemName, colorMode)
6+
7+
const getPreferredColorScheme = (localStorageItemName: string) => {
8+
const storedTheme = getStoredTheme(localStorageItemName)
9+
10+
if (storedTheme) {
11+
return storedTheme
12+
}
13+
14+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
15+
}
16+
17+
const setTheme = (colorMode: string) => {
18+
document.documentElement.dataset.coreuiTheme =
19+
colorMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches
20+
? 'dark'
21+
: colorMode
22+
23+
const event = new Event('ColorSchemeChange')
24+
document.documentElement.dispatchEvent(event)
25+
}
26+
27+
export const useColorModes = (localStorageItemName = 'coreui-vue-color-scheme') => {
28+
const colorMode = ref(getPreferredColorScheme(localStorageItemName))
29+
30+
watch(colorMode, () => {
31+
setStoredTheme(localStorageItemName, colorMode.value)
32+
setTheme(colorMode.value)
33+
})
34+
35+
onMounted(() => {
36+
if (typeof getStoredTheme(localStorageItemName) === 'string') {
37+
setTheme(colorMode.value)
38+
}
39+
40+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
41+
const storedTheme = getStoredTheme(localStorageItemName)
42+
if (storedTheme !== 'light' && storedTheme !== 'dark') {
43+
setTheme(colorMode.value)
44+
}
45+
})
46+
47+
watch(colorMode, () => setTheme(colorMode.value))
48+
})
49+
50+
return {
51+
getColorMode: () => colorMode.value,
52+
setColorMode: (mode: string) => {
53+
colorMode.value = mode
54+
},
55+
}
56+
}

‎packages/coreui-vue/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,5 @@ export default CoreuiVue
1919

2020
// Export components & directives
2121
export * from './components'
22+
export * from './composables'
2223
export * from './directives'

‎packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,35 +20,35 @@
2020
</li>
2121
<CDropdown variant="nav-item" placement="bottom-end">
2222
<CDropdownToggle :caret="false">
23-
<CIcon v-if="storedTheme === 'dark'" icon="cil-moon" size="xl" />
24-
<CIcon v-else-if="storedTheme === 'light'" icon="cil-sun" size="xl" />
23+
<CIcon v-if="getColorMode() === 'dark'" icon="cil-moon" size="xl" />
24+
<CIcon v-else-if="getColorMode() === 'light'" icon="cil-sun" size="xl" />
2525
<CIcon v-else icon="cil-contrast" size="xl" />
2626
</CDropdownToggle>
2727
<CDropdownMenu>
2828
<CDropdownItem
29-
:active="storedTheme === 'light'"
29+
:active="getColorMode() === 'light'"
3030
class="d-flex align-items-center"
3131
component="button"
3232
type="button"
33-
@click="toggleColorMode('light')"
33+
@click="setColorMode('light')"
3434
>
3535
<CIcon class="me-2" icon="cil-sun" size="lg" /> Light
3636
</CDropdownItem>
3737
<CDropdownItem
38-
:active="storedTheme === 'dark'"
38+
:active="getColorMode() === 'dark'"
3939
class="d-flex align-items-center"
4040
component="button"
4141
type="button"
42-
@click="toggleColorMode('dark')"
42+
@click="setColorMode('dark')"
4343
>
4444
<CIcon class="me-2" icon="cil-moon" size="lg" /> Dark
4545
</CDropdownItem>
4646
<CDropdownItem
47-
:active="storedTheme === 'auto'"
47+
:active="getColorMode() === 'auto'"
4848
class="d-flex align-items-center"
4949
component="button"
5050
type="button"
51-
@click="toggleColorMode('auto')"
51+
@click="setColorMode('auto')"
5252
>
5353
<CIcon class="me-2" icon="cil-contrast" size="lg" /> Auto
5454
</CDropdownItem>
@@ -88,23 +88,29 @@
8888
</template>
8989
<script lang="ts">
9090
import { defineComponent } from 'vue'
91-
import { useColorMode } from '../composables'
91+
// import { useColorMode } from '../composables'
92+
import { useColorModes } from '@coreui/vue/src'
9293
9394
export default defineComponent({
9495
name: 'Header',
9596
props: {
9697
theme: String,
9798
},
98-
emits: ['toggle-color-mode', 'toggle-sidebar'],
99+
emits: ['toggle-sidebar'],
99100
setup() {
100-
const storedTheme = useColorMode()
101-
const toggleColorMode = (theme: string): void => {
102-
storedTheme.value = theme
103-
}
101+
const { getColorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
102+
// const colorMode = getColorMode()
103+
// const storedTheme = useColorMode()
104+
// const toggleColorMode = (theme: string): void => {
105+
// storedTheme.value = theme
106+
// }
104107
105108
return {
106-
storedTheme,
107-
toggleColorMode,
109+
// colorMode,
110+
setColorMode,
111+
getColorMode,
112+
// storedTheme,
113+
// toggleColorMode,
108114
}
109115
},
110116
})

‎packages/docs/.vuepress/theme-coreui/src/client/composables/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export * from './useColorMode'
1+
// export * from './useColorMode'
22
export * from './useScrollPromise'
33
export * from './useSidebarItems'
44
export * from './useThemeData'

‎packages/docs/.vuepress/theme-coreui/src/client/config.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { defineClientConfig } from '@vuepress/client'
22
import { h } from 'vue'
33
import {
4-
// useColorMode,
54
setupSidebarItems,
65
useScrollPromise,
76
} from './composables/index.js'
@@ -31,7 +30,6 @@ export default defineClientConfig({
3130
},
3231

3332
setup() {
34-
// useColorMode()
3533
setupSidebarItems()
3634
},
3735

0 commit comments

Comments
 (0)
0