hydrz · mingcheng · May 8, 2026
diff --git a/README.md b/README.md
@@ -51,13 +51,48 @@ curl -sI https://ip.hydrz.cn
 
 ## 多主题
 
-### 吉卜力
+项目内置多套界面主题，主题样式文件位于 [`src/`](src/) 目录中，每个主题对应一个独立的 CSS 文件，并均支持通过 `prefers-color-scheme` 自动适配浅色 / 深色模式。
 
-![吉卜力](images/screenshot-ghibli.png)
+### 主题列表
 
-### 8bit
+| 主题      | 样式文件                                 | 风格说明                                                                                                               | 预览                                    |
+| --------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
+| 默认      | [`src/style.css`](src/style.css)         | 项目基础样式，定义全部 CSS 变量与排版基线，蓝灰配色，简洁通用，**任何主题都需先引入它**。                              | ![默认](images/screenshot.png)          |
+| 吉卜力    | [`src/ghibli.css`](src/ghibli.css)       | 取自宫崎骏动画的柔和自然色，米黄底配抹茶绿与天空蓝，圆角与柔阴影，给人手绘水彩般的温暖质感。                           | ![吉卜力](images/screenshot-ghibli.png) |
+| 8bit      | [`src/8bit.css`](src/8bit.css)           | 复古像素风，使用 NES.css 风格的硬边框、像素字体与高饱和原色，营造红白机时代的怀旧氛围。                                | ![8bit](images/screenshot-8bit.png)     |
+| Dracula   | [`src/dracula.css`](src/dracula.css)     | 经典 [Dracula](https://draculatheme.com/) 配色，紫色 / 粉色 / 青色霓虹点缀，深色模式表现尤佳。                         | —                                       |
+| Nord      | [`src/nord.css`](src/nord.css)           | 北欧极简 [Nord](https://www.nordtheme.com/) 配色，冷色调蓝灰为主，干净克制，适合长时间阅读。                           | —                                       |
+| Solarized | [`src/solarized.css`](src/solarized.css) | Ethan Schoonover 的 [Solarized](https://ethanschoonover.com/solarized/) 配色，米色背景搭配蓝绿强调色，对比柔和、护眼。 | —                                       |
 
-![8bit](images/screenshot-8bit.png)
+> 标记为 “—” 的主题暂未提供预览截图，欢迎在 PR 中补充对应的 `images/screenshot-<theme>.png` 文件。
+
+### 切换主题
+
+主题通过在 [`index.html`](index.html) 的 `<head>` 中引入对应的 CSS 文件来启用。基础样式 [`src/style.css`](src/style.css) 必须始终保留并位于第一位，主题样式在其之后引入即可覆盖默认外观：
+
+```html
+<!-- 基础样式（必需，必须放在最前面） -->
+<link rel="stylesheet" href="./src/style.css" />
+
+<!-- 任选其一启用对应主题 -->
+<link rel="stylesheet" href="./src/ghibli.css" />
+<!-- <link rel="stylesheet" href="./src/8bit.css" /> -->
+<!-- <link rel="stylesheet" href="./src/dracula.css" /> -->
+<!-- <link rel="stylesheet" href="./src/nord.css" /> -->
+<!-- <link rel="stylesheet" href="./src/solarized.css" /> -->
+```
+
+> 提示：同一时间只建议启用一个主题文件，避免样式互相覆盖造成显示异常。如需强制使用浅色或深色变体，可在主题文件中删除或调整 `@media (prefers-color-scheme: dark)` 代码块。
+
+### 自定义主题
+
+如果想新增自定义主题，可参考现有主题文件进行扩展：
+
+1. 在 [`src/`](src/) 目录下新建一个 CSS 文件，例如 `src/my-theme.css`。
+2. 在 `:root` 中按需覆盖上文表格列出的 CSS 变量来调整配色与质感；如需深色模式，再在 `@media (prefers-color-scheme: dark) { :root { ... } }` 中提供深色变量。
+3. 如需更换字体，可在主题文件顶部使用 `@import url(...)` 或 `@font-face` 引入网络 / 本地字体，再覆盖 `--font-family`。
+4. 在 [`index.html`](index.html) 中引入新的主题文件，替换原有主题的 `<link>` 标签即可生效。
+5. （可选）在 `images/` 目录添加 `screenshot-<theme>.png` 截图，并在上方主题列表中追加一行说明。
 
 ## 开发规范
 

diff --git a/src/dracula.css b/src/dracula.css
@@ -0,0 +1,99 @@
+/*
+ * Dracula theme
+ * Classic palette from https://draculatheme.com/.
+ * Light variant is provided as "Dracula Light" inspired sibling for daylight use.
+ */
+:root {
+    --color-primary: #6272a4;
+    /* comment / muted purple-blue */
+    --color-secondary: #bd93f9;
+    /* purple */
+    --color-background: #f8f8f2;
+    /* foreground used as light bg */
+    --color-surface: #ffffff;
+    --color-text: #282a36;
+    /* background used as dark text */
+    --color-text-secondary: #6272a4;
+    --color-border: #e0e0e0;
+    --color-shadow: rgba(40, 42, 54, 0.1);
+    --color-success: #50fa7b;
+    /* green */
+    --color-error: #ff5555;
+    /* red */
+    --color-warning: #ffb86c;
+    /* orange */
+    --color-info: #8be9fd;
+    /* cyan */
+    --color-focus: #ff79c6;
+    /* pink */
+
+    --font-family:
+        "Fira Code", "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono",
+        "Courier New", monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-primary: #bd93f9;
+        /* purple */
+        --color-secondary: #ff79c6;
+        /* pink */
+        --color-background: #282a36;
+        /* dracula bg */
+        --color-surface: #44475a;
+        /* current line */
+        --color-text: #f8f8f2;
+        /* foreground */
+        --color-text-secondary: #bdbdcf;
+        --color-border: #44475a;
+        --color-shadow: rgba(0, 0, 0, 0.55);
+        --color-success: #50fa7b;
+        --color-error: #ff5555;
+        --color-warning: #ffb86c;
+        --color-info: #8be9fd;
+        --color-focus: #ff79c6;
+    }
+}
+
+.card {
+    border-radius: 2px;
+    box-shadow: 0 6px 18px var(--color-shadow);
+}
+
+/* Subtle accent strip on top of cards for a code-editor feel */
+.card::before {
+    content: "";
+    display: block;
+    height: 2px;
+    margin: -1rem -1rem 1rem -1rem;
+    background: linear-gradient(90deg,
+            var(--color-secondary),
+            var(--color-focus),
+            var(--color-info));
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+}
+
+.tooltip {
+    border: 1px solid var(--color-border);
+    box-shadow: 0 6px 16px var(--color-shadow);
+}
+
+/* Disable shadows, transforms and transitions for a flat, static look */
+.card,
+.tooltip,
+.table,
+.table-row,
+.footer-link,
+.card-icon {
+    box-shadow: none !important;
+    transition: none !important;
+}
+
+.card:hover,
+.table-row:hover,
+.footer-link:hover,
+.icon:hover+.tooltip {
+    transform: none !important;
+    box-shadow: none !important;
+}
diff --git a/src/nord.css b/src/nord.css
@@ -0,0 +1,86 @@
+/*
+ * Nord theme
+ * Arctic, north-bluish palette (https://www.nordtheme.com/).
+ * Light uses Snow Storm; dark uses Polar Night.
+ */
+:root {
+    --color-primary: #5e81ac;
+    /* nord10 */
+    --color-secondary: #88c0d0;
+    /* nord8 */
+    --color-background: #eceff4;
+    /* nord6 - snow storm */
+    --color-surface: #ffffff;
+    --color-text: #2e3440;
+    /* nord0 */
+    --color-text-secondary: #4c566a;
+    /* nord3 */
+    --color-border: #d8dee9;
+    /* nord4 */
+    --color-shadow: rgba(46, 52, 64, 0.08);
+    --color-success: #a3be8c;
+    /* nord14 */
+    --color-error: #bf616a;
+    /* nord11 */
+    --color-warning: #ebcb8b;
+    /* nord13 */
+    --color-info: #81a1c1;
+    /* nord9 */
+    --color-focus: #5e81ac;
+
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+        "Noto Sans", sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-primary: #88c0d0;
+        /* nord8 */
+        --color-secondary: #8fbcbb;
+        /* nord7 */
+        --color-background: #2e3440;
+        /* nord0 - polar night */
+        --color-surface: #3b4252;
+        /* nord1 */
+        --color-text: #eceff4;
+        /* nord6 */
+        --color-text-secondary: #d8dee9;
+        /* nord4 */
+        --color-border: #434c5e;
+        /* nord2 */
+        --color-shadow: rgba(0, 0, 0, 0.35);
+        --color-success: #a3be8c;
+        --color-error: #bf616a;
+        --color-warning: #ebcb8b;
+        --color-info: #81a1c1;
+        --color-focus: #88c0d0;
+    }
+}
+
+.card {
+    border-radius: 2px;
+}
+
+.tooltip {
+    border: 1px solid var(--color-border);
+}
+
+/* Disable shadows, transforms and transitions for a flat, static look */
+.card,
+.tooltip,
+.table,
+.table-row,
+.footer-link,
+.card-icon {
+    box-shadow: none !important;
+    transition: none !important;
+}
+
+.card:hover,
+.table-row:hover,
+.footer-link:hover,
+.icon:hover+.tooltip {
+    transform: none !important;
+    box-shadow: none !important;
+}
diff --git a/src/solarized.css b/src/solarized.css
@@ -0,0 +1,90 @@
+/*
+ * Solarized theme
+ * Classic palette by Ethan Schoonover (https://ethanschoonover.com/solarized/)
+ * Light variant uses the "base3" background; dark variant uses "base03".
+ */
+:root {
+    --color-primary: #268bd2;
+    /* blue */
+    --color-secondary: #2aa198;
+    /* cyan */
+    --color-background: #fdf6e3;
+    /* base3 */
+    --color-surface: #eee8d5;
+    /* base2 */
+    --color-text: #586e75;
+    /* base01 */
+    --color-text-secondary: #93a1a1;
+    /* base1 */
+    --color-border: #93a1a1;
+    /* base1 */
+    --color-shadow: rgba(88, 110, 117, 0.12);
+    --color-success: #859900;
+    /* green */
+    --color-error: #dc322f;
+    /* red */
+    --color-warning: #b58900;
+    /* yellow */
+    --color-info: #2aa198;
+    /* cyan */
+    --color-focus: #cb4b16;
+    /* orange */
+
+    --font-family:
+        "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
+        "Noto Sans", sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-primary: #268bd2;
+        --color-secondary: #2aa198;
+        --color-background: #002b36;
+        /* base03 */
+        --color-surface: #073642;
+        /* base02 */
+        --color-text: #eee8d5;
+        /* base2 */
+        --color-text-secondary: #93a1a1;
+        /* base1 */
+        --color-border: #586e75;
+        /* base01 */
+        --color-shadow: rgba(0, 0, 0, 0.45);
+        --color-success: #859900;
+        --color-error: #dc322f;
+        --color-warning: #b58900;
+        --color-info: #2aa198;
+        --color-focus: #cb4b16;
+    }
+}
+
+/* Solarized prefers a calm, paper-like surface */
+body {
+    background-image:
+        radial-gradient(circle at 0% 0%, rgba(38, 139, 210, 0.04), transparent 40%),
+        radial-gradient(circle at 100% 100%, rgba(203, 75, 22, 0.04), transparent 40%);
+    background-attachment: fixed;
+}
+
+.card {
+    box-shadow: 0 4px 14px var(--color-shadow);
+}
+
+/* Disable shadows, transforms and transitions for a flat, static look */
+.card,
+.tooltip,
+.table,
+.table-row,
+.footer-link,
+.card-icon {
+    box-shadow: none !important;
+    transition: none !important;
+}
+
+.card:hover,
+.table-row:hover,
+.footer-link:hover,
+.icon:hover+.tooltip {
+    transform: none !important;
+    box-shadow: none !important;
+}