sky/gitea-github-theme
1
0
Fork 0
mirror of https://github.com/lutinglt/gitea-github-theme.git synced 2025-10-27 13:40:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

提取 github 变量

Browse Source
This commit is contained in:
lutinglt
2025-06-28 19:36:06 +08:00
parent a8bcd45791
commit df6eb8fef8
8 changed files with 103 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
scripts/version.cjs
View File

@@ -1,7 +1,7 @@
const fs = require('fs'); const fs = require("fs");
const path = require('path'); const path = require("path");
const pkgPath = path.join(__dirname, '..', 'package.json'); const pkgPath = path.join(__dirname, "..", "package.json");
const pkg = JSON.parse(fs.readFileSync(pkgPath)); const pkg = JSON.parse(fs.readFileSync(pkgPath));
const version = pkg.version; const version = pkg.version;

81
src/core/color.ts
View File

@@ -1,6 +1,6 @@
import { rgba } from "polished"; import { rgba } from "polished";
import { scaleColorLight } from "src/functions"; import { scaleColorLight } from "src/functions";
import type { Ansi, Other, Console, Diff, Message, Named, Primary, Secondary } from "src/types"; import type { Ansi, Console, Diff, Message, Named, Other, Primary, Secondary } from "src/types";
import { themeVars } from "src/types/vars"; import { themeVars } from "src/types/vars";
import type { Theme } from "./theme"; import type { Theme } from "./theme";
@@ -23,8 +23,10 @@ interface ColorTheme {
olive: string; olive: string;
/** 绿色 */ /** 绿色 */
green: string; green: string;
/** 蓝绿色/青色 */ /** 蓝绿色/青色(偏绿) */
teal: string; teal: string;
/** 蓝绿色/青色(偏蓝) */
cyan: string;
/** 蓝色 */ /** 蓝色 */
blue: string; blue: string;
/** 蓝紫色/紫罗兰色 */ /** 蓝紫色/紫罗兰色 */
@@ -66,6 +68,7 @@ interface ColorTheme {
* ... * ...
* } * }
* ... * ...
* // 会经过 lightningcss 打包处理生成最终的 CSS
* export default defineTheme({ * export default defineTheme({
* isDarkTheme: true, * isDarkTheme: true,
* primary: "#0969da", * primary: "#0969da",
@@ -82,22 +85,22 @@ export function defineTheme(theme: ColorTheme): Theme {
self: theme.primary, self: theme.primary,
contrast: theme.primaryContrast, contrast: theme.primaryContrast,
dark: { dark: {
num1: scaleColorLight(theme.primary, -3 * lighten), num1: scaleColorLight(theme.primary, -12 * lighten),
num2: scaleColorLight(theme.primary, -6 * lighten), num2: scaleColorLight(theme.primary, -24 * lighten),
num3: scaleColorLight(theme.primary, -9 * lighten), num3: scaleColorLight(theme.primary, -36 * lighten),
num4: scaleColorLight(theme.primary, -12 * lighten), num4: scaleColorLight(theme.primary, -48 * lighten),
num5: scaleColorLight(theme.primary, -15 * lighten), num5: scaleColorLight(theme.primary, -60 * lighten),
num6: scaleColorLight(theme.primary, -18 * lighten), num6: scaleColorLight(theme.primary, -72 * lighten),
num7: scaleColorLight(theme.primary, -21 * lighten), num7: scaleColorLight(theme.primary, -84 * lighten),
}, },
light: { light: {
num1: scaleColorLight(theme.primary, 3 * lighten), num1: scaleColorLight(theme.primary, 12 * lighten),
num2: scaleColorLight(theme.primary, 6 * lighten), num2: scaleColorLight(theme.primary, 24 * lighten),
num3: scaleColorLight(theme.primary, 9 * lighten), num3: scaleColorLight(theme.primary, 36 * lighten),
num4: scaleColorLight(theme.primary, 12 * lighten), num4: scaleColorLight(theme.primary, 48 * lighten),
num5: scaleColorLight(theme.primary, 15 * lighten), num5: scaleColorLight(theme.primary, 60 * lighten),
num6: scaleColorLight(theme.primary, 18 * lighten), num6: scaleColorLight(theme.primary, 72 * lighten),
num7: scaleColorLight(theme.primary, 21 * lighten), num7: scaleColorLight(theme.primary, 84 * lighten),
}, },
alpha: { alpha: {
num10: rgba(theme.primary, 0.1), num10: rgba(theme.primary, 0.1),
@@ -117,25 +120,25 @@ export function defineTheme(theme: ColorTheme): Theme {
const secondary: Secondary = { const secondary: Secondary = {
self: theme.secondary, self: theme.secondary,
dark: { dark: {
num1: scaleColorLight(theme.secondary, -3 * lighten), num1: scaleColorLight(theme.secondary, -6 * lighten),
num2: scaleColorLight(theme.secondary, -6 * lighten), num2: scaleColorLight(theme.secondary, -12 * lighten),
num3: scaleColorLight(theme.secondary, -9 * lighten), num3: scaleColorLight(theme.secondary, -18 * lighten),
num4: scaleColorLight(theme.secondary, -12 * lighten), num4: scaleColorLight(theme.secondary, -24 * lighten),
num5: scaleColorLight(theme.secondary, -15 * lighten), num5: scaleColorLight(theme.secondary, -30 * lighten),
num6: scaleColorLight(theme.secondary, -18 * lighten), num6: scaleColorLight(theme.secondary, -36 * lighten),
num7: scaleColorLight(theme.secondary, -21 * lighten), num7: scaleColorLight(theme.secondary, -42 * lighten),
num8: scaleColorLight(theme.secondary, -24 * lighten), num8: scaleColorLight(theme.secondary, -48 * lighten),
num9: scaleColorLight(theme.secondary, -27 * lighten), num9: scaleColorLight(theme.secondary, -54 * lighten),
num10: scaleColorLight(theme.secondary, -30 * lighten), num10: scaleColorLight(theme.secondary, -60 * lighten),
num11: scaleColorLight(theme.secondary, -33 * lighten), num11: scaleColorLight(theme.secondary, -66 * lighten),
num12: scaleColorLight(theme.secondary, -36 * lighten), num12: scaleColorLight(theme.secondary, -72 * lighten),
num13: scaleColorLight(theme.secondary, -39 * lighten), num13: scaleColorLight(theme.secondary, -80 * lighten),
}, },
light: { light: {
num1: scaleColorLight(theme.secondary, 3 * lighten), num1: scaleColorLight(theme.secondary, 18 * lighten),
num2: scaleColorLight(theme.secondary, 6 * lighten), num2: scaleColorLight(theme.secondary, 36 * lighten),
num3: scaleColorLight(theme.secondary, 9 * lighten), num3: scaleColorLight(theme.secondary, 54 * lighten),
num4: scaleColorLight(theme.secondary, 12 * lighten), num4: scaleColorLight(theme.secondary, 72 * lighten),
}, },
alpha: { alpha: {
num10: rgba(theme.secondary, 0.1), num10: rgba(theme.secondary, 0.1),
@@ -293,22 +296,22 @@ export function defineTheme(theme: ColorTheme): Theme {
active: rgba(theme.red, 0.5), active: rgba(theme.red, 0.5),
hover: rgba(theme.red, 0.3), hover: rgba(theme.red, 0.3),
}, },
border: scaleColorLight(theme.red, 20 * lighten), border: rgba(theme.red, 0.4),
text: theme.red, text: theme.red,
}, },
success: { success: {
bg: rgba(theme.green, 0.1), bg: rgba(theme.green, 0.1),
border: scaleColorLight(theme.green, 20 * lighten), border: rgba(theme.green, 0.4),
text: theme.green, text: theme.green,
}, },
warning: { warning: {
bg: rgba(theme.yellow, 0.1), bg: rgba(theme.yellow, 0.1),
border: scaleColorLight(theme.yellow, 20 * lighten), border: rgba(theme.yellow, 0.4),
text: theme.yellow, text: theme.yellow,
}, },
info: { info: {
bg: rgba(theme.blue, 0.1), bg: rgba(theme.blue, 0.1),
border: scaleColorLight(theme.blue, 20 * lighten), border: rgba(theme.blue, 0.4),
text: theme.blue, text: theme.blue,
}, },
}; };
@@ -320,7 +323,7 @@ export function defineTheme(theme: ColorTheme): Theme {
yellow: themeVars.color.yellow.self, yellow: themeVars.color.yellow.self,
blue: themeVars.color.blue.self, blue: themeVars.color.blue.self,
magenta: themeVars.color.pink.self, magenta: themeVars.color.pink.self,
cyan: themeVars.color.teal.self, cyan: theme.cyan,
white: themeVars.color.console.fg.subtle, white: themeVars.color.console.fg.subtle,
bright: { bright: {
black: themeVars.color.black.light, black: themeVars.color.black.light,
@@ -329,7 +332,7 @@ export function defineTheme(theme: ColorTheme): Theme {
yellow: themeVars.color.yellow.light, yellow: themeVars.color.yellow.light,
blue: themeVars.color.blue.light, blue: themeVars.color.blue.light,
magenta: themeVars.color.pink.light, magenta: themeVars.color.pink.light,
cyan: themeVars.color.teal.light, cyan: theme.isDarkTheme ? scaleColorLight(theme.cyan, 10) : scaleColorLight(theme.cyan, 25),
white: themeVars.color.console.fg.self, white: themeVars.color.console.fg.self,
}, },
}; };

2
src/core/vite.ts
View File

@@ -4,7 +4,7 @@ import fs from "node:fs";
import path from "node:path"; import path from "node:path";
import type { Plugin } from "vite"; import type { Plugin } from "vite";
const suffix = ".css.tsx" const suffix = ".css.tsx";
/** /**
* 生成主题输入 * 生成主题输入

2
src/index.ts
View File

@@ -1,4 +1,4 @@
export { css } from "@linaria/core"; export { css } from "@linaria/core";
export { defineTheme } from "./core/color"; export { defineTheme } from "./core/color";
export type { Other, Console, Diff } from "./types"; export type { Console, Diff, Other } from "./types";
export { themeVars } from "./types/vars"; export { themeVars } from "./types/vars";

2
src/types/color/index.ts
View File

@@ -1,6 +1,6 @@
export { other } from "./other";
export { ansi, console } from "./console"; export { ansi, console } from "./console";
export { diff } from "./diff"; export { diff } from "./diff";
export { primary, secondary } from "./main"; export { primary, secondary } from "./main";
export { message } from "./message"; export { message } from "./message";
export { named } from "./named"; export { named } from "./named";
export { other } from "./other";

73
themes/dark.css.tsx
View File

@@ -1,12 +1,40 @@
import type { Other, Console, Diff } from "src"; import type { Console, Diff, Other } from "src";
import { defineTheme, themeVars } from "src"; import { defineTheme, themeVars } from "src";
const github = {
display: {
brown: { fgColor: "#b69a6d" },
cyan: { fgColor: "#07ace4" },
indigo: { fgColor: "#9899ec" },
lemon: { fgColor: "#ba9b12" },
olive: { fgColor: "#a2a626" },
teal: { fgColor: "#1cb0ab" },
},
fgColor: {
accent: "#4493f8",
attention: "#d29922",
danger: "#f85149",
default: "#f0f6fc",
disabled: "#656c7699",
done: "#ab7df8",
neutral: "#9198a1",
severe: "#db6d28",
sponsors: "#db61a2",
success: "#3fb950",
black: "#010409",
white: "#ffffff",
},
bgColor: {
black: "#010409",
},
};
const console: Console = { const console: Console = {
fg: { fg: {
self: "#f0f6fc", self: "#f0f6fc",
subtle: "#9198a1", subtle: "#9198a1",
}, },
bg: "#010409", bg: github.bgColor.black,
border: "#2b3139", border: "#2b3139",
activeBg: "#2a313c", activeBg: "#2a313c",
hoverBg: "#15191f", hoverBg: "#15191f",
@@ -70,7 +98,7 @@ const other: Other = {
num3: "#707687", num3: "#707687",
}, },
}, },
footer: "#010409", footer: github.bgColor.black,
timeline: "#4c525e", timeline: "#4c525e",
input: { input: {
text: "#d5dbe6", text: "#d5dbe6",
@@ -122,11 +150,11 @@ const other: Other = {
bg: "#000000f0", bg: "#000000f0",
}, },
nav: { nav: {
bg: "#010409", bg: github.bgColor.black,
hoverBg: themeVars.color.hover.self, hoverBg: themeVars.color.hover.self,
text: themeVars.color.text.self, text: themeVars.color.text.self,
}, },
secondaryNavBg: "#181c20", secondaryNavBg: themeVars.color.nav.bg,
label: { label: {
text: "#fff", text: "#fff",
bg: "#7c84974b", bg: "#7c84974b",
@@ -144,24 +172,25 @@ const other: Other = {
export default defineTheme({ export default defineTheme({
isDarkTheme: true, isDarkTheme: true,
primary: "#4493f8", primary: github.fgColor.accent,
primaryContrast: "#fff", primaryContrast: github.fgColor.default,
secondary: "#3d444d", secondary: "#3d444d",
red: "#da3737", red: github.fgColor.danger,
orange: "#f17a2b", orange: github.fgColor.severe,
yellow: "#f3c640", yellow: github.fgColor.attention,
olive: "#c8df36", olive: github.display.olive.fgColor,
green: "#39d353", green: github.fgColor.success,
teal: "#69d4cf", cyan: github.display.cyan.fgColor,
blue: "#4493f8", teal: github.display.teal.fgColor,
violet: "#754ad3", blue: github.fgColor.accent,
purple: "#8957e5", violet: github.display.indigo.fgColor,
pink: "#e04b9f", purple: github.fgColor.done,
brown: "#a86d45", pink: github.fgColor.sponsors,
black: "#141516", brown: github.display.brown.fgColor,
grey: "#505665", black: github.fgColor.black,
gold: "#b1983b", grey: github.fgColor.neutral,
white: "#ffffff", gold: github.display.lemon.fgColor,
white: github.fgColor.white,
console, console,
diff, diff,
other, other,