From 43853283f28e267e80c0d0397e34c80b333b5385 Mon Sep 17 00:00:00 2001 From: chuan Date: Sat, 16 May 2026 18:27:13 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=94=AF=E6=8C=81=20?= =?UTF-8?q?GitHub=20Dark=20=E4=B8=BB=E9=A2=98=EF=BC=8C=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E6=9E=84=E5=BB=BA=E5=92=8C=E9=AA=8C=E8=AF=81=E6=B5=81=E7=A8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- compose.dev.yaml | 4 +- docs/official-style-map.md | 18 ++++--- docs/rules.md | 8 +-- scripts/build.ts | 46 ++++++++++------- scripts/verify-docker.ts | 23 ++++++--- scripts/verify-github-migration.ts | 27 ++++++++++ scripts/verify-theme.ts | 2 + styles/index.ts | 10 +++- styles/tokens/index.ts | 5 ++ themes/github-dark/core.ts | 63 +++++++++++++++++++++++ themes/github-dark/github-colors.ts | 60 ++++++++++++++++++++++ themes/github-dark/index.ts | 25 +++++++++ themes/github-dark/target-colors.ts | 80 +++++++++++++++++++++++++++++ themes/github-dark/theme-meta.ts | 6 +++ themes/index.ts | 1 + 16 files changed, 339 insertions(+), 41 deletions(-) create mode 100644 themes/github-dark/core.ts create mode 100644 themes/github-dark/github-colors.ts create mode 100644 themes/github-dark/index.ts create mode 100644 themes/github-dark/target-colors.ts create mode 100644 themes/github-dark/theme-meta.ts diff --git a/README.md b/README.md index 43db22b..b713007 100644 --- a/README.md +++ b/README.md @@ -19,4 +19,4 @@ bun run preview bun run test ``` -构建会生成 `dist/theme-github-dev.css`，并同步输出到 `.gitea/custom/public/assets/css/theme-github-dev.css` 供 Gitea custom 目录使用。 +构建会生成 `dist/theme-github-dev.css` 和 `dist/theme-github-dev-dark.css`，并同步输出到 `.gitea/custom/public/assets/css/` 供 Gitea custom 目录使用。Docker 预览当前默认加载 `github-dev-dark`，便于检查未登录页面 dark 模式。 diff --git a/compose.dev.yaml b/compose.dev.yaml index e4164b1..67df2f0 100644 --- a/compose.dev.yaml +++ b/compose.dev.yaml @@ -9,8 +9,8 @@ services: - GITEA__service_0x2E_explore__DISABLE_USERS_PAGE=true - GITEA__service_0x2E_explore__DISABLE_ORGANIZATIONS_PAGE=true - GITEA__service_0x2E_explore__DISABLE_CODE_PAGE=true - - GITEA__ui__THEMES=github-dev - - GITEA__ui__DEFAULT_THEME=github-dev + - GITEA__ui__THEMES=github-dev,github-dev-dark + - GITEA__ui__DEFAULT_THEME=github-dev-dark restart: always volumes: - ./.gitea-data:/data diff --git a/docs/official-style-map.md b/docs/official-style-map.md index be26732..64d9cf3 100644 --- a/docs/official-style-map.md +++ b/docs/official-style-map.md @@ -2,7 +2,7 @@ ## 当前基线 -当前 `github-dev` 主题以 Gitea 官方 light 主题为基线，并迁移 `.github-theme` 的 GitHub Light 增量。 +当前 `github-dev` 主题以 Gitea 官方 light 主题为基线，并迁移 `.github-theme` 的 GitHub Light 增量。`github-dev-dark` 使用同一套 primitive、component 和 page 规则，但切换到 `themes/github-dark/` 的 dark token 源。 官方主题文件： @@ -16,17 +16,23 @@ `/themes/github-light/index.ts` +`/themes/github-dark/index.ts` + 构建输出： `/dist/theme-github-dev.css` +`/dist/theme-github-dev-dark.css` + Gitea custom 输出： `/.gitea/custom/public/assets/css/theme-github-dev.css` +`/.gitea/custom/public/assets/css/theme-github-dev-dark.css` + ## 主题层拆解 -`themes/github-light/` 当前承载 GitHub Light 颜色主题源数据。`styles/tokens/` 只从 `themes/index.ts` 读取当前主题，并渲染成 Gitea 可识别的 `:root` CSS 变量。构建时不直接读取 `.gitea`，`.gitea` 只作为官方源码参考和测试基线。 +`themes/github-light/` 当前承载 GitHub Light 颜色主题源数据。`themes/github-dark/` 承载 GitHub Dark 颜色主题源数据，当前优先覆盖未登录 explore 页面需要的 body、navbar、input、menu、card、button 等变量。`styles/tokens/` 只接收主题对象并渲染成 Gitea 可识别的 `:root` CSS 变量。构建时不直接读取 `.gitea`，`.gitea` 只作为官方源码参考和测试基线。 主题拆分文件： @@ -80,13 +86,13 @@ Gitea custom 输出： `bun run test` 会执行四步： -1. 构建 `theme-github-dev.css`。 +1. 构建 `theme-github-dev.css` 和 `theme-github-dev-dark.css`。 2. 检查 `dist/` 和 `.gitea/custom/` 输出存在且非空。 -3. 检查生成的 CSS 包含 GitHub Light token、全局控件、仓库组件、登录页和模板专属规则。 +3. 检查生成的 CSS 包含 GitHub Light/Dark token、全局控件、仓库组件、登录页和模板专属规则。 4. 检查模板覆盖和 locale 输出已经同步到 `.gitea/custom/`。 `bun run docker:test` 会执行三步： -1. 构建 `theme-github-dev.css`。 +1. 构建 `theme-github-dev.css` 和 `theme-github-dev-dark.css`。 2. 启动 Gitea Docker 预览容器。 -3. 检查首页返回 `200`，首页 HTML 加载 `/assets/css/theme-github-dev.css`，并确认主题 CSS 内包含迁移后的 GitHub Light 变量和组件规则。 +3. 检查首页返回 `200`，首页 HTML 加载 `/assets/css/theme-github-dev-dark.css`，并确认 light/dark 主题 CSS 内包含迁移后的变量和组件规则。 diff --git a/docs/rules.md b/docs/rules.md index 02fde65..0039e5a 100644 --- a/docs/rules.md +++ b/docs/rules.md @@ -6,7 +6,7 @@ ## 目录职责 -`themes/` 放颜色主题源数据，方便快速扩展新主题。当前默认主题是 `themes/github-light/`，颜色、语义变量、目标变量、主题元信息都从这里维护；构建时不直接读取 `.gitea`。 +`themes/` 放颜色主题源数据，方便快速扩展新主题。当前维护 `themes/github-light/` 和 `themes/github-dark/`，颜色、语义变量、目标变量、主题元信息都从这里维护；构建时不直接读取 `.gitea`。 `styles/tokens/` 负责把当前 `themes/` 主题渲染成 Gitea 可识别的 CSS 变量，并承载必需变量校验、派生 token、兼容别名和输出格式控制。这里不应该直接维护一套颜色表，也不应该出现具体页面选择器。 @@ -20,7 +20,7 @@ `src/` 放构建辅助代码、类型和聚合逻辑。这里不直接承载某个具体页面的样式规则。 -`.gitea/` 放 Gitea custom 目录和源代码参考资源。构建产物会输出到 `.gitea/custom/public/assets/css/theme-github-dev.css`。 +`.gitea/` 放 Gitea custom 目录和源代码参考资源。构建产物会输出到 `.gitea/custom/public/assets/css/theme-github-dev.css` 和 `.gitea/custom/public/assets/css/theme-github-dev-dark.css`。 `dist/` 放本地构建产物，主要用于检查和 Preview。 @@ -38,7 +38,7 @@ 主题 CSS 变量优先保持 Gitea 官方兼容命名，例如 `--color-primary`、`--color-body`、`--color-input-background`。只有新增且无法映射到官方变量的项目私有变量，才使用自定义前缀。 -主题名与 Gitea CSS 文件名保持一致。当前默认主题名是 `github-dev`，输出文件是 `theme-github-dev.css`。不要使用 `gitea`、`gitea-auto`、`arc-green` 这类内置主题名，避免 Gitea 加载内置 hashed 资源而不是 custom 主题文件。 +主题名与 Gitea CSS 文件名保持一致。当前主题名是 `github-dev` 和 `github-dev-dark`，输出文件分别是 `theme-github-dev.css` 和 `theme-github-dev-dark.css`。不要使用 `gitea`、`gitea-auto`、`arc-green` 这类内置主题名，避免 Gitea 加载内置 hashed 资源而不是 custom 主题文件。 样式模块默认导出字符串常量，由 `styles/index.ts` 按 `tokens -> primitives -> components -> pages` 顺序聚合。`styles/tokens/index.ts` 必须通过 `render-theme.ts` 输出当前主题，不直接拼接主题源数据。 @@ -52,7 +52,7 @@ 使用 `bun run preview` 启动本地预览页面。 -使用 `bun run test` 构建并检查必要输出是否存在。 +使用 `bun run test` 构建 light/dark 两套主题并检查必要输出是否存在。 使用 `bun run compose:up` 启动 Gitea 开发容器，使用 `bun run compose:down` 停止容器。 diff --git a/scripts/build.ts b/scripts/build.ts index 271b0ed..33487cb 100644 --- a/scripts/build.ts +++ b/scripts/build.ts @@ -2,14 +2,21 @@ import { mkdir, readdir, readFile, writeFile } from "node:fs/promises"; import { watch } from "node:fs"; import { dirname, join } from "node:path"; import { transform } from "lightningcss"; -import { stylesheet } from "../styles/index"; +import { githubDarkTheme, githubLightTheme } from "../themes"; +import { createStylesheet } from "../styles/index"; const root = process.cwd(); const minify = process.argv.includes("--minify"); const watchMode = process.argv.includes("--watch"); -const outputs = [ - join(root, "dist", "theme-github-dev.css"), - join(root, ".gitea", "custom", "public", "assets", "css", "theme-github-dev.css"), +const themes = [ + { + filename: "theme-github-dev.css", + source: githubLightTheme, + }, + { + filename: "theme-github-dev-dark.css", + source: githubDarkTheme, + }, ]; async function writeIfChanged(output: string, content: Buffer | string) { @@ -47,20 +54,23 @@ async function syncDir(source: string, target: string) { } async function build() { - const result = transform({ - filename: "theme-github-dev.css", - code: Buffer.from(stylesheet), - minify, - targets: { - chrome: 108 << 16, - firefox: 108 << 16, - safari: 16 << 16, - }, - }); + const cssOutputs = await Promise.all( + themes.flatMap((theme) => { + const result = transform({ + filename: theme.filename, + code: Buffer.from(createStylesheet(theme.source)), + minify, + targets: { + chrome: 108 << 16, + firefox: 108 << 16, + safari: 16 << 16, + }, + }); - await Promise.all( - outputs.map(async (output) => { - await writeIfChanged(output, result.code); + return [ + writeIfChanged(join(root, "dist", theme.filename), result.code), + writeIfChanged(join(root, ".gitea", "custom", "public", "assets", "css", theme.filename), result.code), + ]; }), ); @@ -69,7 +79,7 @@ async function build() { syncDir(join(root, "options"), join(root, ".gitea", "custom", "options")), ]); - console.log(`built ${outputs.length} css outputs`); + console.log(`built ${cssOutputs.length} css outputs`); } await build(); diff --git a/scripts/verify-docker.ts b/scripts/verify-docker.ts index 97fbfe9..5e7f842 100644 --- a/scripts/verify-docker.ts +++ b/scripts/verify-docker.ts @@ -24,19 +24,26 @@ async function waitFor(url: string) { const home = await waitFor(baseUrl); const html = await home.text(); -const theme = await waitFor(`${baseUrl}/assets/css/theme-github-dev.css`); -const css = await theme.text(); +const lightTheme = await waitFor(`${baseUrl}/assets/css/theme-github-dev.css`); +const darkTheme = await waitFor(`${baseUrl}/assets/css/theme-github-dev-dark.css`); -if (!html.includes("/assets/css/theme-github-dev.css")) { - throw new Error("Gitea page is not loading the custom theme-github-dev.css file"); +if (!html.includes("/assets/css/theme-github-dev-dark.css")) { + throw new Error("Gitea page is not loading the custom theme-github-dev-dark.css file"); } -if (!css.includes("--color-primary: #0969da")) { - throw new Error("theme css is reachable but does not contain migrated GitHub tokens"); +const lightCss = await lightTheme.text(); +const darkCss = await darkTheme.text(); + +if (!lightCss.includes("--color-primary: #0969da")) { + throw new Error("light theme css is reachable but does not contain migrated GitHub tokens"); } -if (!css.includes(".ui.primary.button")) { - throw new Error("theme css is reachable but does not contain migrated GitHub component styles"); +if (!darkCss.includes("--color-body: #0d1117")) { + throw new Error("dark theme css is reachable but does not contain GitHub dark tokens"); +} + +if (!darkCss.includes(".ui.primary.button")) { + throw new Error("dark theme css is reachable but does not contain migrated GitHub component styles"); } console.log(`docker preview verified: ${home.status} ${baseUrl}`); diff --git a/scripts/verify-github-migration.ts b/scripts/verify-github-migration.ts index f50df1b..a06d715 100644 --- a/scripts/verify-github-migration.ts +++ b/scripts/verify-github-migration.ts @@ -3,13 +3,16 @@ import { join } from "node:path"; const root = process.cwd(); const generatedPath = join(root, "dist", "theme-github-dev.css"); +const generatedDarkPath = join(root, "dist", "theme-github-dev-dark.css"); const themeSourceDir = join(root, "themes", "github-light"); +const darkThemeSourceDir = join(root, "themes", "github-dark"); const tokenSourceDir = join(root, "styles", "tokens"); const packageJson = JSON.parse(await readFile(join(root, "package.json"), "utf8")) as { version?: string }; const githubThemePackageJson = JSON.parse( await readFile(join(root, ".github-theme", "package.json"), "utf8"), ) as { version?: string }; const generated = await readFile(generatedPath, "utf8"); +const generatedDark = await readFile(generatedDarkPath, "utf8"); const requiredSnippets = [ "--theme-display-name: GitHub Light", @@ -22,6 +25,16 @@ const requiredSnippets = [ ".gitea-github-theme-templates", ]; +const requiredDarkSnippets = [ + '--theme-display-name: "GitHub Dark"', + '--theme-color-scheme: "dark"', + "--is-dark-theme: true", + "--color-body: #0d1117", + "--color-text: #e6edf3", + "--github-bgColor-accent-emphasis: #1f6feb", + ".ui.primary.button", +]; + if (packageJson.version !== "1.26.1") { throw new Error(`project version must be 1.26.1, got ${packageJson.version}`); } @@ -32,9 +45,11 @@ if (githubThemePackageJson.version !== "1.26.1") { await access(join(root, "themes", "index.ts")); await access(join(themeSourceDir, "index.ts")); +await access(join(darkThemeSourceDir, "index.ts")); const tokenFiles = await readdir(tokenSourceDir); const themeFiles = await readdir(themeSourceDir); +const darkThemeFiles = await readdir(darkThemeSourceDir); const allowedTokenFiles = new Set(["derived.ts", "index.ts", "render-theme.ts", "required.ts"]); const unexpectedTokenFiles = tokenFiles.filter((file) => !allowedTokenFiles.has(file)); @@ -62,10 +77,22 @@ for (const file of [ } } +for (const file of ["theme-meta.ts", "core.ts", "github-colors.ts", "target-colors.ts", "index.ts"]) { + if (!darkThemeFiles.includes(file)) { + throw new Error(`themes/github-dark is missing theme source file: ${file}`); + } +} + for (const snippet of requiredSnippets) { if (!generated.includes(snippet)) { throw new Error(`generated theme is missing migrated GitHub theme snippet: ${snippet}`); } } +for (const snippet of requiredDarkSnippets) { + if (!generatedDark.includes(snippet)) { + throw new Error(`generated dark theme is missing snippet: ${snippet}`); + } +} + console.log("generated GitHub theme migration verified"); diff --git a/scripts/verify-theme.ts b/scripts/verify-theme.ts index d8c13fb..97beb9d 100644 --- a/scripts/verify-theme.ts +++ b/scripts/verify-theme.ts @@ -4,7 +4,9 @@ import { join } from "node:path"; const requiredOutputs = [ join(process.cwd(), "dist", "theme-github-dev.css"), + join(process.cwd(), "dist", "theme-github-dev-dark.css"), join(process.cwd(), ".gitea", "custom", "public", "assets", "css", "theme-github-dev.css"), + join(process.cwd(), ".gitea", "custom", "public", "assets", "css", "theme-github-dev-dark.css"), join(process.cwd(), ".gitea", "custom", "templates", "repo", "view_content.tmpl"), join(process.cwd(), ".gitea", "custom", "templates", "repo", "view_list.tmpl"), join(process.cwd(), ".gitea", "custom", "templates", "repo", "commits_list.tmpl"), diff --git a/styles/index.ts b/styles/index.ts index cc1af18..5841434 100644 --- a/styles/index.ts +++ b/styles/index.ts @@ -1,6 +1,12 @@ import { components } from "./components/index"; import { pages } from "./pages/index"; import { primitives } from "./primitives/index"; -import { tokens } from "./tokens/index"; +import { currentTheme } from "../themes"; +import { createTokens } from "./tokens/index"; +import type { ThemeTokenSource } from "./tokens/render-theme"; -export const stylesheet = [tokens, primitives, components, pages].join("\n\n"); +export function createStylesheet(theme: ThemeTokenSource): string { + return [createTokens(theme), primitives, components, pages].join("\n\n"); +} + +export const stylesheet = createStylesheet(currentTheme); diff --git a/styles/tokens/index.ts b/styles/tokens/index.ts index 2493bc1..622f398 100644 --- a/styles/tokens/index.ts +++ b/styles/tokens/index.ts @@ -1,4 +1,9 @@ import { currentTheme } from "../../themes"; import { renderThemeTokens } from "./render-theme"; +import type { ThemeTokenSource } from "./render-theme"; export const tokens = renderThemeTokens(currentTheme); + +export function createTokens(theme: ThemeTokenSource): string { + return renderThemeTokens(theme); +} diff --git a/themes/github-dark/core.ts b/themes/github-dark/core.ts new file mode 100644 index 0000000..6e81bf9 --- /dev/null +++ b/themes/github-dark/core.ts @@ -0,0 +1,63 @@ +export const coreTokens = ` +--theme-version: "1.26.1.260516-dark"; + --is-dark-theme: true; + --color-primary: #2f81f7; + --color-primary-contrast: #ffffff; + --color-primary-dark-1: #58a6ff; + --color-primary-dark-2: #79c0ff; + --color-primary-dark-3: #a5d6ff; + --color-primary-dark-4: #cae8ff; + --color-primary-dark-5: #ddf4ff; + --color-primary-dark-6: #edf5ff; + --color-primary-dark-7: #f6f8fa; + --color-primary-light-1: #1f6feb; + --color-primary-light-2: #1158c7; + --color-primary-light-3: #0d419d; + --color-primary-light-4: #0a3069; + --color-primary-light-5: #051d4d; + --color-primary-light-6: #031226; + --color-primary-light-7: #010409; + --color-primary-alpha-10: #2f81f71a; + --color-primary-alpha-20: #2f81f733; + --color-primary-alpha-30: #2f81f74d; + --color-primary-alpha-40: #2f81f766; + --color-primary-alpha-50: #2f81f780; + --color-primary-alpha-60: #2f81f799; + --color-primary-alpha-70: #2f81f7b3; + --color-primary-alpha-80: #2f81f7cc; + --color-primary-alpha-90: #2f81f7e6; + --color-primary-hover: var(--color-primary-dark-1); + --color-primary-active: var(--color-primary-dark-2); + --color-secondary: #30363d; + --color-secondary-dark-1: #3d444d; + --color-secondary-dark-2: #484f58; + --color-secondary-dark-3: #6e7681; + --color-secondary-dark-4: #8b949e; + --color-secondary-dark-5: #b1bac4; + --color-secondary-dark-6: #c9d1d9; + --color-secondary-dark-7: #d8dee4; + --color-secondary-dark-8: #e6edf3; + --color-secondary-dark-9: #f0f6fc; + --color-secondary-dark-10: #f6f8fa; + --color-secondary-dark-11: #ffffff; + --color-secondary-dark-12: #ffffff; + --color-secondary-dark-13: #ffffff; + --color-secondary-light-1: #21262d; + --color-secondary-light-2: #161b22; + --color-secondary-light-3: #0d1117; + --color-secondary-light-4: #010409; + --color-secondary-alpha-10: #30363d1a; + --color-secondary-alpha-20: #30363d33; + --color-secondary-alpha-30: #30363d4d; + --color-secondary-alpha-40: #30363d66; + --color-secondary-alpha-50: #30363d80; + --color-secondary-alpha-60: #30363d99; + --color-secondary-alpha-70: #30363db3; + --color-secondary-alpha-80: #30363dcc; + --color-secondary-alpha-90: #30363de6; + --color-secondary-button: var(--color-secondary-dark-1); + --color-secondary-hover: var(--color-secondary-dark-2); + --color-secondary-active: var(--color-secondary-dark-3); + --color-secondary-bg: #161b22; + --color-secondary-nav-bg: var(--color-body); +`.trim(); diff --git a/themes/github-dark/github-colors.ts b/themes/github-dark/github-colors.ts new file mode 100644 index 0000000..cd7fa53 --- /dev/null +++ b/themes/github-dark/github-colors.ts @@ -0,0 +1,60 @@ +export const githubColorTokens = ` +--github-avatar-bgColor: #0d1117; + --github-avatar-borderColor: #f0f6fc1a; + --github-fgColor-accent: #2f81f7; + --github-fgColor-success: #3fb950; + --github-fgColor-done: #bc8cff; + --github-fgColor-onEmphasis: #ffffff; + --github-bgColor-accent-emphasis: #1f6feb; + --github-bgColor-accent-muted: #388bfd26; + --github-bgColor-success-emphasis: #238636; + --github-bgColor-attention-emphasis: #9e6a03; + --github-bgColor-danger-emphasis: #da3633; + --github-bgColor-done-emphasis: #8957e5; + --github-bgColor-neutral-emphasis: #6e7681; + --github-borderColor-accent-emphasis: #1f6feb; + --github-borderColor-attention-emphasis: #9e6a03; + --github-borderColor-success-emphasis: #238636; + --github-borderColor-done-emphasis: #8957e5; + --github-borderColor-emphasis: #6e7681; + --github-button-default-bgColor-active: #30363d; + --github-button-primary-fgColor-accent: #56d364; + --github-button-primary-fgColor-rest: #ffffff; + --github-button-primary-bgColor-rest: var(--github-bgColor-success-emphasis); + --github-button-primary-bgColor-hover: #2ea043; + --github-button-primary-bgColor-active: #238636; + --github-button-primary-borderColor-rest: #f0f6fc1a; + --github-button-primary-borderColor-hover: #f0f6fc1a; + --github-button-danger-fgColor-rest: #ff7b72; + --github-button-danger-fgColor-hover: #ffffff; + --github-button-danger-bgColor-rest: #21262d; + --github-button-danger-bgColor-hover: #da3633; + --github-button-danger-bgColor-active: #b62324; + --github-button-danger-borderColor-hover: #f0f6fc1a; + --github-button-star-iconColor: #d29922; + --github-button-invisible-iconColor-rest: #8b949e; + --github-control-bgColor-rest: #21262d; + --github-control-transparent-bgColor-hover: #30363d; + --github-control-transparent-bgColor-active: #484f58; + --github-control-danger-bgColor-active: #da363326; + --github-controlTrack-bgColor-rest: #161b22; + --github-controlKnob-bgColor-rest: #6e7681; + --github-shadow-floating-small: 0px 0px 0px 1px var(--color-light-border), 0px 8px 24px #01040966; + --github-shadow-inset: inset 0px 1px 0px 0px #f0f6fc0f; + --github-shadow-resting-small: 0px 1px 0px 0px #01040966; + --github-shadow-resting-medium: drop-shadow(0 1px 1px #01040966) drop-shadow(0 3px 6px #01040966); + --github-underlineNav-borderColor-active: #f78166; + --github-contribution-default-bgColor-0: #161b22; + --github-contribution-default-bgColor-1: #0e4429; + --github-contribution-default-bgColor-2: #006d32; + --github-contribution-default-bgColor-3: #26a641; + --github-contribution-default-bgColor-4: #39d353; + --github-contribution-default-bgColor-5: #56d364; + --github-contribution-default-borderColor-0: #f0f6fc1a; + --github-contribution-default-borderColor-1: var(--github-contribution-default-borderColor-0); + --github-contribution-default-borderColor-2: var(--github-contribution-default-borderColor-0); + --github-contribution-default-borderColor-3: var(--github-contribution-default-borderColor-0); + --github-contribution-default-borderColor-4: var(--github-contribution-default-borderColor-0); + --github-contribution-default-borderColor-5: var(--github-contribution-default-borderColor-0); + --github-workflow-card-bg: #161b22; +`.trim(); diff --git a/themes/github-dark/index.ts b/themes/github-dark/index.ts new file mode 100644 index 0000000..099f276 --- /dev/null +++ b/themes/github-dark/index.ts @@ -0,0 +1,25 @@ +import { ansiColorTokens } from "../github-light/ansi-colors"; +import { consoleTokens } from "../github-light/console"; +import { diffColorTokens } from "../github-light/diff-colors"; +import { namedColorTokens } from "../github-light/named-colors"; +import { semanticColorTokens } from "../github-light/semantic-colors"; +import { syntaxColorTokens } from "../github-light/syntax-colors"; +import { coreTokens } from "./core"; +import { githubColorTokens } from "./github-colors"; +import { targetColorTokens } from "./target-colors"; +import { themeMeta } from "./theme-meta"; + +export const githubDarkTheme = { + meta: themeMeta, + root: [ + coreTokens, + consoleTokens, + namedColorTokens, + ansiColorTokens, + diffColorTokens, + semanticColorTokens, + githubColorTokens, + syntaxColorTokens, + targetColorTokens, + ], +}; diff --git a/themes/github-dark/target-colors.ts b/themes/github-dark/target-colors.ts new file mode 100644 index 0000000..288f137 --- /dev/null +++ b/themes/github-dark/target-colors.ts @@ -0,0 +1,80 @@ +export const targetColorTokens = ` +--color-red: #ff7b72; + --color-orange: #ffa657; + --color-yellow: #d29922; + --color-olive: #a5d6ff; + --color-green: #3fb950; + --color-teal: #39c5cf; + --color-blue: #58a6ff; + --color-violet: #a5a6ff; + --color-purple: #bc8cff; + --color-pink: #ff7bba; + --color-brown: #d29922; + --color-black: #010409; + --color-grey: #8b949e; + --color-gold: #d29922; + --color-white: #f0f6fc; + --color-logo: var(--color-primary); + --color-body: #0d1117; + --color-box-header: #161b22; + --color-box-body: #0d1117; + --color-box-body-highlight: #161b22; + --color-text: #e6edf3; + --color-text-light: #c9d1d9; + --color-text-light-1: #8b949e; + --color-text-light-2: #7d8590; + --color-text-light-3: #6e7681; + --color-text-dark: #f0f6fc; + --color-footer: #010409; + --color-timeline: #30363d; + --color-input-text: var(--color-text); + --color-input-background: #0d1117; + --color-input-toggle-background: #161b22; + --color-input-border: var(--color-light-border); + --color-light: #161b22; + --color-light-border: #30363d; + --color-hover: #21262d; + --color-hover-opaque: #21262d; + --color-active: #30363d; + --color-menu: #161b22; + --color-card: #161b22; + --color-markup-table-row: #161b22; + --color-markup-code-block: #161b22; + --color-markup-code-inline: #6e768166; + --color-button: #21262d; + --color-code-bg: #161b22; + --color-shadow: #01040999; + --color-shadow-opaque: #010409; + --color-expand-button: #1f6feb; + --color-placeholder-text: var(--color-text-light-3); + --color-editor-line-highlight: #161b22; + --color-editor-selection: #2f81f766; + --color-project-column-bg: #161b22; + --color-caret: var(--color-text-dark); + --color-reaction-bg: #6e768126; + --color-reaction-hover-bg: #1f6feb26; + --color-reaction-active-bg: #1f6feb26; + --color-tooltip-text: #f0f6fc; + --color-tooltip-bg: #161b22; + --color-nav-bg: #010409; + --color-nav-hover-bg: #21262d; + --color-nav-text: var(--color-text); + --color-label-text: var(--color-text); + --color-label-bg: #6e768126; + --color-label-hover-bg: #6e768166; + --color-label-active-bg: var(--color-label-hover-bg); + --color-accent: var(--color-primary); + --color-small-accent: var(--color-primary-light-4); + --color-highlight-fg: #d29922; + --color-highlight-bg: #bb800926; + --color-overlay-backdrop: #010409cc; + --color-danger: var(--color-red); + --color-transparency-grid-light: #21262d; + --color-transparency-grid-dark: #0d1117; + --color-workflow-edge-hover: #58a6ff; + --border-radius: 6px; + --color-git: #f05133; + --checkbox-size: 14px; + accent-color: var(--color-accent); + color-scheme: dark; +`.trim(); diff --git a/themes/github-dark/theme-meta.ts b/themes/github-dark/theme-meta.ts new file mode 100644 index 0000000..2d7689d --- /dev/null +++ b/themes/github-dark/theme-meta.ts @@ -0,0 +1,6 @@ +export const themeMeta = ` +gitea-theme-meta-info { + --theme-display-name: "GitHub Dark"; + --theme-color-scheme: "dark"; +} +`.trim(); diff --git a/themes/index.ts b/themes/index.ts index 8662808..be3f11c 100644 --- a/themes/index.ts +++ b/themes/index.ts @@ -1,2 +1,3 @@ export { githubLightTheme } from "./github-light"; +export { githubDarkTheme } from "./github-dark"; export { githubLightTheme as currentTheme } from "./github-light";