From 89ac2720c74aa157b058e6712cc667de29c7d5ac Mon Sep 17 00:00:00 2001 From: lutinglt Date: Wed, 10 Sep 2025 23:43:38 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E7=8C=9B=E7=94=B7=E7=B2=89?= =?UTF-8?q?=E9=A2=9C=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 | 16 +++++-- src/core/display.ts | 77 ++++++++++++++++++++++++++++++++++ src/core/github.ts | 12 ++++-- src/types/color/github.ts | 2 +- styles/components/actions.ts | 2 +- themes/colorblind-dark.css.ts | 9 ++-- themes/colorblind-light.css.ts | 9 ++-- themes/dark.css.ts | 10 +++-- themes/light.css.ts | 10 +++-- themes/pink-dark.css.ts | 22 ++++++++++ themes/pink-light.css.ts | 22 ++++++++++ themes/pink-soft-dark.css.ts | 10 +++++ themes/soft-dark.css.ts | 9 ++-- themes/tritanopia-dark.css.ts | 4 +- themes/tritanopia-light.css.ts | 4 +- 16 files changed, 191 insertions(+), 28 deletions(-) create mode 100644 src/core/display.ts create mode 100644 themes/pink-dark.css.ts create mode 100644 themes/pink-light.css.ts create mode 100644 themes/pink-soft-dark.css.ts diff --git a/.github/release.md b/.github/release.md index a6cac3e..a657b6a 100644 --- a/.github/release.md +++ b/.github/release.md @@ -12,6 +12,7 @@ determined. ### ✨ Feature +- 支持猛男粉颜色主题 - 修改外观设置中显示的主题名称 #### CSS 变量 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 55075e7..4ec2142 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -19,9 +19,19 @@ jobs: run: | export TZ=Asia/Shanghai TAG="v$(npm run -s version)" - tar -zcf dist/theme-github-base.tar.gz --remove-files dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css - tar -zcf dist/theme-github-colorblind.tar.gz --remove-files dist/theme-github-colorblind-auto.css dist/theme-github-colorblind-light.css dist/theme-github-colorblind-dark.css - tar -zcf dist/theme-github-colorblind-tritanopia.tar.gz --remove-files dist/theme-github-tritanopia-auto.css dist/theme-github-tritanopia-light.css dist/theme-github-tritanopia-dark.css + + tar -zcf dist/theme-github-base.tar.gz --remove-files \ + dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css + + tar -zcf dist/theme-github-colorblind.tar.gz --remove-files \ + dist/theme-github-colorblind-auto.css dist/theme-github-colorblind-light.css dist/theme-github-colorblind-dark.css + + tar -zcf dist/theme-github-colorblind-tritanopia.tar.gz --remove-files \ + dist/theme-github-tritanopia-auto.css dist/theme-github-tritanopia-light.css dist/theme-github-tritanopia-dark.css + + tar -zcf dist/theme-github-extra-pink.tar.gz --remove-files \ + dist/theme-github-extra-pink-auto.css dist/theme-github-extra-pink-light.css dist/theme-github-extra-pink-dark.css dist/theme-github-extra-pink-soft-dark.css + gh release create "$TAG" dist/* --notes-file .github/release.md --draft -t $TAG env: GH_TOKEN: ${{ github.token }} diff --git a/src/core/display.ts b/src/core/display.ts new file mode 100644 index 0000000..bb1da3b --- /dev/null +++ b/src/core/display.ts @@ -0,0 +1,77 @@ +import { type GithubColor } from "./github"; + +export type DisplayColor = { + num0: string; + num1: string; + num2: string; + num3: string; + num4: string; + num5: string; + num6: string; + num7: string; + num8: string; + num9: string; +}; + +export function display2GithubColor( + displayColor: DisplayColor, + baseGithubColor: GithubColor, + soft?: boolean +): GithubColor { + return { + ...baseGithubColor, + fgColor: { + ...baseGithubColor.fgColor, + accent: soft ? displayColor.num7 : displayColor.num6, + }, + bgColor: { + ...baseGithubColor.bgColor, + accent: { + emphasis: displayColor.num5, + muted: soft ? displayColor.num1 : displayColor.num0, + }, + }, + borderColor: { + ...baseGithubColor.borderColor, + accent: { + emphasis: soft ? displayColor.num6 : displayColor.num5, + }, + }, + button: { + ...baseGithubColor.button, + primary: { + ...baseGithubColor.button.primary, + fgColor: { + ...baseGithubColor.button.primary.fgColor, + accent: soft ? displayColor.num6 : displayColor.num5, + }, + bgColor: { + ...baseGithubColor.button.primary.bgColor, + rest: displayColor.num5, + hover: displayColor.num4, + }, + }, + star: { + iconColor: soft ? displayColor.num6 : displayColor.num5, + }, + }, + underlineNav: { + borderColor: { + active: soft ? displayColor.num6 : displayColor.num5, + }, + }, + contribution: { + ...baseGithubColor.contribution, + default: { + ...baseGithubColor.contribution.default, + bgColor: { + num0: baseGithubColor.contribution.default.bgColor.num0, + num1: soft ? displayColor.num2 : displayColor.num1, + num2: soft ? displayColor.num3 : displayColor.num2, + num3: soft ? displayColor.num5 : displayColor.num4, + num4: soft ? displayColor.num7 : displayColor.num6, + }, + }, + }, + }; +} diff --git a/src/core/github.ts b/src/core/github.ts index 7331340..5ab7b43 100644 --- a/src/core/github.ts +++ b/src/core/github.ts @@ -8,6 +8,7 @@ import { type ThemeColor } from "./color"; export type GithubColor = { isDarkTheme: boolean; display: { + blue: { fgColor: string }; brown: { fgColor: string }; cyan: { fgColor: string }; indigo: { fgColor: string }; @@ -60,7 +61,7 @@ export type GithubColor = { translucent: string; }; button: { - primary: { fgColor: { rest: string }; bgColor: { hover: string } }; + primary: { fgColor: { accent: string; rest: string }; bgColor: { rest: string; hover: string } }; danger: { fgColor: { rest: string; hover: string }; bgColor: { hover: string } }; star: { iconColor: string }; }; @@ -259,11 +260,14 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { }, primary: { fgColor: { - accent: saturate(0.1, scaleColorLight(githubColor.fgColor.success, githubColor.isDarkTheme ? 10 : -10)), + accent: saturate( + 0.1, + scaleColorLight(githubColor.button.primary.fgColor.accent, githubColor.isDarkTheme ? 10 : -10) + ), rest: githubColor.button.primary.fgColor.rest, }, bgColor: { - rest: themeVars.github.bgColor.success.emphasis, + rest: githubColor.button.primary.bgColor.rest, hover: githubColor.button.primary.bgColor.hover, }, borderColor: { @@ -348,7 +352,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { green: githubColor.fgColor.success, cyan: githubColor.display.cyan.fgColor, teal: githubColor.display.teal.fgColor, - blue: githubColor.fgColor.accent, + blue: githubColor.display.blue.fgColor, violet: githubColor.display.indigo.fgColor, purple: githubColor.fgColor.done, pink: githubColor.fgColor.sponsors, diff --git a/src/types/color/github.ts b/src/types/color/github.ts index a41e563..9bbfcdb 100644 --- a/src/types/color/github.ts +++ b/src/types/color/github.ts @@ -25,7 +25,6 @@ export const github = { accent: { /** 强调色 * @diff 折叠/展开按钮的悬停颜色 - * @actions `actionViewLeft` 左侧子作业激活伪元素颜色 * @release `releaseTagMenu` 顶部栏左侧按钮激活背景色 * @navbar `navbarRight` 头像管理员标识背景颜色 * @dropdown `dropdown` emoji 的悬停背景色 @@ -61,6 +60,7 @@ export const github = { * @input `input` 输入框被选中时的边框颜色 * @clone `clone` 克隆地址框被选中时的边框颜色 * @issue `comment` 评论框被选中时的边框颜色 + * @actions `actionViewLeft` 左侧子作业激活伪元素颜色 * @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色 * @dropdown `selectionDropdown` 选择输入框的内部边框颜色 * @notification `notification` 通知列表悬停时的左边框颜色 diff --git a/styles/components/actions.ts b/styles/components/actions.ts index eb2c76c..a58a3eb 100644 --- a/styles/components/actions.ts +++ b/styles/components/actions.ts @@ -180,7 +180,7 @@ export const actionViewLeft = css` &:after { overflow: visible; - background: ${themeVars.github.bgColor.accent.emphasis}; + background: ${themeVars.github.borderColor.accent.emphasis}; border-radius: ${otherThemeVars.border.radius}; content: ""; height: 24px; diff --git a/themes/colorblind-dark.css.ts b/themes/colorblind-dark.css.ts index 1cf8146..70c7700 100644 --- a/themes/colorblind-dark.css.ts +++ b/themes/colorblind-dark.css.ts @@ -1,4 +1,4 @@ -import { defineTheme, type Chroma, type ThemeColor } from "src"; +import { defineTheme, themeVars, type Chroma } from "src"; import { github2ThemeColor, type GithubColor } from "src/core/github"; import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; import { darkGithubColors } from "themes/dark"; @@ -28,7 +28,10 @@ export const colorblindDarkGithubColors: GithubColor = { success: { emphasis: "#1f6feb" }, }, button: { - primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#2a7aef" } }, + primary: { + fgColor: { accent: "#58a6ff", rest: "#ffffff" }, + bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#2a7aef" }, + }, danger: { fgColor: { rest: "#f0883e", hover: "#ffffff" }, bgColor: { hover: "#9b4215" } }, star: darkGithubColors.button.star, }, @@ -69,7 +72,7 @@ export const colorblindDarkPrettylights: prettylightsColor = { }, }; -export const colorblindDarkColors: ThemeColor = github2ThemeColor(colorblindDarkGithubColors); +export const colorblindDarkColors = github2ThemeColor(colorblindDarkGithubColors); export const colorblindDarkChroma: Chroma = prettylights2Chroma(colorblindDarkPrettylights); export default defineTheme(colorblindDarkColors, colorblindDarkChroma); diff --git a/themes/colorblind-light.css.ts b/themes/colorblind-light.css.ts index eff68e1..cb7b945 100644 --- a/themes/colorblind-light.css.ts +++ b/themes/colorblind-light.css.ts @@ -1,4 +1,4 @@ -import { defineTheme, type Chroma, type ThemeColor } from "src"; +import { defineTheme, themeVars, type Chroma } from "src"; import { github2ThemeColor, type GithubColor } from "src/core/github"; import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; import { lightGithubColors } from "themes/light"; @@ -28,7 +28,10 @@ export const colorblindLightGithubColors: GithubColor = { success: { emphasis: "#0969da" }, }, button: { - primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#0864d1" } }, + primary: { + fgColor: { accent: "#0969da", rest: "#ffffff" }, + bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#0864d1" }, + }, danger: { fgColor: { rest: "#bc4c00", hover: "#ffffff" }, bgColor: { hover: "#bc4c00" } }, star: lightGithubColors.button.star, }, @@ -69,7 +72,7 @@ export const colorblindLightPrettylights: prettylightsColor = { }, }; -export const colorblindLightColors: ThemeColor = github2ThemeColor(colorblindLightGithubColors); +export const colorblindLightColors = github2ThemeColor(colorblindLightGithubColors); export const colorblindLightChroma: Chroma = prettylights2Chroma(colorblindLightPrettylights); export default defineTheme(colorblindLightColors, colorblindLightChroma); diff --git a/themes/dark.css.ts b/themes/dark.css.ts index 1d3b667..310ec60 100644 --- a/themes/dark.css.ts +++ b/themes/dark.css.ts @@ -1,9 +1,10 @@ -import { defineTheme, type ThemeColor } from "src"; +import { defineTheme, themeVars } from "src"; import { github2ThemeColor, type GithubColor } from "src/core/github"; export const darkGithubColors: GithubColor = { isDarkTheme: true, display: { + blue: { fgColor: "#4493f8" }, brown: { fgColor: "#b69a6d" }, cyan: { fgColor: "#07ace4" }, indigo: { fgColor: "#9899ec" }, @@ -56,7 +57,10 @@ export const darkGithubColors: GithubColor = { translucent: "#ffffff26", }, button: { - primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#29903b" } }, + primary: { + fgColor: { accent: "#3fb950", rest: "#ffffff" }, + bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#29903b" }, + }, danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } }, star: { iconColor: "#e3b341" }, }, @@ -75,6 +79,6 @@ export const darkGithubColors: GithubColor = { }, }; -export const darkColors: ThemeColor = github2ThemeColor(darkGithubColors); +export const darkColors = github2ThemeColor(darkGithubColors); export default defineTheme(darkColors); diff --git a/themes/light.css.ts b/themes/light.css.ts index a84f8d1..49f974a 100644 --- a/themes/light.css.ts +++ b/themes/light.css.ts @@ -1,9 +1,10 @@ -import { defineTheme, type ThemeColor } from "src"; +import { defineTheme, themeVars } from "src"; import { github2ThemeColor, type GithubColor } from "src/core/github"; export const lightGithubColors: GithubColor = { isDarkTheme: false, display: { + blue: { fgColor: "#0969da" }, brown: { fgColor: "#755f43" }, cyan: { fgColor: "#006a80" }, indigo: { fgColor: "#494edf" }, @@ -56,7 +57,10 @@ export const lightGithubColors: GithubColor = { translucent: "#1f232826", }, button: { - primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#1c8139" } }, + primary: { + fgColor: { accent: "#1a7f37", rest: "#ffffff" }, + bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#1c8139" }, + }, danger: { fgColor: { rest: "#d1242f", hover: "#ffffff" }, bgColor: { hover: "#cf222e" } }, star: { iconColor: "#eac54f" }, }, @@ -75,6 +79,6 @@ export const lightGithubColors: GithubColor = { }, }; -export const lightColors: ThemeColor = github2ThemeColor(lightGithubColors); +export const lightColors = github2ThemeColor(lightGithubColors); export default defineTheme(lightColors); diff --git a/themes/pink-dark.css.ts b/themes/pink-dark.css.ts new file mode 100644 index 0000000..09f064c --- /dev/null +++ b/themes/pink-dark.css.ts @@ -0,0 +1,22 @@ +import { defineTheme } from "src"; +import { display2GithubColor, type DisplayColor } from "src/core/display"; +import { github2ThemeColor } from "src/core/github"; +import { darkGithubColors } from "themes/dark"; + +export const pinkDarkDisplayColors: DisplayColor = { + num0: "#2d1524", + num1: "#451c35", + num2: "#65244a", + num3: "#842a5d", + num4: "#ac2f74", + num5: "#d34591", + num6: "#e57bb2", + num7: "#ec8dbd", + num8: "#f4a9cd", + num9: "#f9bed9", +}; + +export const pinkDarkGithubColors = display2GithubColor(pinkDarkDisplayColors, darkGithubColors); +export const pinkDarkColors = github2ThemeColor(pinkDarkGithubColors); + +export default defineTheme(pinkDarkColors); diff --git a/themes/pink-light.css.ts b/themes/pink-light.css.ts new file mode 100644 index 0000000..2787873 --- /dev/null +++ b/themes/pink-light.css.ts @@ -0,0 +1,22 @@ +import { defineTheme } from "src"; +import { display2GithubColor, type DisplayColor } from "src/core/display"; +import { github2ThemeColor } from "src/core/github"; +import { lightGithubColors } from "themes/light"; + +export const pinkLightDisplayColors: DisplayColor = { + num0: "#ffe5f1", + num1: "#fdc9e2", + num2: "#f8a5cf", + num3: "#f184bc", + num4: "#e55da5", + num5: "#ce2c85", + num6: "#b12f79", + num7: "#8e2e66", + num8: "#6e2b53", + num9: "#4d233d", +}; + +export const pinkLightGithubColors = display2GithubColor(pinkLightDisplayColors, lightGithubColors); +export const pinkLightColors = github2ThemeColor(pinkLightGithubColors); + +export default defineTheme(pinkLightColors); diff --git a/themes/pink-soft-dark.css.ts b/themes/pink-soft-dark.css.ts new file mode 100644 index 0000000..7a8f149 --- /dev/null +++ b/themes/pink-soft-dark.css.ts @@ -0,0 +1,10 @@ +import { defineTheme } from "src"; +import { display2GithubColor } from "src/core/display"; +import { github2ThemeColor } from "src/core/github"; +import { softDarkGithubColors } from "themes/soft-dark"; +import { pinkDarkDisplayColors } from "./pink-dark.css"; + +export const pinkSoftDarkGithubColors = display2GithubColor(pinkDarkDisplayColors, softDarkGithubColors, true); +export const pinkSoftDarkColors = github2ThemeColor(pinkSoftDarkGithubColors); + +export default defineTheme(pinkSoftDarkColors); diff --git a/themes/soft-dark.css.ts b/themes/soft-dark.css.ts index a5f3418..b184ddf 100644 --- a/themes/soft-dark.css.ts +++ b/themes/soft-dark.css.ts @@ -1,4 +1,4 @@ -import { defineTheme, type Chroma, type ThemeColor } from "src"; +import { defineTheme, themeVars, type Chroma } from "src"; import { github2ThemeColor, type GithubColor } from "src/core/github"; import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; import { darkGithubColors } from "themes/dark"; @@ -51,7 +51,10 @@ export const softDarkGithubColors: GithubColor = { translucent: "#cdd9e526", }, button: { - primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#3b8640" } }, + primary: { + fgColor: { accent: "#57ab5a", rest: "#ffffff" }, + bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#3b8640" }, + }, danger: { fgColor: { rest: "#ea5c53", hover: "#ffffff" }, bgColor: { hover: "#ad2e2c" } }, star: { iconColor: "#daaa3f" }, }, @@ -100,7 +103,7 @@ export const softDarkPrettylights: prettylightsColor = { }, }; -export const softDarkColors: ThemeColor = github2ThemeColor(softDarkGithubColors); +export const softDarkColors = github2ThemeColor(softDarkGithubColors); export const softDarkChroma: Chroma = prettylights2Chroma(softDarkPrettylights); export default defineTheme(softDarkColors, softDarkChroma); diff --git a/themes/tritanopia-dark.css.ts b/themes/tritanopia-dark.css.ts index 4baf1b7..0d07d7a 100644 --- a/themes/tritanopia-dark.css.ts +++ b/themes/tritanopia-dark.css.ts @@ -1,4 +1,4 @@ -import { defineTheme, type Chroma, type ThemeColor } from "src"; +import { defineTheme, type Chroma } from "src"; import { darkPrettylights } from "src/core/chroma"; import { github2ThemeColor, type GithubColor } from "src/core/github"; import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; @@ -39,7 +39,7 @@ export const tritanopiaDarkPrettylights: prettylightsColor = { }, }; -export const tritanopiaDarkColors: ThemeColor = github2ThemeColor(tritanopiaDarkGithubColors); +export const tritanopiaDarkColors = github2ThemeColor(tritanopiaDarkGithubColors); export const tritanopiaDarkChroma: Chroma = prettylights2Chroma(tritanopiaDarkPrettylights); export default defineTheme(tritanopiaDarkColors, tritanopiaDarkChroma); diff --git a/themes/tritanopia-light.css.ts b/themes/tritanopia-light.css.ts index 27c3686..46b491a 100644 --- a/themes/tritanopia-light.css.ts +++ b/themes/tritanopia-light.css.ts @@ -1,4 +1,4 @@ -import { defineTheme, type Chroma, type ThemeColor } from "src"; +import { defineTheme, type Chroma } from "src"; import { lightPrettylights } from "src/core/chroma"; import { github2ThemeColor, type GithubColor } from "src/core/github"; import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; @@ -39,7 +39,7 @@ export const tritanopiaLightPrettylights: prettylightsColor = { }, }; -export const tritanopiaLightColors: ThemeColor = github2ThemeColor(tritanopiaLightGithubColors); +export const tritanopiaLightColors = github2ThemeColor(tritanopiaLightGithubColors); export const tritanopiaLightChroma: Chroma = prettylights2Chroma(tritanopiaLightPrettylights); export default defineTheme(tritanopiaLightColors, tritanopiaLightChroma);