From 41deab68c93f55f4eeb322bdccbc7db69e0c54be Mon Sep 17 00:00:00 2001 From: lutinglt Date: Sun, 10 Aug 2025 17:12:26 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=9F=94=E5=92=8C=E7=9A=84?= =?UTF-8?q?=E6=9A=97=E8=89=B2=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/release.md | 1 + .github/workflows/release.yml | 2 +- README.md | 2 +- TODO.md | 1 - src/core/github.ts | 59 ++++++++-------- themes/dark.css.ts | 2 +- themes/light.css.ts | 2 +- themes/soft-dark.css.ts | 129 ++++++++++++++++++++++++++++++++++ 8 files changed, 165 insertions(+), 33 deletions(-) create mode 100644 themes/soft-dark.css.ts diff --git a/.github/release.md b/.github/release.md index 7b22fd4..ffe1218 100644 --- a/.github/release.md +++ b/.github/release.md @@ -2,6 +2,7 @@ - 支持自动颜色主题 (跟随系统) - 支持亮色主题 +- 支持柔和的暗色主题 (dark-dimmed) ## 🌈 Style diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index d5e043a..6f29f7a 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -20,7 +20,7 @@ jobs: export TZ=Asia/Shanghai TAG="v$(npm run -s version).$(date +%y%m%d%H%M)" cd dist - tar -zcf theme-github.tar.gz --remove-files theme-github-auto.css theme-github-light.css theme-github-dark.css + tar -zcf theme-github.tar.gz --remove-files theme-github-auto.css theme-github-light.css theme-github-dark.css theme-github-soft-dark.css gh release create "$TAG" * --notes-file .github/release.md --draft -t $TAG env: GH_TOKEN: ${{ github.token }} diff --git a/README.md b/README.md index 763ce17..c571274 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ ```ini [ui] -THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-dark +THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-dark, github-soft-dark ``` 详细请查看 Gitea 文档 diff --git a/TODO.md b/TODO.md index 9fead9a..f1e4ece 100644 --- a/TODO.md +++ b/TODO.md @@ -4,7 +4,6 @@ - issue/PR 列表样式 github 布局 - styles/themes 库组件导出整理 - defineTheme 颜色生成代码重构 -- 自动颜色主题生成 ### 其他 diff --git a/src/core/github.ts b/src/core/github.ts index 39353a0..72a2295 100644 --- a/src/core/github.ts +++ b/src/core/github.ts @@ -1,7 +1,7 @@ import { saturate } from "polished"; import type { Console, Diff, Other } from "src"; import { scaleColorLight } from "src/functions"; -import type { Github } from "src/types"; +import type { Chroma, Github } from "src/types"; import { themeVars } from "src/types/vars"; import { defineTheme } from "./color"; import type { Theme } from "./theme"; @@ -144,7 +144,7 @@ export type GithubColor = { }; }; -export function defineGithubTheme(githubColor: GithubColor): Theme { +export function defineGithubTheme(githubColor: GithubColor, chroma: Chroma | null = null): Theme { const console: Console = { fg: { self: githubColor.fgColor.default, @@ -394,30 +394,33 @@ export function defineGithubTheme(githubColor: GithubColor): Theme { }, }, }; - return defineTheme({ - isDarkTheme: githubColor.isDarkTheme, - primary: githubColor.fgColor.accent, - primaryContrast: githubColor.fgColor.default, - secondary: githubColor.borderColor.default, - red: githubColor.fgColor.danger, - orange: githubColor.fgColor.severe, - yellow: githubColor.fgColor.attention, - olive: githubColor.display.olive.fgColor, - green: githubColor.fgColor.success, - cyan: githubColor.display.cyan.fgColor, - teal: githubColor.display.teal.fgColor, - blue: githubColor.fgColor.accent, - violet: githubColor.display.indigo.fgColor, - purple: githubColor.fgColor.done, - pink: githubColor.fgColor.sponsors, - brown: githubColor.display.brown.fgColor, - black: githubColor.fgColor.black, - grey: githubColor.fgColor.neutral, - gold: githubColor.display.lemon.fgColor, - white: githubColor.fgColor.white, - console, - diff, - other, - github, - }); + return defineTheme( + { + isDarkTheme: githubColor.isDarkTheme, + primary: githubColor.fgColor.accent, + primaryContrast: githubColor.fgColor.default, + secondary: githubColor.borderColor.default, + red: githubColor.fgColor.danger, + orange: githubColor.fgColor.severe, + yellow: githubColor.fgColor.attention, + olive: githubColor.display.olive.fgColor, + green: githubColor.fgColor.success, + cyan: githubColor.display.cyan.fgColor, + teal: githubColor.display.teal.fgColor, + blue: githubColor.fgColor.accent, + violet: githubColor.display.indigo.fgColor, + purple: githubColor.fgColor.done, + pink: githubColor.fgColor.sponsors, + brown: githubColor.display.brown.fgColor, + black: githubColor.fgColor.black, + grey: githubColor.fgColor.neutral, + gold: githubColor.display.lemon.fgColor, + white: githubColor.fgColor.white, + console, + diff, + other, + github, + }, + chroma + ); } diff --git a/themes/dark.css.ts b/themes/dark.css.ts index 4e714f6..f13c615 100644 --- a/themes/dark.css.ts +++ b/themes/dark.css.ts @@ -24,13 +24,13 @@ export default defineGithubTheme({ default: "#f0f6fc", disabled: "#656c7699", done: "#ab7df8", + muted: "#9198a1", neutral: "#9198a1", severe: "#db6d28", sponsors: "#db61a2", success: "#3fb950", black: "#010409", white: "#ffffff", - muted: "#9198a1", }, bgColor: { accent: { emphasis: "#1f6feb", muted: "#388bfd1a" }, diff --git a/themes/light.css.ts b/themes/light.css.ts index 1dd4c72..ac594b3 100644 --- a/themes/light.css.ts +++ b/themes/light.css.ts @@ -24,13 +24,13 @@ export default defineGithubTheme({ default: "#1f2328", disabled: "#818b98", done: "#8250df", + muted: "#59636e", neutral: "#59636e", severe: "#bc4c00", sponsors: "#bf3989", success: "#1a7f37", black: "#1f2328", white: "#ffffff", - muted: "#59636e", }, bgColor: { accent: { emphasis: "#0969da", muted: "#ddf4ff" }, diff --git a/themes/soft-dark.css.ts b/themes/soft-dark.css.ts new file mode 100644 index 0000000..33351fc --- /dev/null +++ b/themes/soft-dark.css.ts @@ -0,0 +1,129 @@ +import { defineGithubTheme } from "src/core/github"; +import { prettylights2Chroma } from "src/core/prettylights"; + +export default defineGithubTheme( + { + isDarkTheme: true, + display: { + brown: { fgColor: "#b69a6d" }, + cyan: { fgColor: "#07ace4" }, + indigo: { fgColor: "#9899ec" }, + lemon: { fgColor: "#ba9b12" }, + olive: { fgColor: "#a2a626" }, + teal: { fgColor: "#1cb0ab" }, + }, + diffBlob: { + addtionNum: { bgColor: "#57ab5a4d" }, + addtionWord: { bgColor: "#46954a66" }, + deletionNum: { bgColor: "#e5534b4d" }, + deletionWord: { bgColor: "#e5534b66" }, + hunkNum: { bgColor: { rest: "#143d79" } }, + }, + fgColor: { + accent: "#478be6", + attention: "#c69026", + danger: "#e5534b", + default: "#d1d7e0", + disabled: "#656c76", + done: "#986ee2", + muted: "#9198a1", + neutral: "#9198a1", + severe: "#cc6b2c", + sponsors: "#c96198", + success: "#57ab5a", + black: "#010409", + white: "#cdd9e5", + }, + bgColor: { + accent: { emphasis: "#316dca", muted: "#4184e41a" }, + attention: { muted: "#ae7c1426" }, + success: { emphasis: "#347d39", muted: "#46954a26" }, + danger: { muted: "#e5534b1a" }, + done: { emphasis: "#8256d0" }, + default: "#212830", + inset: "#151b23", + muted: "#262c36", + neutral: { muted: "#656c7633" }, + }, + borderColor: { + accent: { emphasis: "#316dca" }, + default: "#3d444d", + attention: { emphasis: "#966600" }, + success: { emphasis: "#347d39" }, + done: { emphasis: "#8256d0" }, + muted: "#3d444db3", + translucent: "#cdd9e526", + }, + button: { + primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#3b8640" } }, + danger: { fgColor: { rest: "#ea5c53", hover: "#ffffff" }, bgColor: { hover: "#ad2e2c" } }, + }, + control: { + bgColor: { active: "#3d444d", hover: "#2f3742", rest: "#2a313c" }, + transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } }, + }, + shadow: { floating: { small: "#01040966" } }, + overlay: { backdrop: { bgColor: "#262c3666" } }, + underlineNav: { borderColor: { active: "#ec775c" } }, + contribution: { + default: { + bgColor: { num0: "#2a313c", num1: "#1b4721", num2: "#2b6a30", num3: "#46954a", num4: "#6bc46d" }, + borderColor: { num0: "#0104090d" }, + }, + }, + }, + prettylights2Chroma({ + syntax: { + brackethighlighter: { + angle: "#9198a1", + unmatched: "#e5534b", + }, + carriage: { + return: { + bg: "#ad2e2c", + text: "#f0f6fc", + }, + }, + comment: "#9198a1", + constant: "#6cb6ff", + constantOtherReferenceLink: "#96d0ff", + entity: "#dcbdfb", + entityTag: "#8ddb8c", + invalid: { + illegal: { + bg: "#922323", + text: "#f0f6fc", + }, + }, + keyword: "#f47067", + markup: { + bold: "#f0f6fc", + changed: { + bg: "#682d0f", + text: "#ffddb0", + }, + deleted: { + bg: "#78191b", + text: "#ffd8d3", + }, + heading: "#316dca", + ignored: { + bg: "#255ab2", + text: "#f0f6fc", + }, + inserted: { + bg: "#1b4721", + text: "#b4f1b4", + }, + italic: "#f0f6fc", + list: "#eac55f", + }, + metaDiffRange: "#dcbdfb", + storageModifierImport: "#f0f6fc", + string: "#96d0ff", + stringRegexp: "#8ddb8c", + sublimelinterGutterMark: "#3d444d", + variable: "#f69d50", + }, + }) +);