update md

This commit is contained in:
lutinglt
2025-08-11 09:26:10 +08:00
parent 1d8dfdb82b
commit ffbfccd7dc
6 changed files with 24 additions and 14 deletions

View File

@@ -98,6 +98,8 @@ npm run commit
推荐使用 `import { defineTheme } from "src"` 导入主题生成框架, 然后使用 `defineTheme` 函数生成主题, 推荐使用 `import { defineTheme } from "src"` 导入主题生成框架, 然后使用 `defineTheme` 函数生成主题,
defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工作量, 具体请查看函数说明. defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工作量, 具体请查看函数说明.
颜色计算函数可以从 `src/functions` 导入, 例如 `import { scaleColorLight } from "src/functions"`, 或者使用 `polished` 库.
例: `themes/主题名称-dark.css.ts` 例: `themes/主题名称-dark.css.ts`
```ts ```ts
@@ -119,7 +121,7 @@ export default defineTheme({
如果不需要自定义代码高亮色, 则不传递 chroma 参数, 框架会自动根据主题的暗色或亮色生成代码高亮色. 如果不需要自定义代码高亮色, 则不传递 chroma 参数, 框架会自动根据主题的暗色或亮色生成代码高亮色.
如果需要完全自定义每个 Gitea 变量, 请导入 `import { Theme } from "src/theme"` 如果需要完全自定义每个 Gitea 变量, 请导入 `import type { Theme } from "src"`
例: `themes/主题名称-dark.css.ts` 例: `themes/主题名称-dark.css.ts`
@@ -128,7 +130,7 @@ export default defineTheme({
* @author 你的名字 * @author 你的名字
* @description 主题描述 * @description 主题描述
*/ */
import { Theme } from "src"; import type { Theme } from "src";
export default theme: Theme = { export default theme: Theme = {
... ...
}; };
@@ -141,14 +143,14 @@ export default theme: Theme = {
## 主题样式贡献 ## 主题样式贡献
主题样式使用 TypeScript 的 css 模板字符串开发, 该模板字符串会经过 sass 预处理器处理, 支持 SCSS 语法并且本主题只接受 SCSS 嵌套语法, 请不要使用 CSS 语法, 如果一定要用请说明原因. 主题样式使用 TypeScript 的 css 模板字符串开发, 该模板字符串会经过 sass 预处理器处理, 支持 SCSS 语法并且本主题只接受 SCSS 嵌套语法, 请不要使用 CSS 语法, 如果一定要用请说明原因.
请尽量不要使用 SCSS 的函数, `vscode-styled-components` 插件会报错, 请使用 TypeScript 相关库处理, 比如本主题自带的 请尽量不要使用 SCSS 的函数, `vscode-styled-components` 插件会报错, 请使用 TypeScript 相关库处理, 比如本主题自带的
`polished` 库. `polished` 库.
推荐需要使用复杂处理时, 提取逻辑到 `src/functions` 目录下的函数中, 然后在 `src/styles` 目录下的样式文件中使用. 推荐需要使用复杂处理时, 提取逻辑到 `src/functions` 目录下的函数中, 然后在 `src/styles` 目录下的样式文件中使用.
主题样式中使用到的所有颜色必须使用颜色变量, 颜色变量导入 `import { themeVars } from "src/types"` 主题样式中使用到的所有颜色必须使用颜色变量, 颜色变量导入 `import { themeVars } from "src/types/vars"`
涉及到本主题的颜色变量 `${themeVars.github.xxx}`, 在使用时请将使用的文件和变量添加到对应变量的注释中 涉及到本主题的颜色变量 `${themeVars.github.xxx}`, 在使用时请将使用的文件和变量添加到对应变量的注释中
`src/types/color/github` `src/types/color/github`

View File

@@ -9,15 +9,15 @@
## 版本号说明 ## 版本号说明
主题版本号格式: `Gitea 版本号.时间戳` 主题版本号格式: `Gitea 版本号.时间戳`
Gitea 版本号格式: `1.大版本号.小版本号` Gitea 版本号格式: `1.大版本号.小版本号`
Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版本号适用于所有 Gitea 大版本号相同的 Gitea 版本. Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版本号适用于所有 Gitea 大版本号相同的 Gitea 版本.
比如: 主题版本 `1.24.4` 适用于 Gitea 版本 `>=1.24.0` ~ `<1.25.0` 比如: 主题版本 `1.24.4` 适用于 Gitea 版本 `>=1.24.0` ~ `<1.25.0`
本主题仅维护本主题发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR. 仅维护项目发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR.
## 安装 ## 安装

View File

@@ -59,7 +59,7 @@ type ThemeColor = {
/** 定义颜色, 用于生成颜色主题 /** 定义颜色, 用于生成颜色主题
* @example * @example
* 文件名: "dark.css.ts" * 文件名: "dark.css.ts"
* import type { Console, Diff, Other } from "src/types"; * import type { Console, Diff, Other, Github } from "src/types";
* import { defineTheme, themeVars } from "src"; * import { defineTheme, themeVars } from "src";
* *
* const console: Console = { * const console: Console = {
@@ -78,6 +78,7 @@ type ThemeColor = {
* console, * console,
* diff, * diff,
* other, * other,
* github,
* }) * })
*/ */
export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null): Theme { export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null): Theme {

View File

@@ -1,6 +1,12 @@
import type { CSSVarFunction } from "src/core/types"; import type { CSSVarFunction } from "src/core/types";
type CSSFallbackVar = `var(--${string}, ${string})`; type CSSFallbackVar = `var(--${string}, ${string})`;
/**
* 设置 CSS 变量的回退值
* @param cssvar `var(--${string})`
* @param fallback
* @returns `var(--${string}, fallback)`
*/
export function fallbackVar(cssvar: CSSVarFunction, fallback: string): CSSFallbackVar { export function fallbackVar(cssvar: CSSVarFunction, fallback: string): CSSFallbackVar {
const var_name = cssvar.replace("var(--", "").replace(")", ""); const var_name = cssvar.replace("var(--", "").replace(")", "");
return `var(--${var_name}, ${fallback})`; return `var(--${var_name}, ${fallback})`;

View File

@@ -1,3 +1,4 @@
export { defineTheme } from "./core/color"; export { defineTheme } from "./core/color";
export type { Chroma, Console, Diff, Other } from "./types"; export type { Theme } from "./core/theme";
export { themeVars } from "./types/vars"; export type { Chroma, Console, Diff, Github, Other } from "./types";
export { otherThemeVars, themeVars } from "./types/vars";

View File

@@ -201,17 +201,17 @@ export const github = {
/** 热力图 */ /** 热力图 */
contribution: { contribution: {
default: { default: {
/** 热力图方块的颜色 */
bgColor: { bgColor: {
num0: null, num0: null,
num1: null, num1: null,
num2: null, num2: null,
num3: null, num3: null,
num4: null, num4: null,
/** github 无此颜色需自行计算 /** github 无此颜色需自行计算 */
* @example 可参考这个颜色 `--color-prettylights-syntax-string-regexp`
*/
num5: null, num5: null,
}, },
/** 热力图方块的内边框颜色 */
borderColor: { borderColor: {
num0: null, num0: null,
num1: null, num1: null,