From 5018a2d5091388f059f7ac3e4711607ac5f5394f Mon Sep 17 00:00:00 2001 From: mingcheng Date: Fri, 8 May 2026 18:23:37 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20add=20Dracula,=20Nord,=20and=20Solarize?= =?UTF-8?q?d=20themes=20with=20documentation=20=F0=9F=8E=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add Dracula theme with classic dark palette and light variant - Add Nord theme with arctic north-bluish color scheme - Add Solarized theme with classic light and dark palettes - Update README with complete theme list and usage instructions - Include screenshots and customization guide for new themes Signed-off-by: mingcheng --- README.md | 43 ++++++++++++++++++-- src/dracula.css | 99 +++++++++++++++++++++++++++++++++++++++++++++++ src/nord.css | 86 ++++++++++++++++++++++++++++++++++++++++ src/solarized.css | 90 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 314 insertions(+), 4 deletions(-) create mode 100644 src/dracula.css create mode 100644 src/nord.css create mode 100644 src/solarized.css diff --git a/README.md b/README.md index 6d50822..3c911de 100644 --- 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-.png` 文件。 + +### 切换主题 + +主题通过在 [`index.html`](index.html) 的 `` 中引入对应的 CSS 文件来启用。基础样式 [`src/style.css`](src/style.css) 必须始终保留并位于第一位，主题样式在其之后引入即可覆盖默认外观： + +```html + + + + + + + + + +``` + +> 提示：同一时间只建议启用一个主题文件，避免样式互相覆盖造成显示异常。如需强制使用浅色或深色变体，可在主题文件中删除或调整 `@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) 中引入新的主题文件，替换原有主题的 `` 标签即可生效。 +5. （可选）在 `images/` 目录添加 `screenshot-.png` 截图，并在上方主题列表中追加一行说明。 ## 开发规范 diff --git a/src/dracula.css b/src/dracula.css new file mode 100644 index 0000000..2aaafb8 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/nord.css b/src/nord.css new file mode 100644 index 0000000..7b518c9 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/solarized.css b/src/solarized.css new file mode 100644 index 0000000..97f6fb0 --- /dev/null +++ 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; +} \ No newline at end of file