github 主题

src/core/color.ts

@@ -4,7 +4,7 @@ import type { Ansi, Console, Diff, Github, Message, Named, Other, Primary, Secon
 import { themeVars } from "src/types/vars";
 import type { Theme } from "./theme";
 
-interface ColorTheme {
+type ThemeColor = {
   /** 用于标识当前是否为暗色主题: `true` 暗色 `false` 亮色 */
   isDarkTheme: boolean;
   /** 主色调(强调色) */
@@ -53,7 +53,7 @@ interface ColorTheme {
   other: Other;
   /** 仅适用于本主题的全局变量, 取自 Github */
   github: Github;
-}
+};
 
 /** 定义颜色, 用于生成颜色主题
  * @example
@@ -80,7 +80,7 @@ interface ColorTheme {
  *   other,
  * })
  */
-export function defineTheme(theme: ColorTheme): Theme {
+export function defineTheme(theme: ThemeColor): Theme {
   const lighten = theme.isDarkTheme ? -1 : 1;
 
   const primary: Primary = {

src/core/github.ts

@@ -0,0 +1,258 @@
+import type { Console, Diff, Other } from "src";
+import { themeVars } from "src/types/vars";
+import { defineTheme } from "./color";
+import type { Theme } from "./theme";
+
+export type GithubColor = {
+  isDarkTheme: boolean;
+  display: {
+    brown: { fgColor: string };
+    cyan: { fgColor: string };
+    indigo: { fgColor: string };
+    lemon: { fgColor: string };
+    olive: { fgColor: string };
+    teal: { fgColor: string };
+  };
+  diffBlob: {
+    addtionNum: { bgColor: string };
+    addtionWord: { bgColor: string };
+    deletionNum: { bgColor: string };
+    deletionWord: { bgColor: string };
+    hunkNum: { bgColor: { rest: string } };
+  };
+  fgColor: {
+    accent: string;
+    attention: string;
+    danger: string;
+    default: string;
+    disabled: string;
+    done: string;
+    neutral: string;
+    severe: string;
+    sponsors: string;
+    success: string;
+    black: string;
+    white: string;
+    muted: string;
+  };
+  bgColor: {
+    accent: {
+      emphasis: string;
+      muted: string;
+    };
+    attention: {
+      muted: string;
+    };
+    success: {
+      muted: string;
+    };
+    danger: {
+      muted: string;
+    };
+    default: string;
+    inset: string;
+    muted: string;
+    neutral: {
+      muted: string;
+    };
+  };
+  borderColor: {
+    default: string;
+    muted: string;
+  };
+  control: {
+    bgColor: {
+      active: string;
+      hover: string;
+      rest: string;
+    };
+    transparent: {
+      bgColor: {
+        active: string;
+        hover: string;
+        selected: string;
+      };
+    };
+  };
+  shadow: {
+    floating: string;
+  };
+}
+
+export function defineGithubTheme(github: GithubColor): Theme {
+  const console: Console = {
+    fg: {
+      self: github.fgColor.default,
+      subtle: github.fgColor.muted,
+    },
+    bg: github.bgColor.inset,
+    border: github.borderColor.muted,
+    activeBg: github.control.bgColor.active,
+    hoverBg: github.control.transparent.bgColor.hover,
+    menu: {
+      bg: github.bgColor.inset,
+      border: github.borderColor.muted,
+    },
+  };
+
+  const diff: Diff = {
+    added: {
+      linenum: {
+        bg: github.diffBlob.addtionNum.bgColor,
+      },
+      row: {
+        bg: github.bgColor.success.muted,
+        border: github.bgColor.success.muted,
+      },
+      word: {
+        bg: github.diffBlob.addtionWord.bgColor,
+      },
+    },
+    removed: {
+      linenum: {
+        bg: github.diffBlob.deletionNum.bgColor,
+      },
+      row: {
+        bg: github.bgColor.danger.muted,
+        border: github.bgColor.danger.muted,
+      },
+      word: {
+        bg: github.diffBlob.deletionWord.bgColor,
+      },
+    },
+    moved: {
+      row: {
+        bg: github.bgColor.attention.muted,
+        border: github.bgColor.attention.muted,
+      },
+    },
+    inactive: github.bgColor.muted,
+  };
+
+  const other: Other = {
+    body: github.bgColor.default,
+    box: {
+      header: github.bgColor.muted,
+      body: {
+        self: themeVars.color.body,
+        highlight: github.bgColor.accent.muted,
+      },
+    },
+    text: {
+      self: github.fgColor.default,
+      light: {
+        self: github.fgColor.default,
+        num1: github.fgColor.muted,
+        num2: github.fgColor.muted,
+        num3: github.fgColor.muted,
+      },
+      dark: github.fgColor.default,
+    },
+    footer: github.bgColor.inset,
+    timeline: github.borderColor.muted,
+    input: {
+      text: themeVars.color.text.self,
+      background: themeVars.color.body,
+      toggleBackgound: themeVars.color.body,
+      border: {
+        self: themeVars.color.light.border,
+        hover: themeVars.color.light.border,
+      },
+    },
+    light: {
+      self: themeVars.color.body,
+      border: github.borderColor.default,
+    },
+    hover: {
+      self: github.control.bgColor.hover,
+      opaque: themeVars.color.box.header,
+    },
+    active: github.control.transparent.bgColor.selected,
+    menu: github.bgColor.inset,
+    card: themeVars.color.body,
+    markup: {
+      tableRow: github.bgColor.muted,
+      code: {
+        block: github.bgColor.muted,
+        inline: github.bgColor.neutral.muted,
+      },
+    },
+    button: github.control.bgColor.rest,
+    codeBg: "unset",
+    shadow: {
+      self: github.shadow.floating,
+      opaque: themeVars.color.shadow.self,
+    },
+    secondaryBg: "unset",
+    expandButton: github.diffBlob.hunkNum.bgColor.rest,
+    placeholderText: themeVars.color.text.light.num3,
+    editorLineHighlight: themeVars.color.primary.light.num5,
+    projectColumnBg: github.bgColor.inset,
+    caret: themeVars.color.text.dark,
+    reaction: {
+      bg: "initial",
+      hoverBg: github.bgColor.accent.muted,
+      activeBg: github.bgColor.accent.muted,
+    },
+    tooltip: {
+      text: github.fgColor.default,
+      bg: github.bgColor.default,
+    },
+    nav: {
+      bg: github.bgColor.inset,
+      hoverBg: github.control.transparent.bgColor.hover,
+      text: themeVars.color.text.self,
+    },
+    secondaryNavBg: themeVars.color.nav.bg,
+    label: {
+      text: themeVars.color.text.self,
+      bg: github.bgColor.neutral.muted,
+      hoverBg: github.control.transparent.bgColor.active,
+      activeBg: themeVars.color.label.hoverBg,
+    },
+    accent: themeVars.color.primary.light.num1,
+    smallAccent: themeVars.color.primary.light.num5,
+    highlight: {
+      fg: github.fgColor.attention,
+      bg: github.bgColor.attention.muted,
+    },
+    overlayBackdrop: themeVars.color.body,
+  };
+  return defineTheme({
+    isDarkTheme: github.isDarkTheme,
+    primary: github.fgColor.accent,
+    primaryContrast: github.fgColor.default,
+    secondary: github.borderColor.default,
+    red: github.fgColor.danger,
+    orange: github.fgColor.severe,
+    yellow: github.fgColor.attention,
+    olive: github.display.olive.fgColor,
+    green: github.fgColor.success,
+    cyan: github.display.cyan.fgColor,
+    teal: github.display.teal.fgColor,
+    blue: github.fgColor.accent,
+    violet: github.display.indigo.fgColor,
+    purple: github.fgColor.done,
+    pink: github.fgColor.sponsors,
+    brown: github.display.brown.fgColor,
+    black: github.fgColor.black,
+    grey: github.fgColor.neutral,
+    gold: github.display.lemon.fgColor,
+    white: github.fgColor.white,
+    console,
+    diff,
+    other,
+    github: {
+      fgColor: {
+        accent: github.fgColor.accent,
+        default: github.fgColor.default,
+        muted: github.fgColor.muted,
+      },
+      bgColor: {
+        accent: {
+          emphasis: github.bgColor.accent.emphasis,
+        },
+      },
+    },
+  });
+}

src/core/theme.ts

@@ -16,6 +16,12 @@ function stringToBoolean(str: string, name: string): boolean {
 export function createTheme(theme: Theme): void {
   createGlobalTheme(":root", themeVars, theme);
   createGlobalTheme(":root", otherThemeVars, {
+    git: "#f05133",
+    light: {
+      mimicEnabled: theme.isDarkTheme
+        ? "rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)))"
+        : "rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)))",
+    },
     border: {
       radius: "6px",
     },

src/types/color/diff.ts

@@ -4,20 +4,27 @@ const row = {
 };
 
 const line = {
+  /** 行号 */
   linenum: {
     bg: null,
   },
+  /** 代码行 */
   row: row,
+  /** 代码 */
   word: {
     bg: null,
   },
 };
 
 export const diff = {
+  /** 添加 */
   added: line,
+  /** 移动 */
   moved: {
     row: row,
   },
+  /** 删除 */
   removed: line,
+  /** 对比空白部分背景色 */
   inactive: null,
 };

src/types/color/github.ts

@@ -2,7 +2,7 @@ export const github = {
   /** 用于 color 属性的颜色 */
   fgColor: {
     /** 强调色
-     * @actions 右侧日志标题颜色
+     * @actions `actionViewRight` 右侧日志标题颜色
      */
     accent: null,
     /** 默认的文本颜色
@@ -19,7 +19,7 @@ export const github = {
     accent: {
       /** 强调色
        * @diff 折叠/展开按钮的悬停颜色
-       * @actions 左侧子作业激活伪元素颜色
+       * @actions `actionViewLeft` 左侧子作业激活伪元素颜色
        */
       emphasis: null,
     },

src/types/color/index.ts

@@ -4,4 +4,4 @@ export { github } from "./github";
 export { primary, secondary } from "./main";
 export { message } from "./message";
 export { named } from "./named";
-export { other } from "./other";
+export { other, otherAuto } from "./other";

src/types/color/other.ts

@@ -1,6 +1,13 @@
-export const other = {
+export const otherAuto= {
   /** 未知 */
   git: null,
+  light: {
+    /** 不知道什么用, gitea css 中没有使用这个属性的 */
+    mimicEnabled: "color-light-mimic-enabled",
+  },
+}
+
+export const other = {
   /** 主要背景色 */
   body: null,
   /** 页面底部状态栏背景色 */
@@ -50,8 +57,6 @@ export const other = {
   light: {
     /** 多行下交替行的强调色, 例提交历史 */
     self: null,
-    /** 不知道什么用, gitea css 中没有使用这个属性的 */
-    mimicEnabled: "color-light-mimic-enabled",
     /** 基础按钮/标签的边框色 */
     border: null,
   },

src/types/vars.ts

@@ -30,6 +30,7 @@ const otherVars = {
   border: {
     radius: null,
   },
+  ...color.otherAuto,
 };
 
 export const themeVars = createGlobalThemeContract(vars, varMapper);

themes/dark.css.tsx

@@ -1,9 +1,7 @@
-import type { Console, Diff, Other } from "src";
+import { defineGithubTheme, type GithubColor } from "src/core/github";
-import { defineTheme, themeVars } from "src";
 
-const isDarkTheme = true;
+const github: GithubColor = {
-
+  isDarkTheme: true,
-const github = {
   display: {
     brown: { fgColor: "#b69a6d" },
     cyan: { fgColor: "#07ace4" },
@@ -53,7 +51,7 @@ const github = {
     muted: "#151b23",
     neutral: {
       muted: "#656c7633",
-    }
+    },
   },
   borderColor: {
     default: "#3d444d",
@@ -74,185 +72,8 @@ const github = {
     },
   },
   shadow: {
-    floating: "#01040966"
+    floating: "#01040966",
-  }
-};
-
-const console: Console = {
-  fg: {
-    self: github.fgColor.default,
-    subtle: github.fgColor.muted,
-  },
-  bg: github.bgColor.inset,
-  border: github.borderColor.muted,
-  activeBg: github.control.bgColor.active,
-  hoverBg: github.control.transparent.bgColor.hover,
-  menu: {
-    bg: github.bgColor.inset,
-    border: github.borderColor.muted,
   },
 };
 
-const diff: Diff = {
+export default defineGithubTheme(github);
-  added: {
-    linenum: {
-      bg: github.diffBlob.addtionNum.bgColor,
-    },
-    row: {
-      bg: github.bgColor.success.muted,
-      border: github.bgColor.success.muted,
-    },
-    word: {
-      bg: github.diffBlob.addtionWord.bgColor,
-    },
-  },
-  removed: {
-    linenum: {
-      bg: github.diffBlob.deletionNum.bgColor,
-    },
-    row: {
-      bg: github.bgColor.danger.muted,
-      border: github.bgColor.danger.muted,
-    },
-    word: {
-      bg: github.diffBlob.deletionWord.bgColor,
-    },
-  },
-  moved: {
-    row: {
-      bg: github.bgColor.attention.muted,
-      border: github.bgColor.attention.muted,
-    },
-  },
-  inactive: github.bgColor.muted,
-};
-
-const other: Other = {
-  git: "#f05133",
-  body: github.bgColor.default,
-  box: {
-    header: github.bgColor.muted,
-    body: {
-      self: themeVars.color.body,
-      highlight: github.bgColor.accent.muted,
-    },
-  },
-  text: {
-    self: github.fgColor.default,
-    light: {
-      self: github.fgColor.default,
-      num1: github.fgColor.muted,
-      num2: github.fgColor.muted,
-      num3: github.fgColor.muted,
-    },
-    dark: github.fgColor.default,
-  },
-  footer: github.bgColor.inset,
-  timeline: github.borderColor.muted,
-  input: {
-    text: themeVars.color.text.self,
-    background: themeVars.color.body,
-    toggleBackgound: themeVars.color.body,
-    border: {
-      self: themeVars.color.light.border,
-      hover: themeVars.color.light.border,
-    },
-  },
-  light: {
-    self: themeVars.color.body,
-    mimicEnabled: "rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)))",
-    border: github.borderColor.default,
-  },
-  hover: {
-    self: github.control.bgColor.hover,
-    opaque: themeVars.color.box.header,
-  },
-  active: github.control.transparent.bgColor.selected,
-  menu: github.bgColor.inset,
-  card: themeVars.color.body,
-  markup: {
-    tableRow: github.bgColor.muted,
-    code: {
-      block: github.bgColor.muted,
-      inline: github.bgColor.neutral.muted,
-    },
-  },
-  button: github.control.bgColor.rest,
-  codeBg: "unset",
-  shadow: {
-    self: github.shadow.floating,
-    opaque: themeVars.color.shadow.self,
-  },
-  secondaryBg: "unset",
-  expandButton: github.diffBlob.hunkNum.bgColor.rest,
-  placeholderText: themeVars.color.text.light.num3,
-  editorLineHighlight: themeVars.color.primary.light.num5,
-  projectColumnBg: github.bgColor.inset,
-  caret: themeVars.color.text.dark,
-  reaction: {
-    bg: "initial",
-    hoverBg: github.bgColor.accent.muted,
-    activeBg: github.bgColor.accent.muted,
-  },
-  tooltip: {
-    text: github.fgColor.default,
-    bg: github.bgColor.default,
-  },
-  nav: {
-    bg: github.bgColor.inset,
-    hoverBg: github.control.transparent.bgColor.hover,
-    text: themeVars.color.text.self,
-  },
-  secondaryNavBg: themeVars.color.nav.bg,
-  label: {
-    text: themeVars.color.text.self,
-    bg: github.bgColor.neutral.muted,
-    hoverBg: github.control.transparent.bgColor.active,
-    activeBg: themeVars.color.label.hoverBg,
-  },
-  accent: themeVars.color.primary.light.num1,
-  smallAccent: themeVars.color.primary.light.num5,
-  highlight: {
-    fg: github.fgColor.attention,
-    bg: github.bgColor.attention.muted,
-  },
-  overlayBackdrop: themeVars.color.body,
-};
-
-export default defineTheme({
-  isDarkTheme,
-  primary: github.fgColor.accent,
-  primaryContrast: github.fgColor.default,
-  secondary: github.borderColor.default,
-  red: github.fgColor.danger,
-  orange: github.fgColor.severe,
-  yellow: github.fgColor.attention,
-  olive: github.display.olive.fgColor,
-  green: github.fgColor.success,
-  cyan: github.display.cyan.fgColor,
-  teal: github.display.teal.fgColor,
-  blue: github.fgColor.accent,
-  violet: github.display.indigo.fgColor,
-  purple: github.fgColor.done,
-  pink: github.fgColor.sponsors,
-  brown: github.display.brown.fgColor,
-  black: github.fgColor.black,
-  grey: github.fgColor.neutral,
-  gold: github.display.lemon.fgColor,
-  white: github.fgColor.white,
-  console,
-  diff,
-  other,
-  github: {
-    fgColor: {
-      accent: github.fgColor.accent,
-      default: github.fgColor.default,
-      muted: github.fgColor.muted,
-    },
-    bgColor: {
-      accent: {
-        emphasis: github.bgColor.accent.emphasis,
-      },
-    },
-  },
-});