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

github 主题

Browse Source
This commit is contained in:
lutinglt
2025-07-02 13:21:12 +08:00
parent 0a353fd572
commit 1cc9b20ffd
9 changed files with 292 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/core/color.ts
View File

@@ -4,7 +4,7 @@ import type { Ansi, Console, Diff, Github, Message, Named, Other, Primary, Secon
import { themeVars } from "src/types/vars";
import type { Theme } from "./theme";
interface ColorTheme {
type ThemeColor = {
/** 用于标识当前是否为暗色主题: `true` 暗色 `false` 亮色 */
isDarkTheme: boolean;
/** 主色调(强调色) */
@@ -53,7 +53,7 @@ interface ColorTheme {
other: Other;
/** 仅适用于本主题的全局变量, 取自 Github */
github: Github;
}
};
/** 定义颜色, 用于生成颜色主题
* @example
@@ -80,7 +80,7 @@ interface ColorTheme {
* other,
* })
*/
export function defineTheme(theme: ColorTheme): Theme {
export function defineTheme(theme: ThemeColor): Theme {
const lighten = theme.isDarkTheme ? -1 : 1;
const primary: Primary = {

258
src/core/github.ts Normal file
View File

@@ -0,0 +1,258 @@
import type { Console, Diff, Other } from "src";
import { themeVars } from "src/types/vars";
import { defineTheme } from "./color";
import type { Theme } from "./theme";
export type GithubColor = {
isDarkTheme: boolean;
display: {
brown: { fgColor: string };
cyan: { fgColor: string };
indigo: { fgColor: string };
lemon: { fgColor: string };
olive: { fgColor: string };
teal: { fgColor: string };
};
diffBlob: {
addtionNum: { bgColor: string };
addtionWord: { bgColor: string };
deletionNum: { bgColor: string };
deletionWord: { bgColor: string };
hunkNum: { bgColor: { rest: string } };
};
fgColor: {
accent: string;
attention: string;
danger: string;
default: string;
disabled: string;
done: string;
neutral: string;
severe: string;
sponsors: string;
success: string;
black: string;
white: string;
muted: string;
};
bgColor: {
accent: {
emphasis: string;
muted: string;
};
attention: {
muted: string;
};
success: {
muted: string;
};
danger: {
muted: string;
};
default: string;
inset: string;
muted: string;
neutral: {
muted: string;
};
};
borderColor: {
default: string;
muted: string;
};
control: {
bgColor: {
active: string;
hover: string;
rest: string;
};
transparent: {
bgColor: {
active: string;
hover: string;
selected: string;
};
};
};
shadow: {
floating: string;
};
}
export function defineGithubTheme(github: GithubColor): Theme {
const console: Console = {
fg: {
self: github.fgColor.default,
subtle: github.fgColor.muted,
},
bg: github.bgColor.inset,
border: github.borderColor.muted,
activeBg: github.control.bgColor.active,
hoverBg: github.control.transparent.bgColor.hover,
menu: {
bg: github.bgColor.inset,
border: github.borderColor.muted,
},
};
const diff: Diff = {
added: {
linenum: {
bg: github.diffBlob.addtionNum.bgColor,
},
row: {
bg: github.bgColor.success.muted,
border: github.bgColor.success.muted,
},
word: {
bg: github.diffBlob.addtionWord.bgColor,
},
},
removed: {
linenum: {
bg: github.diffBlob.deletionNum.bgColor,
},
row: {
bg: github.bgColor.danger.muted,
border: github.bgColor.danger.muted,
},
word: {
bg: github.diffBlob.deletionWord.bgColor,
},
},
moved: {
row: {
bg: github.bgColor.attention.muted,
border: github.bgColor.attention.muted,
},
},
inactive: github.bgColor.muted,
};
const other: Other = {
body: github.bgColor.default,
box: {
header: github.bgColor.muted,
body: {
self: themeVars.color.body,
highlight: github.bgColor.accent.muted,
},
},
text: {
self: github.fgColor.default,
light: {
self: github.fgColor.default,
num1: github.fgColor.muted,
num2: github.fgColor.muted,
num3: github.fgColor.muted,
},
dark: github.fgColor.default,
},
footer: github.bgColor.inset,
timeline: github.borderColor.muted,
input: {
text: themeVars.color.text.self,
background: themeVars.color.body,
toggleBackgound: themeVars.color.body,
border: {
self: themeVars.color.light.border,
hover: themeVars.color.light.border,
},
},
light: {
self: themeVars.color.body,
border: github.borderColor.default,
},
hover: {
self: github.control.bgColor.hover,
opaque: themeVars.color.box.header,
},
active: github.control.transparent.bgColor.selected,
menu: github.bgColor.inset,
card: themeVars.color.body,
markup: {
tableRow: github.bgColor.muted,
code: {
block: github.bgColor.muted,
inline: github.bgColor.neutral.muted,
},
},
button: github.control.bgColor.rest,
codeBg: "unset",
shadow: {
self: github.shadow.floating,
opaque: themeVars.color.shadow.self,
},
secondaryBg: "unset",
expandButton: github.diffBlob.hunkNum.bgColor.rest,
placeholderText: themeVars.color.text.light.num3,
editorLineHighlight: themeVars.color.primary.light.num5,
projectColumnBg: github.bgColor.inset,
caret: themeVars.color.text.dark,
reaction: {
bg: "initial",
hoverBg: github.bgColor.accent.muted,
activeBg: github.bgColor.accent.muted,
},
tooltip: {
text: github.fgColor.default,
bg: github.bgColor.default,
},
nav: {
bg: github.bgColor.inset,
hoverBg: github.control.transparent.bgColor.hover,
text: themeVars.color.text.self,
},
secondaryNavBg: themeVars.color.nav.bg,
label: {
text: themeVars.color.text.self,
bg: github.bgColor.neutral.muted,
hoverBg: github.control.transparent.bgColor.active,
activeBg: themeVars.color.label.hoverBg,
},
accent: themeVars.color.primary.light.num1,
smallAccent: themeVars.color.primary.light.num5,
highlight: {
fg: github.fgColor.attention,
bg: github.bgColor.attention.muted,
},
overlayBackdrop: themeVars.color.body,
};
return defineTheme({
isDarkTheme: github.isDarkTheme,
primary: github.fgColor.accent,
primaryContrast: github.fgColor.default,
secondary: github.borderColor.default,
red: github.fgColor.danger,
orange: github.fgColor.severe,
yellow: github.fgColor.attention,
olive: github.display.olive.fgColor,
green: github.fgColor.success,
cyan: github.display.cyan.fgColor,
teal: github.display.teal.fgColor,
blue: github.fgColor.accent,
violet: github.display.indigo.fgColor,
purple: github.fgColor.done,
pink: github.fgColor.sponsors,
brown: github.display.brown.fgColor,
black: github.fgColor.black,
grey: github.fgColor.neutral,
gold: github.display.lemon.fgColor,
white: github.fgColor.white,
console,
diff,
other,
github: {
fgColor: {
accent: github.fgColor.accent,
default: github.fgColor.default,
muted: github.fgColor.muted,
},
bgColor: {
accent: {
emphasis: github.bgColor.accent.emphasis,
},
},
},
});
}

6
src/core/theme.ts
View File

@@ -16,6 +16,12 @@ function stringToBoolean(str: string, name: string): boolean {
export function createTheme(theme: Theme): void {
createGlobalTheme(":root", themeVars, theme);
createGlobalTheme(":root", otherThemeVars, {
git: "#f05133",
light: {
mimicEnabled: theme.isDarkTheme
? "rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)))"
: "rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)))",
},
border: {
radius: "6px",
},

7
src/types/color/diff.ts
View File

@@ -4,20 +4,27 @@ const row = {
};
const line = {
/** 行号 */
linenum: {
bg: null,
},
/** 代码行 */
row: row,
/** 代码 */
word: {
bg: null,
},
};
export const diff = {
/** 添加 */
added: line,
/** 移动 */
moved: {
row: row,
},
/** 删除 */
removed: line,
/** 对比空白部分背景色 */
inactive: null,
};

4
src/types/color/github.ts
View File

@@ -2,7 +2,7 @@ export const github = {
/** 用于 color 属性的颜色 */
fgColor: {
/** 强调色
* @actions 右侧日志标题颜色
* @actions `actionViewRight` 右侧日志标题颜色
*/
accent: null,
/** 默认的文本颜色
@@ -19,7 +19,7 @@ export const github = {
accent: {
/** 强调色
* @diff 折叠/展开按钮的悬停颜色
* @actions 左侧子作业激活伪元素颜色
* @actions `actionViewLeft` 左侧子作业激活伪元素颜色
*/
emphasis: null,
},

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

@@ -4,4 +4,4 @@ export { github } from "./github";
export { primary, secondary } from "./main";
export { message } from "./message";
export { named } from "./named";
export { other } from "./other";
export { other, otherAuto } from "./other";

11
src/types/color/other.ts
View File

@@ -1,6 +1,13 @@
export const other = {
export const otherAuto= {
/** 未知 */
git: null,
light: {
/** 不知道什么用, gitea css 中没有使用这个属性的 */
mimicEnabled: "color-light-mimic-enabled",
},
}
export const other = {
/** 主要背景色 */
body: null,
/** 页面底部状态栏背景色 */
@@ -50,8 +57,6 @@ export const other = {
light: {
/** 多行下交替行的强调色, 例提交历史 */
self: null,
/** 不知道什么用, gitea css 中没有使用这个属性的 */
mimicEnabled: "color-light-mimic-enabled",
/** 基础按钮/标签的边框色 */
border: null,
},

1
src/types/vars.ts
View File

@@ -30,6 +30,7 @@ const otherVars = {
border: {
radius: null,
},
...color.otherAuto,
};
export const themeVars = createGlobalThemeContract(vars, varMapper);

191
themes/dark.css.tsx
View File

@@ -1,9 +1,7 @@
import type { Console, Diff, Other } from "src";
import { defineTheme, themeVars } from "src";
import { defineGithubTheme, type GithubColor } from "src/core/github";
const isDarkTheme = true;
const github = {
const github: GithubColor = {
isDarkTheme: true,
display: {
brown: { fgColor: "#b69a6d" },
cyan: { fgColor: "#07ace4" },
@@ -53,7 +51,7 @@ const github = {
muted: "#151b23",
neutral: {
muted: "#656c7633",
}
},
},
borderColor: {
default: "#3d444d",
@@ -74,185 +72,8 @@ const github = {
},
},
shadow: {
floating: "#01040966"
}
};
const console: Console = {
fg: {
self: github.fgColor.default,
subtle: github.fgColor.muted,
},
bg: github.bgColor.inset,
border: github.borderColor.muted,
activeBg: github.control.bgColor.active,
hoverBg: github.control.transparent.bgColor.hover,
menu: {
bg: github.bgColor.inset,
border: github.borderColor.muted,
floating: "#01040966",
},
};
const diff: Diff = {
added: {
linenum: {
bg: github.diffBlob.addtionNum.bgColor,
},
row: {
bg: github.bgColor.success.muted,
border: github.bgColor.success.muted,
},
word: {
bg: github.diffBlob.addtionWord.bgColor,
},
},
removed: {
linenum: {
bg: github.diffBlob.deletionNum.bgColor,
},
row: {
bg: github.bgColor.danger.muted,
border: github.bgColor.danger.muted,
},
word: {
bg: github.diffBlob.deletionWord.bgColor,
},
},
moved: {
row: {
bg: github.bgColor.attention.muted,
border: github.bgColor.attention.muted,
},
},
inactive: github.bgColor.muted,
};
const other: Other = {
git: "#f05133",
body: github.bgColor.default,
box: {
header: github.bgColor.muted,
body: {
self: themeVars.color.body,
highlight: github.bgColor.accent.muted,
},
},
text: {
self: github.fgColor.default,
light: {
self: github.fgColor.default,
num1: github.fgColor.muted,
num2: github.fgColor.muted,
num3: github.fgColor.muted,
},
dark: github.fgColor.default,
},
footer: github.bgColor.inset,
timeline: github.borderColor.muted,
input: {
text: themeVars.color.text.self,
background: themeVars.color.body,
toggleBackgound: themeVars.color.body,
border: {
self: themeVars.color.light.border,
hover: themeVars.color.light.border,
},
},
light: {
self: themeVars.color.body,
mimicEnabled: "rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)))",
border: github.borderColor.default,
},
hover: {
self: github.control.bgColor.hover,
opaque: themeVars.color.box.header,
},
active: github.control.transparent.bgColor.selected,
menu: github.bgColor.inset,
card: themeVars.color.body,
markup: {
tableRow: github.bgColor.muted,
code: {
block: github.bgColor.muted,
inline: github.bgColor.neutral.muted,
},
},
button: github.control.bgColor.rest,
codeBg: "unset",
shadow: {
self: github.shadow.floating,
opaque: themeVars.color.shadow.self,
},
secondaryBg: "unset",
expandButton: github.diffBlob.hunkNum.bgColor.rest,
placeholderText: themeVars.color.text.light.num3,
editorLineHighlight: themeVars.color.primary.light.num5,
projectColumnBg: github.bgColor.inset,
caret: themeVars.color.text.dark,
reaction: {
bg: "initial",
hoverBg: github.bgColor.accent.muted,
activeBg: github.bgColor.accent.muted,
},
tooltip: {
text: github.fgColor.default,
bg: github.bgColor.default,
},
nav: {
bg: github.bgColor.inset,
hoverBg: github.control.transparent.bgColor.hover,
text: themeVars.color.text.self,
},
secondaryNavBg: themeVars.color.nav.bg,
label: {
text: themeVars.color.text.self,
bg: github.bgColor.neutral.muted,
hoverBg: github.control.transparent.bgColor.active,
activeBg: themeVars.color.label.hoverBg,
},
accent: themeVars.color.primary.light.num1,
smallAccent: themeVars.color.primary.light.num5,
highlight: {
fg: github.fgColor.attention,
bg: github.bgColor.attention.muted,
},
overlayBackdrop: themeVars.color.body,
};
export default defineTheme({
isDarkTheme,
primary: github.fgColor.accent,
primaryContrast: github.fgColor.default,
secondary: github.borderColor.default,
red: github.fgColor.danger,
orange: github.fgColor.severe,
yellow: github.fgColor.attention,
olive: github.display.olive.fgColor,
green: github.fgColor.success,
cyan: github.display.cyan.fgColor,
teal: github.display.teal.fgColor,
blue: github.fgColor.accent,
violet: github.display.indigo.fgColor,
purple: github.fgColor.done,
pink: github.fgColor.sponsors,
brown: github.display.brown.fgColor,
black: github.fgColor.black,
grey: github.fgColor.neutral,
gold: github.display.lemon.fgColor,
white: github.fgColor.white,
console,
diff,
other,
github: {
fgColor: {
accent: github.fgColor.accent,
default: github.fgColor.default,
muted: github.fgColor.muted,
},
bgColor: {
accent: {
emphasis: github.bgColor.accent.emphasis,
},
},
},
});
export default defineGithubTheme(github);