支持色盲主题

2025-10-28 07:00:32 +00:00 · 2025-08-14 19:59:08 +08:00
parent 6aef26cdc8
commit a8453a87a5
19 changed files with 573 additions and 292 deletions
--- a/themes/colorblind-dark.css.ts
+++ b/themes/colorblind-dark.css.ts
@@ -0,0 +1,73 @@
+import { defineTheme, type Chroma, type ThemeColor } from "src";
+import { github2ThemeColor, type GithubColor } from "src/core/github";
+import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
+import { darkGithubColors } from "themes/dark";
+
+export const colorblindDarkGithubColors: GithubColor = {
+  isDarkTheme: true,
+  display: darkGithubColors.display,
+  diffBlob: {
+    addtionNum: { bgColor: "#58a6ff4d" },
+    addtionWord: { bgColor: "#388bfd66" },
+    deletionNum: { bgColor: "#db6d284d" },
+    deletionWord: { bgColor: "#db6d2866" },
+    hunkNum: { bgColor: { rest: "#2f3742" } },
+  },
+  fgColor: {
+    ...darkGithubColors.fgColor,
+    danger: "#f0883e",
+    success: "#58a6ff",
+  },
+  bgColor: {
+    ...darkGithubColors.bgColor,
+    danger: { muted: "#db6d281a" },
+    success: { emphasis: "#1f6feb", muted: "#388bfd33" },
+  },
+  borderColor: {
+    ...darkGithubColors.borderColor,
+    success: { emphasis: "#1f6feb" },
+  },
+  button: {
+    primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#2a7aef" } },
+    danger: { fgColor: { rest: "#f0883e", hover: "#ffffff" }, bgColor: { hover: "#9b4215" } },
+  },
+  control: darkGithubColors.control,
+  shadow: darkGithubColors.shadow,
+  overlay: darkGithubColors.overlay,
+  underlineNav: darkGithubColors.underlineNav,
+  contribution: darkGithubColors.contribution,
+};
+export const colorblindDarkPrettylights: prettylightsColor = {
+  syntax: {
+    brackethighlighter: { angle: "#9198a1", unmatched: "#db6d28" },
+    carriage: { return: { bg: "#9b4215", text: "#f0f6fc" } },
+    comment: "#9198a1",
+    constant: "#79c0ff",
+    constantOtherReferenceLink: "#a5d6ff",
+    entity: "#d2a8ff",
+    entityTag: "#a5d6ff",
+    invalid: { illegal: { bg: "#762d0a", text: "#f0f6fc" } },
+    keyword: "#f0883e",
+    markup: {
+      bold: "#f0f6fc",
+      changed: { bg: "#5a1e02", text: "#ffdfb6" },
+      deleted: { bg: "#5a1e02", text: "#ffdfb6" },
+      heading: "#1f6feb",
+      ignored: { bg: "#1158c7", text: "#f0f6fc" },
+      inserted: { bg: "#0c2d6b", text: "#cae8ff" },
+      italic: "#f0f6fc",
+      list: "#f2cc60",
+    },
+    metaDiffRange: "#d2a8ff",
+    storageModifierImport: "#f0f6fc",
+    string: "#a5d6ff",
+    stringRegexp: "#a5d6ff",
+    sublimelinterGutterMark: "#3d444d",
+    variable: "#ffa657",
+  },
+};
+
+export const colorblindDarkColors: ThemeColor = github2ThemeColor(colorblindDarkGithubColors);
+export const colorblindDarkChroma: Chroma = prettylights2Chroma(colorblindDarkPrettylights);
+
+export default defineTheme(colorblindDarkColors);
--- a/themes/colorblind-light.css.ts
+++ b/themes/colorblind-light.css.ts
@@ -0,0 +1,73 @@
+import { defineTheme, type Chroma, type ThemeColor } from "src";
+import { github2ThemeColor, type GithubColor } from "src/core/github";
+import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
+import { lightGithubColors } from "themes/light";
+
+export const colorblindLightGithubColors: GithubColor = {
+  isDarkTheme: false,
+  display: lightGithubColors.display,
+  diffBlob: {
+    addtionNum: { bgColor: "#b6e3ff" },
+    addtionWord: { bgColor: "#b6e3ff" },
+    deletionNum: { bgColor: "#ffd8b5" },
+    deletionWord: { bgColor: "#ffd8b5" },
+    hunkNum: { bgColor: { rest: "#e6eaef" } },
+  },
+  fgColor: {
+    ...lightGithubColors.fgColor,
+    danger: "#bc4c00",
+    success: "#0969da",
+  },
+  bgColor: {
+    ...lightGithubColors.bgColor,
+    danger: { muted: "#fff1e5" },
+    success: { emphasis: "#0969da", muted: "#ddf4ff" },
+  },
+  borderColor: {
+    ...lightGithubColors.borderColor,
+    success: { emphasis: "#0969da" },
+  },
+  button: {
+    primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#0864d1" } },
+    danger: { fgColor: { rest: "#bc4c00", hover: "#ffffff" }, bgColor: { hover: "#bc4c00" } },
+  },
+  control: lightGithubColors.control,
+  shadow: lightGithubColors.shadow,
+  overlay: lightGithubColors.overlay,
+  underlineNav: lightGithubColors.underlineNav,
+  contribution: lightGithubColors.contribution,
+};
+export const colorblindLightPrettylights: prettylightsColor = {
+  syntax: {
+    brackethighlighter: { angle: "#59636e", unmatched: "#762c00" },
+    carriage: { return: { bg: "#bc4c00", text: "#f6f8fa" } },
+    comment: "#59636e",
+    constant: "#0550ae",
+    constantOtherReferenceLink: "#0a3069",
+    entity: "#6639ba",
+    entityTag: "#0550ae",
+    invalid: { illegal: { bg: "#762c00", text: "#f6f8fa" } },
+    keyword: "#bc4c00",
+    markup: {
+      bold: "#1f2328",
+      changed: { bg: "#ffd8b5", text: "#953800" },
+      deleted: { bg: "#fff1e5", text: "#762c00" },
+      heading: "#0550ae",
+      ignored: { bg: "#0550ae", text: "#d1d9e0" },
+      inserted: { bg: "#ddf4ff", text: "#0550ae" },
+      italic: "#1f2328",
+      list: "#3b2300",
+    },
+    metaDiffRange: "#8250df",
+    storageModifierImport: "#1f2328",
+    string: "#0a3069",
+    stringRegexp: "#0550ae",
+    sublimelinterGutterMark: "#818b98",
+    variable: "#953800",
+  },
+};
+
+export const colorblindLightColors: ThemeColor = github2ThemeColor(colorblindLightGithubColors);
+export const colorblindLightChroma: Chroma = prettylights2Chroma(colorblindLightPrettylights);
+
+export default defineTheme(colorblindLightColors);
--- a/themes/dark.css.ts
+++ b/themes/dark.css.ts
@@ -1,6 +1,7 @@
-import { defineGithubTheme } from "src/core/github";
+import { defineTheme, type ThemeColor } from "src";
+import { github2ThemeColor, type GithubColor } from "src/core/github";

-export default defineGithubTheme({
+export const darkGithubColors: GithubColor = {
  isDarkTheme: true,
  display: {
    brown: { fgColor: "#b69a6d" },
@@ -22,7 +23,7 @@ export default defineGithubTheme({
    attention: "#d29922",
    danger: "#f85149",
    default: "#f0f6fc",
-    disabled: "#656c7699",
+    disabled: "#656c76",
    done: "#ab7df8",
    muted: "#9198a1",
    neutral: "#9198a1",
@@ -35,20 +36,20 @@ export default defineGithubTheme({
  bgColor: {
    accent: { emphasis: "#1f6feb", muted: "#388bfd1a" },
    attention: { muted: "#bb800926" },
-    success: { emphasis: "#238636", muted: "#2ea04326" },
    danger: { muted: "#f851491a" },
-    done: { emphasis: "#8957e5" },
    default: "#0d1117",
-    inset: "#010409",
+    done: { emphasis: "#8957e5" },
    muted: "#151b23",
    neutral: { muted: "#656c7633" },
+    success: { emphasis: "#238636", muted: "#2ea04326" },
+    inset: "#010409",
  },
  borderColor: {
    accent: { emphasis: "#1f6feb" },
-    default: "#3d444d",
    attention: { emphasis: "#9e6a03" },
-    success: { emphasis: "#238636" },
+    default: "#3d444d",
    done: { emphasis: "#8957e5" },
+    success: { emphasis: "#238636" },
    muted: "#3d444db3",
    translucent: "#ffffff26",
  },
@@ -69,4 +70,8 @@ export default defineGithubTheme({
      borderColor: { num0: "#0104090d" },
    },
  },
-});
+};
+
+export const darkColors: ThemeColor = github2ThemeColor(darkGithubColors);
+
+export default defineTheme(darkColors);
--- a/themes/light.css.ts
+++ b/themes/light.css.ts
@@ -1,6 +1,7 @@
-import { defineGithubTheme } from "src/core/github";
+import { defineTheme, type ThemeColor } from "src";
+import { github2ThemeColor, type GithubColor } from "src/core/github";

-export default defineGithubTheme({
+export const lightGithubColors: GithubColor = {
  isDarkTheme: false,
  display: {
    brown: { fgColor: "#755f43" },
@@ -35,20 +36,20 @@ export default defineGithubTheme({
  bgColor: {
    accent: { emphasis: "#0969da", muted: "#ddf4ff" },
    attention: { muted: "#fff8c5" },
-    success: { emphasis: "#1f883d", muted: "#dafbe1" },
    danger: { muted: "#ffebe9" },
-    done: { emphasis: "#8250df" },
    default: "#ffffff",
-    inset: "#f6f8fa",
+    done: { emphasis: "#8250df" },
    muted: "#f6f8fa",
    neutral: { muted: "#818b981f" },
+    success: { emphasis: "#1f883d", muted: "#dafbe1" },
+    inset: "#f6f8fa",
  },
  borderColor: {
    accent: { emphasis: "#0969da" },
-    default: "#d1d9e0",
    attention: { emphasis: "#9a6700" },
-    success: { emphasis: "#1a7f37" },
+    default: "#d1d9e0",
    done: { emphasis: "#8250df" },
+    success: { emphasis: "#1a7f37" },
    muted: "#d1d9e0b3",
    translucent: "#1f232826",
  },
@@ -69,4 +70,8 @@ export default defineGithubTheme({
      borderColor: { num0: "#1f23280d" },
    },
  },
-});
+};
+
+export const lightColors: ThemeColor = github2ThemeColor(lightGithubColors);
+
+export default defineTheme(lightColors);
--- a/themes/soft-dark.css.ts
+++ b/themes/soft-dark.css.ts
@@ -1,104 +1,103 @@
-import { defineGithubTheme } from "src/core/github";
-import { prettylights2Chroma } from "src/core/prettylights";
+import { defineTheme, type Chroma, type ThemeColor } from "src";
+import { github2ThemeColor, type GithubColor } from "src/core/github";
+import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
+import { darkGithubColors } from "themes/dark";

-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" },
-      },
+export const softDarkGithubColors: GithubColor = {
+  isDarkTheme: true,
+  display: darkGithubColors.display,
+  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" },
+    danger: { muted: "#e5534b1a" },
+    default: "#212830",
+    done: { emphasis: "#8256d0" },
+    muted: "#262c36",
+    neutral: { muted: "#656c7633" },
+    success: { emphasis: "#347d39", muted: "#46954a26" },
+    inset: "#151b23",
+  },
+  borderColor: {
+    accent: { emphasis: "#316dca" },
+    attention: { emphasis: "#966600" },
+    default: "#3d444d",
+    done: { emphasis: "#8256d0" },
+    success: { emphasis: "#347d39" },
+    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",
+};
+
+export const softDarkPrettylights: prettylightsColor = {
+  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",
+  },
+};
+
+export const softDarkColors: ThemeColor = github2ThemeColor(softDarkGithubColors);
+export const softDarkChroma: Chroma = prettylights2Chroma(softDarkPrettylights);
+
+export default defineTheme(softDarkColors, softDarkChroma);
--- a/themes/tritanopia-dark.css.ts
+++ b/themes/tritanopia-dark.css.ts
@@ -0,0 +1,45 @@
+import { defineTheme, type Chroma, type ThemeColor } from "src";
+import { darkPrettylights } from "src/core/chroma";
+import { github2ThemeColor, type GithubColor } from "src/core/github";
+import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
+import { colorblindDarkGithubColors, colorblindDarkPrettylights } from "themes/colorblind-dark";
+import { darkGithubColors } from "themes/dark";
+
+export const tritanopiaDarkGithubColors: GithubColor = {
+  ...colorblindDarkGithubColors,
+  diffBlob: {
+    ...colorblindDarkGithubColors.diffBlob,
+    deletionNum: darkGithubColors.diffBlob.deletionNum,
+    deletionWord: darkGithubColors.diffBlob.deletionWord,
+  },
+  fgColor: {
+    ...colorblindDarkGithubColors.fgColor,
+    danger: darkGithubColors.fgColor.danger,
+  },
+  bgColor: {
+    ...colorblindDarkGithubColors.bgColor,
+    danger: darkGithubColors.bgColor.danger,
+  },
+  button: {
+    ...colorblindDarkGithubColors.button,
+    danger: darkGithubColors.button.danger,
+  },
+};
+
+export const tritanopiaDarkPrettylights: prettylightsColor = {
+  syntax: {
+    ...darkPrettylights.syntax,
+    markup: {
+      ...darkPrettylights.syntax.markup,
+      changed: { bg: "#67060c", text: "#ffdcd7" },
+      inserted: colorblindDarkPrettylights.syntax.markup.inserted,
+    },
+    stringRegexp: colorblindDarkPrettylights.syntax.stringRegexp,
+    variable: "#ffa198",
+  },
+};
+
+export const tritanopiaDarkColors: ThemeColor = github2ThemeColor(tritanopiaDarkGithubColors);
+export const tritanopiaDarkChroma: Chroma = prettylights2Chroma(tritanopiaDarkPrettylights);
+
+export default defineTheme(tritanopiaDarkColors, tritanopiaDarkChroma);
--- a/themes/tritanopia-light.css.ts
+++ b/themes/tritanopia-light.css.ts
@@ -0,0 +1,45 @@
+import { defineTheme, type Chroma, type ThemeColor } from "src";
+import { lightPrettylights } from "src/core/chroma";
+import { github2ThemeColor, type GithubColor } from "src/core/github";
+import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
+import { colorblindLightGithubColors, colorblindLightPrettylights } from "themes/colorblind-light";
+import { lightGithubColors } from "themes/light";
+
+export const tritanopiaLightGithubColors: GithubColor = {
+  ...colorblindLightGithubColors,
+  diffBlob: {
+    ...colorblindLightGithubColors.diffBlob,
+    deletionNum: lightGithubColors.diffBlob.deletionNum,
+    deletionWord: lightGithubColors.diffBlob.deletionWord,
+  },
+  fgColor: {
+    ...colorblindLightGithubColors.fgColor,
+    danger: lightGithubColors.fgColor.danger,
+  },
+  bgColor: {
+    ...colorblindLightGithubColors.bgColor,
+    danger: lightGithubColors.bgColor.danger,
+  },
+  button: {
+    ...colorblindLightGithubColors.button,
+    danger: lightGithubColors.button.danger,
+  },
+};
+
+export const tritanopiaLightPrettylights: prettylightsColor = {
+  syntax: {
+    ...lightPrettylights.syntax,
+    markup: {
+      ...lightPrettylights.syntax.markup,
+      changed: { bg: "#ffcecb", text: "#a40e26" },
+      inserted: colorblindLightPrettylights.syntax.markup.inserted,
+    },
+    stringRegexp: colorblindLightPrettylights.syntax.stringRegexp,
+    variable: "#a40e26",
+  },
+};
+
+export const tritanopiaLightColors: ThemeColor = github2ThemeColor(tritanopiaLightGithubColors);
+export const tritanopiaLightChroma: Chroma = prettylights2Chroma(tritanopiaLightPrettylights);
+
+export default defineTheme(tritanopiaLightColors, tritanopiaLightChroma);