支持柔和的暗色主题

.github/release.md

@@ -2,6 +2,7 @@
 
 - 支持自动颜色主题 (跟随系统)
 - 支持亮色主题
+- 支持柔和的暗色主题 (dark-dimmed)
 
 ## 🌈 Style
 

.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 }}

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 文档

TODO.md

@@ -4,7 +4,6 @@
 - issue/PR 列表样式 github 布局
 - styles/themes 库组件导出整理
 - defineTheme 颜色生成代码重构
-- 自动颜色主题生成
 
 ### 其他
 

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
+  );
 }

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" },

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" },

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",
+    },
+  })
+);