Optimize the logic for switching between light and dark modes

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

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

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

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

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: {
     // основной цвет

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: {
     // 高亮顏色

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: {
     // 高亮颜色

src/layouts/Head.astro

@@ -110,8 +110,11 @@ function isCurrentDark() {
   const currentTheme = localStorage.getItem('theme')
   if (currentTheme)
     return currentTheme === 'dark'
-  if (defaultMode)
+  if (defaultMode === 'light')
-    return defaultMode === 'dark'
+    return false
+  if (defaultMode === 'dark')
+    return true
+  // Auto mode or undefined, use system preference
   return window.matchMedia('(prefers-color-scheme: dark)').matches
 }
 

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