mirror of
https://github.com/lutinglt/gitea-github-theme.git
synced 2025-10-26 13:00:31 +00:00
update md
This commit is contained in:
@@ -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`
|
||||||
|
|||||||
@@ -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.
|
||||||
|
|
||||||
## 安装
|
## 安装
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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})`;
|
||||||
|
|||||||
@@ -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";
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user