github 与 gitea 全部颜色映射

.github/release.md

@@ -2,12 +2,17 @@
 
 #### 更符合 GitHub 风格
 
-- 差异对比折叠行文本颜色同步
-- 差异对比行号位置同步
-- 差异对比按钮和折叠行高度同步
+- 代码差异对比折叠行文本颜色同步
+- 代码差异对比行号位置同步
+- 代码差异对比按钮和折叠行高度同步
 - Actions 日志页面标题颜色同步
 - Actions 日志页面设置菜单背景色同步
 - 菜单背景色同步当前最新颜色
+- Markdown 背景色同步
+- 补充 Markdown 代码块背景色
+- 弹窗阴影颜色同步
+- 仓库项目页面列背景色同步
+- Issue/PR 表情背景色同步
 
 ## 🎈 Perf
 
@@ -15,4 +20,4 @@
 
 ## 🐞 Fix
 
-- 修复差异对比分列视图下颜色丢失
+- 修复代码差异对比分列视图下颜色丢失

src/core/color.ts

@@ -7,11 +7,11 @@ import type { Theme } from "./theme";
 interface ColorTheme {
   /** 用于标识当前是否为暗色主题: `true` 暗色 `false` 亮色 */
   isDarkTheme: boolean;
-  /** 主色调 */
+  /** 主色调(强调色) */
   primary: string;
   /** 主色调的对比色, 一般用于 `color` 属性, primary 用于 `background-color` */
   primaryContrast: string;
-  /** 副色调 */
+  /** 副色调(边框色) */
   secondary: string;
   /** 红色 */
   red: string;

src/types/color/other.ts

@@ -67,52 +67,83 @@ export const other = {
   menu: null,
   /** 卡片背景色, 但是找不到元素, 可能是个人 README */
   card: null,
+  /** Markdown 颜色 */
   markup: {
+    /** 隔行背景色 */
     tableRow: "color-markup-table-row",
     code: {
+      /** 代码块背景色 */
       block: null,
+      /** 代码行背景色 */
       inline: null,
     },
   },
+  /** 普通按钮的背景色 (basic 非 primary) */
   button: null,
+  /** 代码页面背景色 */
   codeBg: "color-code-bg",
+  /** 弹窗阴影 */
   shadow: {
     self: null,
+    /** css 没有使用 */
     opaque: null,
   },
+  /** 弹窗按钮行的背景色 */
   secondaryBg: "color-secondary-bg",
+  /** 代码差异对比折叠行按钮背景色 */
   expandButton: "color-expand-button",
+  /** 不知道 */
   placeholderText: "color-placeholder-text",
+  /** 不知道, css 没有 */
   editorLineHighlight: "color-editor-line-highlight",
+  /** 仓库项目页面列的背景色 */
   projectColumnBg: "color-project-column-bg",
+  /** caret-color 属性 */
   caret: null,
+  /** Issue 表情按钮 */
   reaction: {
+    /** css 里没用 */
     bg: null,
+    /** 悬停时颜色 */
     hoverBg: "color-reaction-hover-bg",
+    /** 点击后颜色 */
     activeBg: "color-reaction-active-bg",
   },
+  /** 不知道是干啥的 */
   tooltip: {
     text: null,
     bg: null,
   },
+  /** 顶部导航栏(用户导航栏) */
   nav: {
+    /** 背景色 */
     bg: null,
+    /** 悬停时背景色 */
     hoverBg: "color-nav-hover-bg",
+    /** color 颜色 */
     text: null,
   },
+  /** 顶部二级导航栏背景色(仓库导航栏等) */
   secondaryNavBg: "color-secondary-nav-bg",
-  /** 标签 */
+  /** 普通标签 */
   label: {
     text: null,
     bg: null,
     hoverBg: "color-label-hover-bg",
+    /** css 没用 */
     activeBg: "color-label-active-bg",
   },
+  /** 不知道. 似乎和最后一次 review 相关的边框色 */
   accent: null,
+  /** 不知道. 似乎和最后一次 review 相关的背景色 */
   smallAccent: "color-small-accent",
+  /** 不知道啥玩意, 跟文件预览内容行颜色有关系 */
   highlight: {
-    bg: null,
+    /** 在行号前追加的伪元素颜色 */
     fg: null,
+    /** 背景色 */
+    bg: null,
   },
+  /** 不知道啥玩意 dimmer 的背景色 */
   overlayBackdrop: "color-overlay-backdrop",
 };

src/types/index.ts

@@ -1,9 +1,9 @@
 import type { MapLeafNodes } from "src/core/types";
 import * as color from "./color";
 
-/** 主色调 */
+/** 主色调(强调色) */
 export type Primary = MapLeafNodes<typeof color.primary, string>;
-/** 副色调 */
+/** 副色调(边框色) */
 export type Secondary = MapLeafNodes<typeof color.secondary, string>;
 /** 基础颜色 */
 export type Named = MapLeafNodes<typeof color.named, string>;

themes/dark.css.tsx

@@ -51,6 +51,9 @@ const github = {
     default: "#0d1117",
     inset: "#010409",
     muted: "#151b23",
+    neutral: {
+      muted: "#656c7633",
+    }
   },
   borderColor: {
     default: "#3d444d",
@@ -60,14 +63,19 @@ const github = {
     bgColor: {
       active: "#2a313c",
       hover: "#262c36",
+      rest: "#212830",
     },
     transparent: {
       bgColor: {
-        selected: "#656c761a",
+        active: "#656c7640",
         hover: "#656c7633",
+        selected: "#656c761a",
       },
     },
   },
+  shadow: {
+    floating: "#01040966"
+  }
 };
 
 const console: Console = {
@@ -160,62 +168,62 @@ const other: Other = {
     opaque: themeVars.color.box.header,
   },
   active: github.control.transparent.bgColor.selected,
-  menu: themeVars.color.body, // 此菜单项涉及太多, 不仅仅是下拉菜单, 默认使用 body 颜色
+  menu: github.bgColor.inset,
   card: themeVars.color.body,
   markup: {
-    tableRow: "#ffffff06",
+    tableRow: github.bgColor.muted,
     code: {
-      block: "#ffffff16",
-      inline: "#ffffff26",
+      block: github.bgColor.muted,
+      inline: github.bgColor.neutral.muted,
     },
   },
-  button: "#212830",
-  codeBg: "#0d1117",
+  button: github.control.bgColor.rest,
+  codeBg: "unset",
   shadow: {
-    self: "#00000060",
-    opaque: "#00000080",
+    self: github.shadow.floating,
+    opaque: themeVars.color.shadow.self,
   },
-  secondaryBg: "#ffffff26",
+  secondaryBg: "unset",
   expandButton: github.diffBlob.hunkNum.bgColor.rest,
-  placeholderText: "#8a8e99",
+  placeholderText: themeVars.color.text.light.num3,
   editorLineHighlight: themeVars.color.primary.light.num5,
-  projectColumnBg: themeVars.color.secondary.light.num2,
-  caret: themeVars.color.text.self,
+  projectColumnBg: github.bgColor.inset,
+  caret: themeVars.color.text.dark,
   reaction: {
-    bg: "#ffffff12",
-    hoverBg: themeVars.color.primary.light.num4,
-    activeBg: themeVars.color.primary.light.num5,
+    bg: "initial",
+    hoverBg: github.bgColor.accent.muted,
+    activeBg: github.bgColor.accent.muted,
   },
   tooltip: {
-    text: "#fff",
-    bg: "#000000f0",
+    text: github.fgColor.default,
+    bg: github.bgColor.default,
   },
   nav: {
     bg: github.bgColor.inset,
-    hoverBg: themeVars.color.hover.self,
+    hoverBg: github.control.transparent.bgColor.hover,
     text: themeVars.color.text.self,
   },
   secondaryNavBg: themeVars.color.nav.bg,
   label: {
-    text: "#fff",
-    bg: "#7c84974b",
-    hoverBg: "#7c8497a0",
-    activeBg: "#7c8497",
+    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: {
-    bg: "#87651e",
-    fg: "#352c1c",
+    fg: github.fgColor.attention,
+    bg: github.bgColor.attention.muted,
   },
-  overlayBackdrop: "#080808c0",
+  overlayBackdrop: themeVars.color.body,
 };
 
 export default defineTheme({
   isDarkTheme,
   primary: github.fgColor.accent,
   primaryContrast: github.fgColor.default,
-  secondary: "#3d444d",
+  secondary: github.borderColor.default,
   red: github.fgColor.danger,
   orange: github.fgColor.severe,
   yellow: github.fgColor.attention,