diff --git a/.github/release.md b/.github/release.md index 2ac0f31..bb8a337 100644 --- a/.github/release.md +++ b/.github/release.md @@ -1,4 +1,8 @@ +## ✨ Feature + +- 支持色盲主题 ( Colorblind & Tritanopia ) ( 红绿色盲和蓝色盲 ) + ## 🐞 Fix - 查看代码文件页面路径栏有时内容不会居中 -- 查看代码文件页面文件树头部有时不会固定住 +- 查看代码文件页面文件树头部滚动到底部时不会固定住 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7a3c90c..d6fd46d 100644 --- a/CONTRIBUTING.md +++ b/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 语法, 如果一定要用请说明原因. diff --git a/README.md b/README.md index 773d4c5..64e562d 100644 --- a/README.md +++ b/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

theme-github-light.css

@@ -56,9 +61,19 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
+### 色盲主题 + +```ini +THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark +THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark +``` +
-其他主题 -等待贡献者ing... +红绿色盲 & 蓝色盲 ( Colorblind & Tritanopia ) +

theme-github-colorblind-light.css & theme-github-tritanopia-light.css

+ +

theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css

+
## 自定义 CSS 变量 diff --git a/screenshots/colorblind-dark.png b/screenshots/colorblind-dark.png new file mode 100644 index 0000000..4d9c303 Binary files /dev/null and b/screenshots/colorblind-dark.png differ diff --git a/screenshots/colorblind-light.png b/screenshots/colorblind-light.png new file mode 100644 index 0000000..7386189 Binary files /dev/null and b/screenshots/colorblind-light.png differ diff --git a/screenshots/dark.png b/screenshots/dark.png index 1e1ecb8..f78c368 100644 Binary files a/screenshots/dark.png and b/screenshots/dark.png differ diff --git a/screenshots/light.png b/screenshots/light.png index aad89ac..ed4b6c5 100644 Binary files a/screenshots/light.png and b/screenshots/light.png differ diff --git a/screenshots/soft-dark.png b/screenshots/soft-dark.png index a44ec07..3e0a561 100644 Binary files a/screenshots/soft-dark.png and b/screenshots/soft-dark.png differ diff --git a/src/core/chroma.ts b/src/core/chroma.ts index 0e9de9f..d00412e 100644 --- a/src/core/chroma.ts +++ b/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); diff --git a/src/core/color.ts b/src/core/color.ts index 1c11bde..c61613d 100644 --- a/src/core/color.ts +++ b/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, }, }; diff --git a/src/core/github.ts b/src/core/github.ts index d2378cf..e3b14b0 100644 --- a/src/core/github.ts +++ b/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, + }; } diff --git a/src/index.ts b/src/index.ts index 330b5bf..da28aef 100644 --- a/src/index.ts +++ b/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"; diff --git a/themes/colorblind-dark.css.ts b/themes/colorblind-dark.css.ts new file mode 100644 index 0000000..25bf936 --- /dev/null +++ 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); diff --git a/themes/colorblind-light.css.ts b/themes/colorblind-light.css.ts new file mode 100644 index 0000000..dfde812 --- /dev/null +++ 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); diff --git a/themes/dark.css.ts b/themes/dark.css.ts index f13c615..8d956d7 100644 --- 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); diff --git a/themes/light.css.ts b/themes/light.css.ts index ac594b3..b79bebf 100644 --- 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); diff --git a/themes/soft-dark.css.ts b/themes/soft-dark.css.ts index 8a9b747..281e409 100644 --- 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); diff --git a/themes/tritanopia-dark.css.ts b/themes/tritanopia-dark.css.ts new file mode 100644 index 0000000..4baf1b7 --- /dev/null +++ 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); diff --git a/themes/tritanopia-light.css.ts b/themes/tritanopia-light.css.ts new file mode 100644 index 0000000..27c3686 --- /dev/null +++ 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);