beta

.github/release.md

@@ -1,4 +1,8 @@
+## ✨ Feature
+
+- 支持色盲主题(Beta) ( 红绿色盲和蓝色盲 ) ( Colorblind & Tritanopia )
+
 ## 🐞 Fix
 
 - 查看代码文件页面路径栏有时内容不会居中
-- 查看代码文件页面文件树头部有时不会固定住
+- 查看代码文件页面文件树头部滚动到底部时不会固定住

.github/workflows/release.yml

@@ -20,6 +20,8 @@ jobs:
           export TZ=Asia/Shanghai
           TAG="v$(npm run -s version)"
           tar -zcf dist/theme-github.tar.gz --remove-files dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css
+          tar -zcf dist/theme-github-colorblind.tar.gz --remove-files dist/theme-github-colorblind-auto.css dist/theme-github-colorblind-light.css dist/theme-github-colorblind-dark.css
+          tar -zcf dist/theme-github-tritanopia.tar.gz --remove-files dist/theme-github-tritanopia-auto.css dist/theme-github-tritanopia-light.css dist/theme-github-tritanopia-dark.css
           gh release create "$TAG" dist/* --notes-file .github/release.md --draft -t $TAG
         env:
           GH_TOKEN: ${{ github.token }}

CONTRIBUTING.md

@@ -95,8 +95,8 @@ npm run commit
 
 请在颜色主题文件头部附加自己的作者信息, 方便 Issue 提问者找到你 `@`.
 
-推荐使用 `import { defineTheme } from "src"` 导入主题生成框架, 然后使用 `defineTheme` 函数生成主题,
-defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工作量, 具体请查看函数说明.
+推荐使用 `import { defineTheme, type ThemeColor } from "src"` 导入主题生成框架, 声明主题颜色, 然后使用 `defineTheme` 函数生成主题所有 CSS 变量,
+defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工作量, 具体请查看函数说明和定义.
 
 颜色计算函数可以从 `src/functions` 导入, 例如 `import { scaleColorLight } from "src/functions"`, 或者使用 `polished` 库.
 
@@ -107,12 +107,15 @@ defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工
  * @author 你的名字
  * @description 主题描述
  */
-import { defineTheme } from "src";
-export default defineTheme({
+import { defineTheme, type ThemeColor } from "src";
+export const 主题名称DarkColors: ThemeColor = {
   ...
-});
+}
+export default defineTheme(主题名称DarkColors);
 // 使用其他主题颜色作为基础
 import dark from "themes/dark";
+import { darkColors } from "themes/dark";
+export const 主题名称DarkColors: ThemeColor = darkColors;
 export default defineTheme({
   ...dark,
   ...
@@ -130,17 +133,26 @@ export default defineTheme({
  * @author 你的名字
  * @description 主题描述
  */
-import type { Theme } from "src";
+import type { Theme, Chroma, Primary, Secondary, ... } from "src";
+export const primary: Primary = ...;
+export const secondary: Secondary =...;
+export const chroma: Chroma =...;
+...
 export default theme: Theme = {
- ...
+  primary,
+  secondary,
+  chroma,
+  ...
 };
 ```
 
 完成主题颜色开发后, 请在某个仓库的代码文件列表页, 打开 Code 菜单选择 Tea Cli 进行截图, 并放入 `screenshots`
-目录下, 截图名与主题名相同. (推荐克隆 Github 的 actions/checkout 仓库, 该仓库信息较全, 避免泄露个人隐私)
+目录下, 截图名与主题名相同. (推荐克隆本仓库, 避免泄露个人隐私)
 
 然后将截图信息添加到 `README.md` 文件中, 可以在折叠部分中添加自己的说明.
 
+主题颜色复用案例可以参考本主题的色盲主题.
+
 ## 主题样式贡献
 
 主题样式使用 TypeScript 的 css 模板字符串开发, 该模板字符串会经过 sass 预处理器处理, 支持 SCSS 语法并且主题只接受 SCSS 嵌套语法, 请不要使用 CSS 语法, 如果一定要用请说明原因.

README.md

@@ -46,6 +46,11 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
 
 ## 截图
 
+### 基本主题
+
+```ini
+THEMES = github-auto, github-light, github-dark, github-soft-dark
+```
 <details open>
 <summary>GitHub</summary>
 <h4>theme-github-light.css</h4>
@@ -56,9 +61,19 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
 <img src="screenshots/soft-dark.png"/>
 </details>
 
+### 色盲主题 ( Beta )
+
+```ini
+THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark
+THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
+```
+
 <details>
-<summary>其他主题</summary>
-等待贡献者ing...
+<summary>红绿色盲 & 蓝色盲 ( Colorblind & Tritanopia )</summary>
+<h4>theme-github-colorblind-light.css & theme-github-tritanopia-light.css</h4>
+<img src="screenshots/colorblind-light.png"/>
+<h4>theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css</h4>
+<img src="screenshots/colorblind-dark.png"/>
 </details>
 
 ## 自定义 CSS 变量

src/core/chroma.ts

@@ -1,36 +1,6 @@
-import { prettylights2Chroma } from "./prettylights";
+import { prettylights2Chroma, type prettylightsColor } from "./prettylights";
 
-export const defaultDarkChroma = prettylights2Chroma({
-  syntax: {
-    brackethighlighter: { angle: "#9198a1", unmatched: "#f85149" },
-    carriage: { return: { bg: "#b62324", text: "#f0f6fc" } },
-    comment: "#9198a1",
-    constant: "#79c0ff",
-    constantOtherReferenceLink: "#a5d6ff",
-    entity: "#d2a8ff",
-    entityTag: "#7ee787",
-    invalid: { illegal: { bg: "#8e1519", text: "#f0f6fc" } },
-    keyword: "#ff7b72",
-    markup: {
-      bold: "#f0f6fc",
-      changed: { bg: "#5a1e02", text: "#ffdfb6" },
-      deleted: { bg: "#67060c", text: "#ffdcd7" },
-      heading: "#1f6feb",
-      ignored: { bg: "#1158c7", text: "#f0f6fc" },
-      inserted: { bg: "#033a16", text: "#aff5b4" },
-      italic: "#f0f6fc",
-      list: "#f2cc60",
-    },
-    metaDiffRange: "#d2a8ff",
-    storageModifierImport: "#f0f6fc",
-    string: "#a5d6ff",
-    stringRegexp: "#7ee787",
-    sublimelinterGutterMark: "#3d444d",
-    variable: "#ffa657",
-  },
-});
-
-export const defaultLightChroma = prettylights2Chroma({
+export const lightPrettylights: prettylightsColor = {
   syntax: {
     brackethighlighter: { angle: "#59636e", unmatched: "#82071e" },
     carriage: { return: { bg: "#cf222e", text: "#f6f8fa" } },
@@ -58,4 +28,37 @@ export const defaultLightChroma = prettylights2Chroma({
     sublimelinterGutterMark: "#818b98",
     variable: "#953800",
   },
-});
+};
+
+export const darkPrettylights: prettylightsColor = {
+  syntax: {
+    brackethighlighter: { angle: "#9198a1", unmatched: "#f85149" },
+    carriage: { return: { bg: "#b62324", text: "#f0f6fc" } },
+    comment: "#9198a1",
+    constant: "#79c0ff",
+    constantOtherReferenceLink: "#a5d6ff",
+    entity: "#d2a8ff",
+    entityTag: "#7ee787",
+    invalid: { illegal: { bg: "#8e1519", text: "#f0f6fc" } },
+    keyword: "#ff7b72",
+    markup: {
+      bold: "#f0f6fc",
+      changed: { bg: "#5a1e02", text: "#ffdfb6" },
+      deleted: { bg: "#67060c", text: "#ffdcd7" },
+      heading: "#1f6feb",
+      ignored: { bg: "#1158c7", text: "#f0f6fc" },
+      inserted: { bg: "#033a16", text: "#aff5b4" },
+      italic: "#f0f6fc",
+      list: "#f2cc60",
+    },
+    metaDiffRange: "#d2a8ff",
+    storageModifierImport: "#f0f6fc",
+    string: "#a5d6ff",
+    stringRegexp: "#7ee787",
+    sublimelinterGutterMark: "#3d444d",
+    variable: "#ffa657",
+  },
+};
+
+export const defaultLightChroma = prettylights2Chroma(lightPrettylights);
+export const defaultDarkChroma = prettylights2Chroma(darkPrettylights);

src/core/color.ts

@@ -5,7 +5,7 @@ import { themeVars } from "src/types/vars";
 import { defaultDarkChroma, defaultLightChroma } from "./chroma";
 import type { Theme } from "./theme";
 
-type ThemeColor = {
+export type ThemeColor = {
   /** 用于标识当前是否为暗色主题: `true` 暗色 `false` 亮色 */
   isDarkTheme: boolean;
   /** 主色调(强调色) */
@@ -14,38 +14,41 @@ type ThemeColor = {
   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;
+  /** 基础颜色 */
+  base: {
+    /** 红色 */
+    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;
   /** 提交代码对比 */
@@ -161,161 +164,161 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
 
   const named: Named = {
     red: {
-      self: themeColor.red,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.red, 15) : scaleColorLight(themeColor.red, 25),
+      self: themeColor.base.red,
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.red, 15) : scaleColorLight(themeColor.base.red, 25),
       dark: {
-        num1: scaleColorLight(themeColor.red, -10),
-        num2: scaleColorLight(themeColor.red, -20),
+        num1: scaleColorLight(themeColor.base.red, -10),
+        num2: scaleColorLight(themeColor.base.red, -20),
       },
       badge: {
-        self: themeColor.red,
-        bg: rgba(themeColor.red, 0.1),
+        self: themeColor.base.red,
+        bg: rgba(themeColor.base.red, 0.1),
         hover: {
-          bg: rgba(themeColor.red, 0.3),
+          bg: rgba(themeColor.base.red, 0.3),
         },
       },
     },
     orange: {
-      self: themeColor.orange,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.orange, 15) : scaleColorLight(themeColor.orange, 25),
+      self: themeColor.base.orange,
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.orange, 15) : scaleColorLight(themeColor.base.orange, 25),
       dark: {
-        num1: scaleColorLight(themeColor.orange, -10),
-        num2: scaleColorLight(themeColor.orange, -20),
+        num1: scaleColorLight(themeColor.base.orange, -10),
+        num2: scaleColorLight(themeColor.base.orange, -20),
       },
       badge: {
-        self: themeColor.orange,
-        bg: rgba(themeColor.orange, 0.1),
+        self: themeColor.base.orange,
+        bg: rgba(themeColor.base.orange, 0.1),
         hover: {
-          bg: rgba(themeColor.orange, 0.3),
+          bg: rgba(themeColor.base.orange, 0.3),
         },
       },
     },
     yellow: {
-      self: themeColor.yellow,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.yellow, 15) : scaleColorLight(themeColor.yellow, 25),
+      self: themeColor.base.yellow,
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.yellow, 15) : scaleColorLight(themeColor.base.yellow, 25),
       dark: {
-        num1: scaleColorLight(themeColor.yellow, -10),
-        num2: scaleColorLight(themeColor.yellow, -20),
+        num1: scaleColorLight(themeColor.base.yellow, -10),
+        num2: scaleColorLight(themeColor.base.yellow, -20),
       },
       badge: {
-        self: themeColor.yellow,
-        bg: rgba(themeColor.yellow, 0.1),
+        self: themeColor.base.yellow,
+        bg: rgba(themeColor.base.yellow, 0.1),
         hover: {
-          bg: rgba(themeColor.yellow, 0.3),
+          bg: rgba(themeColor.base.yellow, 0.3),
         },
       },
     },
     olive: {
-      self: themeColor.olive,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.olive, 15) : scaleColorLight(themeColor.olive, 25),
+      self: themeColor.base.olive,
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.olive, 15) : scaleColorLight(themeColor.base.olive, 25),
       dark: {
-        num1: scaleColorLight(themeColor.olive, -10),
-        num2: scaleColorLight(themeColor.olive, -20),
+        num1: scaleColorLight(themeColor.base.olive, -10),
+        num2: scaleColorLight(themeColor.base.olive, -20),
       },
     },
     green: {
-      self: themeColor.green,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.green, 15) : scaleColorLight(themeColor.green, 25),
+      self: themeColor.base.green,
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.green, 15) : scaleColorLight(themeColor.base.green, 25),
       dark: {
-        num1: scaleColorLight(themeColor.green, -10),
-        num2: scaleColorLight(themeColor.green, -20),
+        num1: scaleColorLight(themeColor.base.green, -10),
+        num2: scaleColorLight(themeColor.base.green, -20),
       },
       badge: {
-        self: themeColor.green,
-        bg: rgba(themeColor.green, 0.1),
+        self: themeColor.base.green,
+        bg: rgba(themeColor.base.green, 0.1),
         hover: {
-          bg: rgba(themeColor.green, 0.3),
+          bg: rgba(themeColor.base.green, 0.3),
         },
       },
     },
     teal: {
-      self: themeColor.teal,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.teal, 15) : scaleColorLight(themeColor.teal, 25),
+      self: themeColor.base.teal,
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.teal, 15) : scaleColorLight(themeColor.base.teal, 25),
       dark: {
-        num1: scaleColorLight(themeColor.teal, -10),
-        num2: scaleColorLight(themeColor.teal, -20),
+        num1: scaleColorLight(themeColor.base.teal, -10),
+        num2: scaleColorLight(themeColor.base.teal, -20),
       },
     },
     blue: {
-      self: themeColor.blue,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.blue, 15) : scaleColorLight(themeColor.blue, 25),
+      self: themeColor.base.blue,
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.blue, 15) : scaleColorLight(themeColor.base.blue, 25),
       dark: {
-        num1: scaleColorLight(themeColor.blue, -10),
-        num2: scaleColorLight(themeColor.blue, -20),
+        num1: scaleColorLight(themeColor.base.blue, -10),
+        num2: scaleColorLight(themeColor.base.blue, -20),
       },
     },
     violet: {
-      self: themeColor.violet,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.violet, 15) : scaleColorLight(themeColor.violet, 25),
+      self: themeColor.base.violet,
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.violet, 15) : scaleColorLight(themeColor.base.violet, 25),
       dark: {
-        num1: scaleColorLight(themeColor.violet, -10),
-        num2: scaleColorLight(themeColor.violet, -20),
+        num1: scaleColorLight(themeColor.base.violet, -10),
+        num2: scaleColorLight(themeColor.base.violet, -20),
       },
     },
     purple: {
-      self: themeColor.purple,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.purple, 15) : scaleColorLight(themeColor.purple, 25),
+      self: themeColor.base.purple,
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.purple, 15) : scaleColorLight(themeColor.base.purple, 25),
       dark: {
-        num1: scaleColorLight(themeColor.purple, -10),
-        num2: scaleColorLight(themeColor.purple, -20),
+        num1: scaleColorLight(themeColor.base.purple, -10),
+        num2: scaleColorLight(themeColor.base.purple, -20),
       },
     },
     pink: {
-      self: themeColor.pink,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.pink, 15) : scaleColorLight(themeColor.pink, 25),
+      self: themeColor.base.pink,
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.pink, 15) : scaleColorLight(themeColor.base.pink, 25),
       dark: {
-        num1: scaleColorLight(themeColor.pink, -10),
-        num2: scaleColorLight(themeColor.pink, -20),
+        num1: scaleColorLight(themeColor.base.pink, -10),
+        num2: scaleColorLight(themeColor.base.pink, -20),
       },
     },
     brown: {
-      self: themeColor.brown,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.brown, 15) : scaleColorLight(themeColor.brown, 25),
+      self: themeColor.base.brown,
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.brown, 15) : scaleColorLight(themeColor.base.brown, 25),
       dark: {
-        num1: scaleColorLight(themeColor.brown, -10),
-        num2: scaleColorLight(themeColor.brown, -20),
+        num1: scaleColorLight(themeColor.base.brown, -10),
+        num2: scaleColorLight(themeColor.base.brown, -20),
       },
     },
     black: {
-      self: themeColor.black,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.black, 15) : scaleColorLight(themeColor.black, 25),
+      self: themeColor.base.black,
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.black, 15) : scaleColorLight(themeColor.base.black, 25),
       dark: {
-        num1: scaleColorLight(themeColor.black, -10),
-        num2: scaleColorLight(themeColor.black, -20),
+        num1: scaleColorLight(themeColor.base.black, -10),
+        num2: scaleColorLight(themeColor.base.black, -20),
       },
     },
     grey: {
-      self: themeColor.grey,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.grey, 15) : scaleColorLight(themeColor.grey, 25),
+      self: themeColor.base.grey,
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.grey, 15) : scaleColorLight(themeColor.base.grey, 25),
     },
-    gold: themeColor.gold,
-    white: themeColor.white,
+    gold: themeColor.base.gold,
+    white: themeColor.base.white,
   };
 
   const message: Message = {
     error: {
       bg: {
-        self: rgba(themeColor.red, 0.1),
-        active: rgba(themeColor.red, 0.5),
-        hover: rgba(themeColor.red, 0.3),
+        self: rgba(themeColor.base.red, 0.1),
+        active: rgba(themeColor.base.red, 0.5),
+        hover: rgba(themeColor.base.red, 0.3),
       },
-      border: rgba(themeColor.red, 0.4),
-      text: saturate(0.2, themeColor.red), // 饱和度提高
+      border: rgba(themeColor.base.red, 0.4),
+      text: saturate(0.2, themeColor.base.red), // 饱和度提高
     },
     success: {
-      bg: rgba(themeColor.green, 0.1),
-      border: rgba(themeColor.green, 0.4),
-      text: saturate(0.2, themeColor.green),
+      bg: rgba(themeColor.base.green, 0.1),
+      border: rgba(themeColor.base.green, 0.4),
+      text: saturate(0.2, themeColor.base.green),
     },
     warning: {
-      bg: rgba(themeColor.yellow, 0.1),
-      border: rgba(themeColor.yellow, 0.4),
-      text: saturate(0.2, themeColor.yellow),
+      bg: rgba(themeColor.base.yellow, 0.1),
+      border: rgba(themeColor.base.yellow, 0.4),
+      text: saturate(0.2, themeColor.base.yellow),
     },
     info: {
-      bg: rgba(themeColor.blue, 0.1),
-      border: rgba(themeColor.blue, 0.4),
-      text: saturate(0.2, themeColor.blue),
+      bg: rgba(themeColor.base.blue, 0.1),
+      border: rgba(themeColor.base.blue, 0.4),
+      text: saturate(0.2, themeColor.base.blue),
     },
   };
 
@@ -326,7 +329,7 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
     yellow: themeVars.color.yellow.self,
     blue: themeVars.color.blue.self,
     magenta: themeVars.color.pink.self,
-    cyan: themeColor.cyan,
+    cyan: themeColor.base.cyan,
     white: themeVars.color.console.fg.subtle,
     bright: {
       black: themeVars.color.black.light,
@@ -335,7 +338,7 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
       yellow: themeVars.color.yellow.light,
       blue: themeVars.color.blue.light,
       magenta: themeVars.color.pink.light,
-      cyan: themeColor.isDarkTheme ? scaleColorLight(themeColor.cyan, 10) : scaleColorLight(themeColor.cyan, 25),
+      cyan: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.cyan, 10) : scaleColorLight(themeColor.base.cyan, 25),
       white: themeVars.color.console.fg.self,
     },
   };

src/core/github.ts

@@ -1,10 +1,9 @@
 import { saturate } from "polished";
 import type { Console, Diff, Other } from "src";
 import { scaleColorLight } from "src/functions";
-import type { Chroma, Github } from "src/types";
+import type { Github } from "src/types";
 import { themeVars } from "src/types/vars";
-import { defineTheme } from "./color";
-import type { Theme } from "./theme";
+import { type ThemeColor } from "./color";
 
 export type GithubColor = {
   isDarkTheme: boolean;
@@ -77,7 +76,7 @@ export type GithubColor = {
   };
 };
 
-export function defineGithubTheme(githubColor: GithubColor, chroma: Chroma | null = null): Theme {
+export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
   const console: Console = {
     fg: {
       self: githubColor.fgColor.default,
@@ -327,12 +326,12 @@ export function defineGithubTheme(githubColor: GithubColor, chroma: Chroma | nul
       },
     },
   };
-  return defineTheme(
-    {
-      isDarkTheme: githubColor.isDarkTheme,
-      primary: githubColor.fgColor.accent,
-      primaryContrast: githubColor.fgColor.default,
-      secondary: githubColor.borderColor.default,
+  return {
+    isDarkTheme: githubColor.isDarkTheme,
+    primary: githubColor.fgColor.accent,
+    primaryContrast: githubColor.fgColor.default,
+    secondary: githubColor.borderColor.default,
+    base: {
       red: githubColor.fgColor.danger,
       orange: githubColor.fgColor.severe,
       yellow: githubColor.fgColor.attention,
@@ -349,11 +348,10 @@ export function defineGithubTheme(githubColor: GithubColor, chroma: Chroma | nul
       grey: githubColor.fgColor.neutral,
       gold: githubColor.display.lemon.fgColor,
       white: githubColor.fgColor.white,
-      console,
-      diff,
-      other,
-      github,
     },
-    chroma
-  );
+    console,
+    diff,
+    other,
+    github,
+  };
 }

src/index.ts

@@ -1,4 +1,5 @@
-export { defineTheme } from "./core/color";
+export { defaultDarkChroma, defaultLightChroma } from "./core/chroma";
+export { defineTheme, type ThemeColor } from "./core/color";
 export type { Theme } from "./core/theme";
-export type { Chroma, Console, Diff, Github, Other } from "./types";
+export type { Ansi, Chroma, Console, Diff, Github, Message, Named, Other, Primary, Secondary } from "./types";
 export { otherThemeVars, themeVars } from "./types/vars";

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

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

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

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

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

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

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