更换themePlugin触发钩子

.vscode/extensions.json

@@ -6,4 +6,4 @@
     "mikestead.dotenv",
     "styled-components.vscode-styled-components"
   ]
-}
+}

scripts/version.cjs

@@ -1,8 +1,8 @@
-const fs = require('fs');
+const fs = require("fs");
-const path = require('path');
+const path = require("path");
 
-const pkgPath = path.join(__dirname, '..', 'package.json');
+const pkgPath = path.join(__dirname, "..", "package.json");
 const pkg = JSON.parse(fs.readFileSync(pkgPath));
 
 const version = pkg.version;
-console.log(version);
+console.log(version);

src/core/color.ts

@@ -1,52 +1,81 @@
 import { rgba } from "polished";
 import { scaleColorLight } from "src/functions";
-import type { Ansi, Based, Console, Diff, Message, Named, Primary, Secondary } from "src/types";
+import type { Ansi, Console, Diff, Message, Named, Other, Primary, Secondary } from "src/types";
 import { themeVars } from "src/types/vars";
 import type { Theme } from "./theme";
 
 interface ColorTheme {
+  /** 用于标识当前是否为暗色主题: `true` 暗色 `false` 亮色 */
   isDarkTheme: boolean;
+  /** 主色调 */
   primary: string;
+  /** 主色调的对比色, 一般用于 `color` 属性, primary 用于 `background-color` */
   primaryContrast: string;
+  /** 副色调 */
   secondary: string;
+  /** 红色 */
   red: string;
+  /** 橙色 */
   orange: string;
+  /** 黄色 */
   yellow: string;
+  /** 黄绿色/橄榄色 */
   olive: string;
+  /** 绿色 */
   green: string;
+  /** 蓝绿色/青色(偏绿) */
   teal: string;
+  /** 蓝绿色/青色(偏蓝) */
+  cyan: string;
+  /** 蓝色 */
   blue: string;
+  /** 蓝紫色/紫罗兰色 */
   violet: string;
+  /** 紫色 */
   purple: string;
+  /** 粉红色 */
   pink: string;
+  /** 棕色 */
   brown: string;
+  /** 黑色 */
   black: string;
+  /** 灰色 */
   grey: string;
+  /** 金色 */
   gold: string;
+  /** 白色 */
   white: string;
+  /** Action 日志 */
   console: Console;
+  /** 提交代码对比 */
   diff: Diff;
-  based: Based;
+  /** 其他 */
+  other: Other;
 }
 
 /** 定义颜色, 用于生成颜色主题
  * @example
- * 文件名: `color-dark.css.ts`
+ * 文件名: "dark.css.tsx"
- * import type { Primary } from "src/types";
+ * import type { Console, Diff, Other } from "src/types";
  * import { defineTheme, themeVars } from "src";
  *
- * const primary: Primary = {
+ * const console: Console = {
- *   self: "#ffffff",
+ *   fg: {
- *   contrast: themeVars.color.white,
+ *     self: "#f0f6fc", // self 表示本身等于 --color-console-fg: #f0f6fc, 所有键名为 self 的都将被忽略
+ *     subtle: themeVars.color.body, // 引用别的CSS变量等于 --color-console-fg-subtle: var(--color-body)
+ *     num1: "rgb(125, 133, 144)", // 由于纯数字无法在 TS 中使用点调用, 采用 num 前缀等于 --color-console-fg-1: rgb(125, 133, 144)
+ *   },
  *   ...
  * }
- *
+ * ...
+ * // 会经过 lightningcss 打包处理生成最终的 CSS
  * export default defineTheme({
- *   isDarkTheme: "true",
+ *   isDarkTheme: true,
- *   color: {
+ *   primary: "#0969da",
- *     primary,
+ *   ...
- *     ...
+ *   console,
- *   }
+ *   diff,
+ *   other,
  * })
  */
 export function defineTheme(theme: ColorTheme): Theme {
@@ -56,22 +85,22 @@ export function defineTheme(theme: ColorTheme): Theme {
     self: theme.primary,
     contrast: theme.primaryContrast,
     dark: {
-      num1: scaleColorLight(theme.primary, -3 * lighten),
+      num1: scaleColorLight(theme.primary, -12 * lighten),
-      num2: scaleColorLight(theme.primary, -6 * lighten),
+      num2: scaleColorLight(theme.primary, -24 * lighten),
-      num3: scaleColorLight(theme.primary, -9 * lighten),
+      num3: scaleColorLight(theme.primary, -36 * lighten),
-      num4: scaleColorLight(theme.primary, -12 * lighten),
+      num4: scaleColorLight(theme.primary, -48 * lighten),
-      num5: scaleColorLight(theme.primary, -15 * lighten),
+      num5: scaleColorLight(theme.primary, -60 * lighten),
-      num6: scaleColorLight(theme.primary, -18 * lighten),
+      num6: scaleColorLight(theme.primary, -72 * lighten),
-      num7: scaleColorLight(theme.primary, -21 * lighten),
+      num7: scaleColorLight(theme.primary, -84 * lighten),
     },
     light: {
-      num1: scaleColorLight(theme.primary, 3 * lighten),
+      num1: scaleColorLight(theme.primary, 12 * lighten),
-      num2: scaleColorLight(theme.primary, 6 * lighten),
+      num2: scaleColorLight(theme.primary, 24 * lighten),
-      num3: scaleColorLight(theme.primary, 9 * lighten),
+      num3: scaleColorLight(theme.primary, 36 * lighten),
-      num4: scaleColorLight(theme.primary, 12 * lighten),
+      num4: scaleColorLight(theme.primary, 48 * lighten),
-      num5: scaleColorLight(theme.primary, 15 * lighten),
+      num5: scaleColorLight(theme.primary, 60 * lighten),
-      num6: scaleColorLight(theme.primary, 18 * lighten),
+      num6: scaleColorLight(theme.primary, 72 * lighten),
-      num7: scaleColorLight(theme.primary, 21 * lighten),
+      num7: scaleColorLight(theme.primary, 84 * lighten),
     },
     alpha: {
       num10: rgba(theme.primary, 0.1),
@@ -91,25 +120,25 @@ export function defineTheme(theme: ColorTheme): Theme {
   const secondary: Secondary = {
     self: theme.secondary,
     dark: {
-      num1: scaleColorLight(theme.secondary, -3 * lighten),
+      num1: scaleColorLight(theme.secondary, -6 * lighten),
-      num2: scaleColorLight(theme.secondary, -6 * lighten),
+      num2: scaleColorLight(theme.secondary, -12 * lighten),
-      num3: scaleColorLight(theme.secondary, -9 * lighten),
+      num3: scaleColorLight(theme.secondary, -18 * lighten),
-      num4: scaleColorLight(theme.secondary, -12 * lighten),
+      num4: scaleColorLight(theme.secondary, -24 * lighten),
-      num5: scaleColorLight(theme.secondary, -15 * lighten),
+      num5: scaleColorLight(theme.secondary, -30 * lighten),
-      num6: scaleColorLight(theme.secondary, -18 * lighten),
+      num6: scaleColorLight(theme.secondary, -36 * lighten),
-      num7: scaleColorLight(theme.secondary, -21 * lighten),
+      num7: scaleColorLight(theme.secondary, -42 * lighten),
-      num8: scaleColorLight(theme.secondary, -24 * lighten),
+      num8: scaleColorLight(theme.secondary, -48 * lighten),
-      num9: scaleColorLight(theme.secondary, -27 * lighten),
+      num9: scaleColorLight(theme.secondary, -54 * lighten),
-      num10: scaleColorLight(theme.secondary, -30 * lighten),
+      num10: scaleColorLight(theme.secondary, -60 * lighten),
-      num11: scaleColorLight(theme.secondary, -33 * lighten),
+      num11: scaleColorLight(theme.secondary, -66 * lighten),
-      num12: scaleColorLight(theme.secondary, -36 * lighten),
+      num12: scaleColorLight(theme.secondary, -72 * lighten),
-      num13: scaleColorLight(theme.secondary, -39 * lighten),
+      num13: scaleColorLight(theme.secondary, -80 * lighten),
     },
     light: {
-      num1: scaleColorLight(theme.secondary, 3 * lighten),
+      num1: scaleColorLight(theme.secondary, 18 * lighten),
-      num2: scaleColorLight(theme.secondary, 6 * lighten),
+      num2: scaleColorLight(theme.secondary, 36 * lighten),
-      num3: scaleColorLight(theme.secondary, 9 * lighten),
+      num3: scaleColorLight(theme.secondary, 54 * lighten),
-      num4: scaleColorLight(theme.secondary, 12 * lighten),
+      num4: scaleColorLight(theme.secondary, 72 * lighten),
     },
     alpha: {
       num10: rgba(theme.secondary, 0.1),
@@ -267,22 +296,22 @@ export function defineTheme(theme: ColorTheme): Theme {
         active: rgba(theme.red, 0.5),
         hover: rgba(theme.red, 0.3),
       },
-      border: scaleColorLight(theme.red, 30 * lighten),
+      border: rgba(theme.red, 0.4),
       text: theme.red,
     },
     success: {
       bg: rgba(theme.green, 0.1),
-      border: scaleColorLight(theme.green, 30 * lighten),
+      border: rgba(theme.green, 0.4),
       text: theme.green,
     },
     warning: {
       bg: rgba(theme.yellow, 0.1),
-      border: scaleColorLight(theme.yellow, 30 * lighten),
+      border: rgba(theme.yellow, 0.4),
       text: theme.yellow,
     },
     info: {
       bg: rgba(theme.blue, 0.1),
-      border: scaleColorLight(theme.blue, 30 * lighten),
+      border: rgba(theme.blue, 0.4),
       text: theme.blue,
     },
   };
@@ -294,7 +323,7 @@ export function defineTheme(theme: ColorTheme): Theme {
     yellow: themeVars.color.yellow.self,
     blue: themeVars.color.blue.self,
     magenta: themeVars.color.pink.self,
-    cyan: themeVars.color.teal.self,
+    cyan: theme.cyan,
     white: themeVars.color.console.fg.subtle,
     bright: {
       black: themeVars.color.black.light,
@@ -303,7 +332,7 @@ export function defineTheme(theme: ColorTheme): Theme {
       yellow: themeVars.color.yellow.light,
       blue: themeVars.color.blue.light,
       magenta: themeVars.color.pink.light,
-      cyan: themeVars.color.teal.light,
+      cyan: theme.isDarkTheme ? scaleColorLight(theme.cyan, 10) : scaleColorLight(theme.cyan, 25),
       white: themeVars.color.console.fg.self,
     },
   };
@@ -318,7 +347,7 @@ export function defineTheme(theme: ColorTheme): Theme {
       console: theme.console,
       diff: theme.diff,
       ...message,
-      ...theme.based,
+      ...theme.other,
     },
   };
 }

src/core/vite.ts

@@ -4,7 +4,7 @@ import fs from "node:fs";
 import path from "node:path";
 import type { Plugin } from "vite";
 
-const suffix = ".css.tsx"
+const suffix = ".css.tsx";
 
 /**
  * 生成主题输入
@@ -17,16 +17,15 @@ const suffix = ".css.tsx"
 export function themeInput(
   outDir: string,
   themeDir: string,
-  devTheme: string,
   mode: string
 ): { [key: string]: string } {
   const hash = crypto.randomBytes(6).toString("hex");
   const tmpDir = `${outDir}/tmp-${hash}`; // 输出目录下的临时目录
-
   fs.mkdirSync(tmpDir, { recursive: true });
 
   const input: { [key: string]: string } = {};
   const themeEntries = fs.readdirSync(themeDir, { withFileTypes: true });
+  const devTheme = process.env.DEV_THEME || "dark"; // 开发模式仅打包单个颜色主题
 
   for (const entry of themeEntries) {
     // 目录下所有的 css.ts 文件都作为主题入口
@@ -94,7 +93,7 @@ export function themePlugin(): Plugin {
         }
       }
     },
-    closeBundle() {
+    writeBundle() {
       const server = process.env.SSH_SERVER;
       const user = process.env.SSH_USER || "root";
       const path = process.env.GITEA_THEME_PATH;
@@ -103,7 +102,7 @@ export function themePlugin(): Plugin {
         console.log("[themePlugin] exec:", cmd);
         try {
           execSync(cmd, { stdio: "inherit" });
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
         } catch (_) {
           // continue regardless of error
         }

src/index.ts

@@ -1,4 +1,4 @@
 export { css } from "@linaria/core";
 export { defineTheme } from "./core/color";
-export type { Based, Console, Diff } from "./types";
+export type { Console, Diff, Other } from "./types";
 export { themeVars } from "./types/vars";

src/types/color/index.ts

@@ -1,6 +1,6 @@
-export { based } from "./based";
 export { ansi, console } from "./console";
 export { diff } from "./diff";
 export { primary, secondary } from "./main";
 export { message } from "./message";
 export { named } from "./named";
+export { other } from "./other";

src/types/color/other.ts

@@ -1,4 +1,4 @@
-export const based = {
+export const other = {
   /** 未知 */
   git: null,
   /** 主要背景色 */

src/types/index.ts

@@ -8,4 +8,4 @@ export type Message = MapLeafNodes<typeof color.message, string>;
 export type Ansi = MapLeafNodes<typeof color.ansi, string>;
 export type Console = MapLeafNodes<typeof color.console, string>;
 export type Diff = MapLeafNodes<typeof color.diff, string>;
-export type Based = MapLeafNodes<typeof color.based, string>;
+export type Other = MapLeafNodes<typeof color.other, string>;

src/types/vars.ts

@@ -11,11 +11,10 @@ export function varMapper(value: string | null, path: string[]) {
 }
 
 const vars = {
-  /** 用于标识当前是否为暗色主题: `"true"` 暗色 `"false"` 亮色 */
   isDarkTheme: "is-dark-theme",
   color: {
+    ...color.other,
     ...color.message,
-    ...color.based,
     ...color.named,
     primary: color.primary,
     secondary: color.secondary,

themes/dark.css.tsx

@@ -1,12 +1,40 @@
-import type { Based, Console, Diff } from "src";
+import type { Console, Diff, Other } from "src";
 import { defineTheme, themeVars } from "src";
 
+const github = {
+  display: {
+    brown: { fgColor: "#b69a6d" },
+    cyan: { fgColor: "#07ace4" },
+    indigo: { fgColor: "#9899ec" },
+    lemon: { fgColor: "#ba9b12" },
+    olive: { fgColor: "#a2a626" },
+    teal: { fgColor: "#1cb0ab" },
+  },
+  fgColor: {
+    accent: "#4493f8",
+    attention: "#d29922",
+    danger: "#f85149",
+    default: "#f0f6fc",
+    disabled: "#656c7699",
+    done: "#ab7df8",
+    neutral: "#9198a1",
+    severe: "#db6d28",
+    sponsors: "#db61a2",
+    success: "#3fb950",
+    black: "#010409",
+    white: "#ffffff",
+  },
+  bgColor: {
+    black: "#010409",
+  },
+};
+
 const console: Console = {
   fg: {
     self: "#f0f6fc",
     subtle: "#9198a1",
   },
-  bg: "#010409",
+  bg: github.bgColor.black,
   border: "#2b3139",
   activeBg: "#2a313c",
   hoverBg: "#15191f",
@@ -50,7 +78,7 @@ const diff: Diff = {
   inactive: "#353846",
 };
 
-const based: Based = {
+const other: Other = {
   git: "#f05133",
   body: "#0d1117",
   box: {
@@ -70,7 +98,7 @@ const based: Based = {
       num3: "#707687",
     },
   },
-  footer: "#010409",
+  footer: github.bgColor.black,
   timeline: "#4c525e",
   input: {
     text: "#d5dbe6",
@@ -122,11 +150,11 @@ const based: Based = {
     bg: "#000000f0",
   },
   nav: {
-    bg: "#010409",
+    bg: github.bgColor.black,
     hoverBg: themeVars.color.hover.self,
     text: themeVars.color.text.self,
   },
-  secondaryNavBg: "#181c20",
+  secondaryNavBg: themeVars.color.nav.bg,
   label: {
     text: "#fff",
     bg: "#7c84974b",
@@ -144,25 +172,26 @@ const based: Based = {
 
 export default defineTheme({
   isDarkTheme: true,
-  primary: "#4493f8",
+  primary: github.fgColor.accent,
-  primaryContrast: "#fff",
+  primaryContrast: github.fgColor.default,
   secondary: "#3d444d",
-  red: "#da3737",
+  red: github.fgColor.danger,
-  orange: "#f17a2b",
+  orange: github.fgColor.severe,
-  yellow: "#f3c640",
+  yellow: github.fgColor.attention,
-  olive: "#c8df36",
+  olive: github.display.olive.fgColor,
-  green: "#39d353",
+  green: github.fgColor.success,
-  teal: "#69d4cf",
+  cyan: github.display.cyan.fgColor,
-  blue: "#4493f8",
+  teal: github.display.teal.fgColor,
-  violet: "#754ad3",
+  blue: github.fgColor.accent,
-  purple: "#8957e5",
+  violet: github.display.indigo.fgColor,
-  pink: "#e04b9f",
+  purple: github.fgColor.done,
-  brown: "#a86d45",
+  pink: github.fgColor.sponsors,
-  black: "#141516",
+  brown: github.display.brown.fgColor,
-  grey: "#505665",
+  black: github.fgColor.black,
-  gold: "#b1983b",
+  grey: github.fgColor.neutral,
-  white: "#ffffff",
+  gold: github.display.lemon.fgColor,
+  white: github.fgColor.white,
   console,
   diff,
-  based,
+  other,
 });

vite.config.ts

@@ -9,11 +9,10 @@ import * as sass from "sass-embedded";
 import { defineConfig } from "vite";
 import { themeInput, themePlugin } from "./src/core/vite";
 
-dotenv.config({quiet: true});
+dotenv.config({ quiet: true });
 
 const require = createRequire(import.meta.url);
 
-const devTheme = process.env.DEV_THEME || "dark"; // 开发模式仅打包单个颜色主题
 const outDir = "dist"; // 输出目录
 const themesDir = "themes"; // 颜色主题目录
 
@@ -54,7 +53,7 @@ export default defineConfig(({ mode }) => {
       cssCodeSplit: true,
       outDir: outDir,
       rollupOptions: {
-        input: themeInput(outDir, themesDir, devTheme, mode),
+        input: themeInput(outDir, themesDir, mode),
         output: {
           assetFileNames: "[name].[ext]",
         },