feat: 添加支持 GitHub Dark 主题,更新构建和验证流程
This commit is contained in:
@@ -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 模式。
|
||||
|
||||
+2
-2
@@ -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
|
||||
|
||||
@@ -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 内包含迁移后的变量和组件规则。
|
||||
|
||||
+4
-4
@@ -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` 停止容器。
|
||||
|
||||
|
||||
+28
-18
@@ -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();
|
||||
|
||||
@@ -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}`);
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -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"),
|
||||
|
||||
+8
-2
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
@@ -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();
|
||||
@@ -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,
|
||||
],
|
||||
};
|
||||
@@ -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();
|
||||
@@ -0,0 +1,6 @@
|
||||
export const themeMeta = `
|
||||
gitea-theme-meta-info {
|
||||
--theme-display-name: "GitHub Dark";
|
||||
--theme-color-scheme: "dark";
|
||||
}
|
||||
`.trim();
|
||||
@@ -1,2 +1,3 @@
|
||||
export { githubLightTheme } from "./github-light";
|
||||
export { githubDarkTheme } from "./github-dark";
|
||||
export { githubLightTheme as currentTheme } from "./github-light";
|
||||
|
||||
Reference in New Issue
Block a user