91 lines
2.2 KiB
TypeScript
91 lines
2.2 KiB
TypeScript
import { usePreferredDark, useStorage } from "@vueuse/core"
|
|
import { App, computed, reactive, Ref, watch } from "vue"
|
|
import type { HoppBgColor } from "~/newstore/settings"
|
|
import { useSettingStatic } from "@composables/settings"
|
|
import { HoppModule } from "."
|
|
import { hoppLocalConfigStorage } from "~/newstore/localpersistence"
|
|
|
|
export type HoppColorMode = {
|
|
preference: HoppBgColor
|
|
value: Readonly<Exclude<HoppBgColor, "system">>
|
|
}
|
|
|
|
const applyColorMode = (app: App) => {
|
|
const [settingPref] = useSettingStatic("BG_COLOR")
|
|
|
|
const currentLocalPreference = useStorage<HoppBgColor>(
|
|
"nuxt-color-mode",
|
|
"system",
|
|
hoppLocalConfigStorage,
|
|
{
|
|
listenToStorageChanges: true,
|
|
}
|
|
)
|
|
|
|
const systemPrefersDark = usePreferredDark()
|
|
|
|
const selection = computed<Exclude<HoppBgColor, "system">>(() => {
|
|
if (currentLocalPreference.value === "system") {
|
|
return systemPrefersDark.value ? "dark" : "light"
|
|
} else return currentLocalPreference.value
|
|
})
|
|
|
|
watch(
|
|
selection,
|
|
(newSelection) => {
|
|
document.documentElement.setAttribute("class", newSelection)
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
watch(
|
|
settingPref,
|
|
(newPref) => {
|
|
currentLocalPreference.value = newPref
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
const exposed: HoppColorMode = reactive({
|
|
preference: currentLocalPreference,
|
|
// Marking as readonly to not allow writes to this ref
|
|
value: selection as Readonly<Ref<Exclude<HoppBgColor, "system">>>,
|
|
})
|
|
|
|
app.provide("colorMode", exposed)
|
|
}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const applyAccentColor = (_app: App) => {
|
|
const [pref] = useSettingStatic("THEME_COLOR")
|
|
|
|
watch(
|
|
pref,
|
|
(newPref) => {
|
|
document.documentElement.setAttribute("data-accent", newPref)
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const applyFontSize = (_app: App) => {
|
|
const [pref] = useSettingStatic("FONT_SIZE")
|
|
|
|
watch(
|
|
pref,
|
|
(newPref) => {
|
|
document.documentElement.setAttribute("data-font-size", newPref)
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
}
|
|
|
|
export default <HoppModule>{
|
|
onVueAppInit(app) {
|
|
applyColorMode(app)
|
|
applyAccentColor(app)
|
|
applyFontSize(app)
|
|
},
|
|
}
|