增加 FUwari 代码块双主题

归档 50

前端 16 文章示例 8 Examples 4 笔记 4 软件 4 个人随笔 3 编程 3 环境配置 2 Guides 1 TVBox 1 个人 1 博客指南 1 思考 1 教程 1

256 字

1 分钟

增加 FUwari 代码块双主题

2025-10-24

前端

Astro

Fuwari

博客

这篇文章来记录一下美化博客的代码。代码模块跟随主题变动而变化

修改代码#

astro.config.mjs#

1
// 。。。 修改此处代码
2
expressiveCode({
3
      // themes: [expressiveCodeConfig.theme, expressiveCodeConfig.theme],
4
      themes: expressiveCodeConfig.themes,
5
      plugins: [
6
        pluginCollapsibleSections(),
7
        pluginLineNumbers(),
8
        pluginLanguageBadge(),
9
        pluginCustomCopyButton(),
10
      ],
11
      defaultProps: {
12
        wrap: true,
13
        overridesByLang: {
14
          shellsession: {
15
            showLineNumbers: false,
16
          },
17
        },
18
      },
19
      // styleOverrides: {
20
      //   codeBackground: "var(--codeblock-bg)",
21
      //   borderRadius: "0.75rem",
22
      //   borderColor: "none",
23
      //   codeFontSize: "0.875rem",
24
      //   codeFontFamily:
25
      //     "'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
26
      //   codeLineHeight: "1.5rem",
27
      //   frames: {
28
      //     editorBackground: "var(--codeblock-bg)",
29
      //     terminalBackground: "var(--codeblock-bg)",
30
      //     terminalTitlebarBackground: "var(--codeblock-topbar-bg)",
31
      //     editorTabBarBackground: "var(--codeblock-topbar-bg)",
32
      //     editorActiveTabBackground: "none",
33
      //     editorActiveTabIndicatorBottomColor: "var(--primary)",
34
      //     editorActiveTabIndicatorTopColor: "none",
35
      //     editorTabBarBorderBottomColor: "var(--codeblock-topbar-bg)",
36
      //     terminalTitlebarBorderBottomColor: "none",
37
      //   },
38
      //   textMarkers: {
39
      //     delHue: 0,
40
      //     insHue: 180,
41
      //     markHue: 250,
42
      //   },
43
      // },
44
      // frames: {
45
      //   showCopyToClipboardButton: false,
46
      // },
47
    }),
48

49
    // 。。。 修改此处代码

src/types/config.ts#

1
// 。。。下滑至最下面
2
export type ExpressiveCodeConfig = {
3
  theme: string[];
4
};

src/config.ts#

1
// 。。。下滑至最下面
2

3
export const expressiveCodeConfig: ExpressiveCodeConfig = {
4
  // Note: Some styles (such as background color) are being overridden, see the astro.config.mjs file.
5
  // Please select a dark theme, as this blog theme currently only supports dark background color
6
  theme: ["github-light", "github-dark"],
7
};

src/utils/setting-utils.ts#

1
  // Set the theme for Expressive Code
2
  const isDarkMode = document.documentElement.classList.contains("dark");
3
  document.documentElement.setAttribute(
4
    "data-theme",
5
    expressiveCodeConfig.theme[Number(isDarkMode)],
6
  );