fix: support init dark mode
This commit is contained in:
2
.github/workflows/release.yml
vendored
2
.github/workflows/release.yml
vendored
@@ -48,6 +48,6 @@ jobs:
|
|||||||
# deploy to edgeone
|
# deploy to edgeone
|
||||||
# see https://edgeone.ai/zh/document/180255338996572160?product=edgedeveloperplatform
|
# see https://edgeone.ai/zh/document/180255338996572160?product=edgedeveloperplatform
|
||||||
- name: Deploy to EdgeOne Pages
|
- name: Deploy to EdgeOne Pages
|
||||||
run: npx edgeone pages deploy .output/public -n cook-yunle-fun -t ${{ secrets.EDGEONE_API_TOKEN }}
|
run: npx edgeone pages deploy .output/public -n cook -t ${{ secrets.EDGEONE_API_TOKEN }}
|
||||||
env:
|
env:
|
||||||
EDGEONE_API_TOKEN: ${{ secrets.EDGEONE_API_TOKEN }}
|
EDGEONE_API_TOKEN: ${{ secrets.EDGEONE_API_TOKEN }}
|
||||||
|
|||||||
13
app/app.vue
13
app/app.vue
@@ -1,7 +1,8 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useIndexedDB } from '~/composables/db'
|
import { useIndexedDB } from '~/composables/db'
|
||||||
import { appName } from '~/constants'
|
import { appName } from '~/constants'
|
||||||
import { installPrompt } from './utils/pwa'
|
import { ionDarkClass } from './composables/dark'
|
||||||
|
// import { installPrompt } from './utils/pwa'
|
||||||
|
|
||||||
// https://nuxt.com/docs/api/composables/use-head
|
// https://nuxt.com/docs/api/composables/use-head
|
||||||
useHead({
|
useHead({
|
||||||
@@ -17,7 +18,15 @@ useHead({
|
|||||||
const indexedDB = useIndexedDB()
|
const indexedDB = useIndexedDB()
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
installPrompt()
|
// init dark mode
|
||||||
|
if (isDark.value) {
|
||||||
|
document.documentElement.classList.add(ionDarkClass)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
document.documentElement.classList.remove(ionDarkClass)
|
||||||
|
}
|
||||||
|
|
||||||
|
// installPrompt()
|
||||||
indexedDB.init()
|
indexedDB.init()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,7 +1,9 @@
|
|||||||
export const color = useColorMode()
|
export const color = useColorMode()
|
||||||
export const isDark = computed(() => color.value === 'dark')
|
export const isDark = computed(() => color.value === 'dark')
|
||||||
|
|
||||||
|
export const ionDarkClass = 'ion-palette-dark'
|
||||||
|
|
||||||
export function toggleDark() {
|
export function toggleDark() {
|
||||||
color.preference = color.value === 'dark' ? 'light' : 'dark'
|
color.preference = color.value === 'dark' ? 'light' : 'dark'
|
||||||
document.documentElement.classList.toggle('ion-palette-dark', !isDark.value)
|
document.documentElement.classList.toggle(ionDarkClass, !isDark.value)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user