Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: load stored theme before rendering

This commit is contained in:
saicaca 2024-04-29 12:52:50 +08:00
parent 163ed17ae6
commit 8ce1c7ab6e
4 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/LightDarkSwitch.svelte
View File

@ -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

3
src/constants/constants.ts
View File

@ -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

21
src/layouts/Layout.astro
View File

@ -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 :
---
<!DOCTYPE html>
<html lang="en" isHome={isHomePage} pathname={testPathName} class="bg-[var(--page-bg)] transition dark text-[14px] md:text-[16px]">
<html lang="en" isHome={isHomePage} pathname={testPathName} class="bg-[var(--page-bg)] transition text-[14px] md:text-[16px]">
<head>
<title>{pageTitle}</title>
@ -85,6 +86,24 @@ const favicons: Favicon[] = siteConfig.favicon.length > 0 ? siteConfig.favicon :
media={favicon.theme && `(prefers-color-scheme: ${favicon.theme})`}
/>
))}
<!-- Set the theme before the page is rendered to avoid a flash -->
<script define:vars={{DEFAULT_THEME: DEFAULT_THEME, LIGHT_MODE: LIGHT_MODE, DARK_MODE: DARK_MODE, AUTO_MODE: AUTO_MODE}}>
const theme = localStorage.getItem('theme') || DEFAULT_THEME;
switch (theme) {
case LIGHT_MODE:
document.documentElement.classList.remove('dark');
break
case DARK_MODE:
document.documentElement.classList.add('dark');
break
case AUTO_MODE:
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
</script>
<link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.9/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">

6
src/utils/setting-utils.ts
View File

@ -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
}