Astro博客修改默认主题教程#

核心目标：修改博客首次打开默认显示主题，保留「跟随系统」「手动切换暗色」功能，不影响原有主题切换逻辑，适配Astro模板。

一、核心修改逻辑#

Astro博客主题控制依赖2个核心文件：

全局布局文件 src/layouts/Layout.astro（主题初始化脚本）
工具文件 src/utils/setting-utils.ts（主题读取/保存逻辑）

二、具体修改步骤#

第一步：修改 Layout.astro 主题初始化脚本#

打开文件：src/layouts/Layout.astro
找到头部 is:inline 主题脚本

找到核心代码行，只修改1处默认值：

原代码：

1
const theme = localStorage.getItem('theme') || DEFAULT_THEME;

修改后：

1
// 关键：无本地存储时，默认亮色
2
const theme = localStorage.getItem('theme') || LIGHT_MODE;//或者DARK_MODE

保留脚本中所有原有逻辑（包括 switch 里的 AUTO_MODE、DARK_MODE 分支），不要删除任何代码，确保跟随系统、手动切换功能正常。

第二步：修改 setting-utils.ts 主题读取默认值#

打开文件：src/utils/setting-utils.ts

找到 getStoredTheme 函数，只修改1处默认返回值：

原代码：

1
export function getStoredTheme(): LIGHT_DARK_MODE {
2
  return (localStorage.getItem("theme") as LIGHT_DARK_MODE) || DEFAULT_THEME;
3
}

修改后：

1
export function getStoredTheme(): LIGHT_DARK_MODE {
2
  // 关键：无本地存储时，默认亮色（同步Layout逻辑）
3
  return (localStorage.getItem("theme") as LIGHT_DARK_MODE) || LIGHT_MODE;//或者DARK_MODE
4
}

第三步：可选优化（提升体验，避免闪屏）#

在 Layout.astro 的 html 标签上，默认添加 light 类，防止页面加载时闪一下暗色：

原代码：

1
    <html lang={siteLang} class="bg-[var(--page-bg)] transition text-[14px] md:text-[16px]"
2
        data-overlayscrollbars-initialize
3
    >

修改后:

1
    <html lang={siteLang} class="bg-[var(--page-bg)] transition text-[14px] md:text-[16px] light"
2
        data-overlayscrollbars-initialize
3
    >