From 8ce1c7ab6e26b632628cc158b2a21cac44911b2e Mon Sep 17 00:00:00 2001 From: saicaca Date: Mon, 29 Apr 2024 12:52:50 +0800 Subject: [PATCH] fix: load stored theme before rendering --- src/components/LightDarkSwitch.svelte | 3 ++- src/constants/constants.ts | 3 +++ src/layouts/Layout.astro | 21 ++++++++++++++++++++- src/utils/setting-utils.ts | 6 +++--- 4 files changed, 28 insertions(+), 5 deletions(-) diff --git a/src/components/LightDarkSwitch.svelte b/src/components/LightDarkSwitch.svelte index 4ea0ed3..602fbf0 100644 --- a/src/components/LightDarkSwitch.svelte +++ b/src/components/LightDarkSwitch.svelte @@ -3,8 +3,9 @@ import Icon from "@iconify/svelte" import {i18n} from '@i18n/translation' import I18nKey from '@i18n/i18nKey' -import {LIGHT_MODE, DARK_MODE, AUTO_MODE, setTheme, getStoredTheme} from '../utils/setting-utils.ts' +import {setTheme, getStoredTheme} from '../utils/setting-utils.ts' import {onMount} from "svelte"; +import {AUTO_MODE, DARK_MODE, LIGHT_MODE} from "@constants/constants.ts"; const seq = [LIGHT_MODE, DARK_MODE, AUTO_MODE] let mode = AUTO_MODE diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 8fa89e3..f90d072 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -1,3 +1,6 @@ export const UNCATEGORIZED = '__uncategorized__' export const PAGE_SIZE = 8 + +export const LIGHT_MODE = 'light', DARK_MODE = 'dark', AUTO_MODE = 'auto' +export const DEFAULT_THEME = AUTO_MODE \ No newline at end of file diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 0542e95..e5d0161 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -10,6 +10,7 @@ import ConfigCarrier from "@components/ConfigCarrier.astro"; import {profileConfig, siteConfig} from "@/config"; import {Favicon} from "../types/config"; import {defaultFavicons} from "../constants/icon"; +import {LIGHT_MODE, DARK_MODE, AUTO_MODE, DEFAULT_THEME} from "../constants/constants"; interface Props { title: string; @@ -69,7 +70,7 @@ const favicons: Favicon[] = siteConfig.favicon.length > 0 ? siteConfig.favicon : --- - + {pageTitle} @@ -85,6 +86,24 @@ const favicons: Favicon[] = siteConfig.favicon.length > 0 ? siteConfig.favicon : media={favicon.theme && `(prefers-color-scheme: ${favicon.theme})`} /> ))} + + diff --git a/src/utils/setting-utils.ts b/src/utils/setting-utils.ts index b8276c2..5ef906b 100644 --- a/src/utils/setting-utils.ts +++ b/src/utils/setting-utils.ts @@ -1,3 +1,5 @@ +import {AUTO_MODE, DARK_MODE, DEFAULT_THEME, LIGHT_MODE} from "@constants/constants.ts"; + export function getDefaultHue(): number { const fallback = '250' const configCarrier = document.getElementById('config-carrier') @@ -18,8 +20,6 @@ export function setHue(hue: number): void { r.style.setProperty('--hue', hue) } -export const LIGHT_MODE = 'light', DARK_MODE = 'dark', AUTO_MODE = 'auto' - export function setTheme(theme: string): void { localStorage.setItem('theme', theme) switch (theme) { @@ -40,5 +40,5 @@ export function setTheme(theme: string): void { } export function getStoredTheme(): string { - return localStorage.getItem('theme') || AUTO_MODE + return localStorage.getItem('theme') || DEFAULT_THEME } \ No newline at end of file