From 88a3a9f46b69978d8a0ae6e5d21cb2331ed5e02e Mon Sep 17 00:00:00 2001 From: kakomonn <167855671+kakomonn@users.noreply.github.com> Date: Sat, 5 Apr 2025 17:35:28 +0800 Subject: [PATCH 1/2] Optimize the logic for switching between light and dark modes --- src/config.ts | 2 +- src/content/posts/guides/Theme Guide-en.md | 2 +- src/content/posts/guides/Theme Guide-es.md | 2 +- src/content/posts/guides/Theme Guide-ja.md | 2 +- src/content/posts/guides/Theme Guide-ru.md | 2 +- src/content/posts/guides/Theme Guide-zh-tw.md | 2 +- src/content/posts/guides/Theme Guide-zh.md | 2 +- src/layouts/Head.astro | 7 +++++-- src/types/index.d.ts | 2 +- 9 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/config.ts b/src/config.ts index 8885414..e21f1ad 100644 --- a/src/config.ts +++ b/src/config.ts @@ -24,7 +24,7 @@ export const themeConfig: ThemeConfig = { // COLOR SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START color: { // default theme mode - mode: 'light', // light, dark + mode: 'light', // light, dark, auto light: { // primary color // used for title, hover, etc diff --git a/src/content/posts/guides/Theme Guide-en.md b/src/content/posts/guides/Theme Guide-en.md index 3c95c0d..60a780a 100644 --- a/src/content/posts/guides/Theme Guide-en.md +++ b/src/content/posts/guides/Theme Guide-en.md @@ -25,7 +25,7 @@ site: { // site description description: 'Retypeset is a static blog theme...' // use i18n title/subtitle/description from src/i18n/ui.ts instead of static ones above - i18nTitle: true // true, false + i18nTitle: true // light, dark, auto // author name author: 'radishzz' // site url diff --git a/src/content/posts/guides/Theme Guide-es.md b/src/content/posts/guides/Theme Guide-es.md index 8d0a57d..de4b11b 100644 --- a/src/content/posts/guides/Theme Guide-es.md +++ b/src/content/posts/guides/Theme Guide-es.md @@ -25,7 +25,7 @@ site: { // descripción del sitio description: 'Retypeset is a static blog theme...' // usar título/subtítulo/descripción en varios idiomas desde src/i18n/ui.ts en lugar de los estáticos anteriores - i18nTitle: true // true, false + i18nTitle: true // light, dark, auto // nombre del autor author: 'radishzz' // url del sitio diff --git a/src/content/posts/guides/Theme Guide-ja.md b/src/content/posts/guides/Theme Guide-ja.md index 5762361..9deef7f 100644 --- a/src/content/posts/guides/Theme Guide-ja.md +++ b/src/content/posts/guides/Theme Guide-ja.md @@ -25,7 +25,7 @@ site: { // サイト説明 description: 'Retypeset is a static blog theme...' // 上記の静的設定の代わりに src/i18n/ui.ts の多言語タイトル/サブタイトル/説明を使用 - i18nTitle: true // true, false + i18nTitle: true // light, dark, auto // 著者名 author: 'radishzz' // サイトURL diff --git a/src/content/posts/guides/Theme Guide-ru.md b/src/content/posts/guides/Theme Guide-ru.md index e45cb7d..a2a8f0c 100644 --- a/src/content/posts/guides/Theme Guide-ru.md +++ b/src/content/posts/guides/Theme Guide-ru.md @@ -41,7 +41,7 @@ site: { ```ts color: { // режим темы по умолчанию - mode: 'light' // light, dark + mode: 'light' // light, dark, auto // светлый режим light: { // основной цвет diff --git a/src/content/posts/guides/Theme Guide-zh-tw.md b/src/content/posts/guides/Theme Guide-zh-tw.md index 3c1fba1..63487c3 100644 --- a/src/content/posts/guides/Theme Guide-zh-tw.md +++ b/src/content/posts/guides/Theme Guide-zh-tw.md @@ -41,7 +41,7 @@ site: { ```ts color: { // 默認主題 - mode: 'light' // light, dark + mode: 'light' // light, dark, auto // 亮色模式 light: { // 高亮顏色 diff --git a/src/content/posts/guides/Theme Guide-zh.md b/src/content/posts/guides/Theme Guide-zh.md index 463b970..ca74da9 100644 --- a/src/content/posts/guides/Theme Guide-zh.md +++ b/src/content/posts/guides/Theme Guide-zh.md @@ -41,7 +41,7 @@ site: { ```ts color: { // 默认主题 - mode: 'light' // light, dark + mode: 'light' // light, dark, auto // 亮色模式 light: { // 高亮颜色 diff --git a/src/layouts/Head.astro b/src/layouts/Head.astro index 2c0af8e..ae397a6 100644 --- a/src/layouts/Head.astro +++ b/src/layouts/Head.astro @@ -110,8 +110,11 @@ function isCurrentDark() { const currentTheme = localStorage.getItem('theme') if (currentTheme) return currentTheme === 'dark' - if (defaultMode) - return defaultMode === 'dark' + if (defaultMode === 'light') + return false + if (defaultMode === 'dark') + return true + // Auto mode or undefined, use system preference return window.matchMedia('(prefers-color-scheme: dark)').matches } diff --git a/src/types/index.d.ts b/src/types/index.d.ts index a227bd8..c7903d4 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -15,7 +15,7 @@ export interface ThemeConfig { } color: { - mode: 'light' | 'dark' + mode: 'light' | 'dark' | 'auto' light: { primary: string secondary: string From 21ae80e27d537da9b3b5f666a2c036b238bed01e Mon Sep 17 00:00:00 2001 From: radishzzz Date: Sun, 6 Apr 2025 03:10:28 +0100 Subject: [PATCH 2/2] chore: add auto option for theme colors --- src/content/posts/guides/Theme Guide-en.md | 4 ++-- src/content/posts/guides/Theme Guide-es.md | 4 ++-- src/content/posts/guides/Theme Guide-ja.md | 4 ++-- src/layouts/Head.astro | 1 - 4 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/content/posts/guides/Theme Guide-en.md b/src/content/posts/guides/Theme Guide-en.md index 60a780a..dadbfef 100644 --- a/src/content/posts/guides/Theme Guide-en.md +++ b/src/content/posts/guides/Theme Guide-en.md @@ -25,7 +25,7 @@ site: { // site description description: 'Retypeset is a static blog theme...' // use i18n title/subtitle/description from src/i18n/ui.ts instead of static ones above - i18nTitle: true // light, dark, auto + i18nTitle: true // true, false // author name author: 'radishzz' // site url @@ -41,7 +41,7 @@ site: { ```ts color: { // default theme mode - mode: 'light' // light, dark + mode: 'light' // light, dark, auto // light mode light: { // primary color diff --git a/src/content/posts/guides/Theme Guide-es.md b/src/content/posts/guides/Theme Guide-es.md index de4b11b..12fa675 100644 --- a/src/content/posts/guides/Theme Guide-es.md +++ b/src/content/posts/guides/Theme Guide-es.md @@ -25,7 +25,7 @@ site: { // descripción del sitio description: 'Retypeset is a static blog theme...' // usar título/subtítulo/descripción en varios idiomas desde src/i18n/ui.ts en lugar de los estáticos anteriores - i18nTitle: true // light, dark, auto + i18nTitle: true // true, false // nombre del autor author: 'radishzz' // url del sitio @@ -41,7 +41,7 @@ site: { ```ts color: { // modo de tema predeterminado - mode: 'light' // light, dark + mode: 'light' // light, dark, auto // modo claro light: { // color primario diff --git a/src/content/posts/guides/Theme Guide-ja.md b/src/content/posts/guides/Theme Guide-ja.md index 9deef7f..2b818e8 100644 --- a/src/content/posts/guides/Theme Guide-ja.md +++ b/src/content/posts/guides/Theme Guide-ja.md @@ -25,7 +25,7 @@ site: { // サイト説明 description: 'Retypeset is a static blog theme...' // 上記の静的設定の代わりに src/i18n/ui.ts の多言語タイトル/サブタイトル/説明を使用 - i18nTitle: true // light, dark, auto + i18nTitle: true // true, false // 著者名 author: 'radishzz' // サイトURL @@ -41,7 +41,7 @@ site: { ```ts color: { // デフォルトテーマモード - mode: 'light' // light, dark + mode: 'light' // light, dark, auto // ライトモード light: { // プライマリカラー diff --git a/src/layouts/Head.astro b/src/layouts/Head.astro index ae397a6..d79b4e1 100644 --- a/src/layouts/Head.astro +++ b/src/layouts/Head.astro @@ -114,7 +114,6 @@ function isCurrentDark() { return false if (defaultMode === 'dark') return true - // Auto mode or undefined, use system preference return window.matchMedia('(prefers-color-scheme: dark)').matches }