Compare commits

...

30 Commits

Author SHA1 Message Date
lutinglt
68d632a6b3 update readme 2025-08-19 00:51:02 +08:00
lutinglt
2b5962e1c2 update readme 2025-08-19 00:49:40 +08:00
lutinglt
7cd7a48d17 修复后台管理的运维管理面板的样式 2025-08-17 16:18:57 +08:00
lutinglt
ebc6463c30 修复登录二次验证页面内容位置 2025-08-17 10:46:52 +08:00
lutinglt
77c3842a43 修复登录二次验证页面内容位置 2025-08-17 10:39:50 +08:00
lutinglt
d311072ca0 update readme 2025-08-16 22:50:00 +08:00
lutinglt
8b4102d8d9 同步查看代码文件内容时的样式 2025-08-16 22:33:16 +08:00
lutinglt
73b5397d77 优化文件树的顶部和底部间隔 2025-08-16 20:58:10 +08:00
lutinglt
134c383cdb 优化查看代码文件内容时的体验 2025-08-16 20:51:07 +08:00
lutinglt
c6e73000bd 修复仓库中文 README 时的按钮下划线长度 2025-08-16 13:03:56 +08:00
lutinglt
dbf3547ad5 change default readme 2025-08-16 12:23:43 +08:00
lutinglt
5235dae367 更新英文截图 2025-08-16 12:19:11 +08:00
lutinglt
a9df7a31e1 README_EN 2025-08-16 12:03:10 +08:00
lutinglt
dd6e97be1d update readme 2025-08-15 10:53:02 +08:00
lutinglt
29f983cce6 update readme 2025-08-15 10:51:24 +08:00
鲁汀
fca10130a3 Create FUNDING.yml 2025-08-15 10:45:15 +08:00
lutinglt
8676816342 修复红绿色盲主题的代码高亮色 2025-08-15 09:15:13 +08:00
lutinglt
9bcea89fcb update readme 2025-08-14 23:31:41 +08:00
lutinglt
26deec78ff format code 2025-08-14 21:24:03 +08:00
lutinglt
ffb7fa810b 发布时的主题顺序 2025-08-14 20:51:56 +08:00
lutinglt
2083d3026b version 2025-08-14 20:37:00 +08:00
lutinglt
5037e46447 beta 2025-08-14 20:10:48 +08:00
lutinglt
cd2f7579b1 色盲主题打包 2025-08-14 20:02:57 +08:00
lutinglt
1b237b12f3 update readme 2025-08-14 19:59:57 +08:00
lutinglt
a8453a87a5 支持色盲主题 2025-08-14 19:59:08 +08:00
lutinglt
6aef26cdc8 重叠边框线, 避免过粗 2025-08-14 00:10:46 +08:00
lutinglt
a4c94cb34d 重叠边框线, 避免过粗 2025-08-14 00:09:38 +08:00
lutinglt
8c45f44309 查看代码文件页面文件树头部有时不会固定住 2025-08-13 23:35:03 +08:00
lutinglt
1c9b02ea88 查看代码文件页面路径栏有时内容不会居中 2025-08-13 22:44:19 +08:00
lutinglt
61313d5644 ci tag 2025-08-13 22:39:10 +08:00
35 changed files with 931 additions and 361 deletions

15
.github/FUNDING.yml vendored Normal file
View File

@@ -0,0 +1,15 @@
# These are supported funding model platforms
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
polar: # Replace with a single Polar username
buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
thanks_dev: # Replace with a single thanks.dev username
custom: ['https://afdian.com/a/luting']

View File

@@ -1,11 +1,17 @@
## 🎉
### 🎉
## ✨ Feature
### ✨ Feature
#### CSS 变量
## 🌈 Style
### 🌈 Style
#### 更符合 GitHub 风格
##### 更符合 GitHub 风格
## 🐞 Fix
### 🐞 Fix
## 📃 English
#### CSS Variable
##### More GitHub-like style

44
.github/release.md vendored
View File

@@ -1,36 +1,26 @@
## 🎉 项目已毕业! (这是最后一版开发版本)
### 🌈 Style
目前项目的主要功能开发已全部完成, 进入维护阶段.
##### 更符合 GitHub 风格
维护阶段项目发版频率与 Gitea 发版频率保持一致, 版本号将与 Gitea 保持一致(不再附带时间戳).
- 同步查看代码文件内容时的样式
- 优化查看代码文件内容时的体验 (去掉了一些底部元素, 优化滚动体验)
每逢 Gitea 大版本更新时, 项目中间如有修复, 会发布当前版本的最后一个 `.latest` 版本. 之后会发布适配第一个大版本的 `.rc`
预发布版本, 问题不多时会发布正式版本, 正式版本之后的修复会等 Gitea 发布下一个小版本时再发布.
### 🐞 Fix
## 🌈 Style
- 修复红绿色盲主题的代码高亮色
- 修复仓库中文 README 时的按钮下划线长度
- 修复登录二次验证页面内容位置
- 修复后台管理的运维管理面板的样式
- 优化创建仓库/派生仓库/迁移仓库/创建组织页面的样式与设置页面的样式一致
- 优化消息右上角小图标样式
- 优化组织页面下的 RSS 订阅按钮样式
## 📃 English (From AI)
#### 更符合 GitHub 风格
### 🌈 Style
- 同步代码编辑器背景色和字体大小 (修复亮色模式下编辑器背景色问题) #12
- 同步查看代码文件内容页面/文件树样式 (包括滚动时固定的导航栏, 尽量与 GitHub 一致)
- 同步分页菜单样式
- 同步登录/注册页面样式
- 同步 Issue/PR 列表样式
- 同步 Issue/PR 详细页面侧边栏样式
- 同步仓库代码文件页 README 导航栏样式
- 同步用户点星仓库列表样式
- 优化私有标签样式
- 优化热力图和动态样式
- 优化仪表板仓库/组织列表样式
- 略微增加仓库代码文件列表的单行高度
##### More GitHub-like style
## 🐞 Fix
- Improved code file viewing experience (scrolling to bottom no longer causes file tree content overlap)
- Action 作业步骤页面标题选中时滚动固定的高度
- 用户公开活动页动态布局
- 顶部导航栏工单管理/请求合并页面搜索框旁的选择下拉框按钮内容过窄
- 手机页面下注册/登录页导航栏注册按钮换行
### 🐞 Fix
- Fixed code highlight colors for red-green color blindness theme
- Fixed button underline length for Chinese README in repositories

View File

@@ -18,8 +18,10 @@ jobs:
- name: Create release
run: |
export TZ=Asia/Shanghai
TAG="v$(npm run -s version).$(date +%y%m%d%H%M)"
tar -zcf dist/theme-github.tar.gz --remove-files dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css
TAG="v$(npm run -s version)"
tar -zcf dist/theme-github-base.tar.gz --remove-files dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css
tar -zcf dist/theme-github-colorblind.tar.gz --remove-files dist/theme-github-colorblind-auto.css dist/theme-github-colorblind-light.css dist/theme-github-colorblind-dark.css
tar -zcf dist/theme-github-colorblind-tritanopia.tar.gz --remove-files dist/theme-github-tritanopia-auto.css dist/theme-github-tritanopia-light.css dist/theme-github-tritanopia-dark.css
gh release create "$TAG" dist/* --notes-file .github/release.md --draft -t $TAG
env:
GH_TOKEN: ${{ github.token }}

View File

@@ -95,8 +95,8 @@ npm run commit
请在颜色主题文件头部附加自己的作者信息, 方便 Issue 提问者找到你 `@`.
推荐使用 `import { defineTheme } from "src"` 导入主题生成框架, 然后使用 `defineTheme` 函数生成主题,
defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工作量, 具体请查看函数说明.
推荐使用 `import { defineTheme, type ThemeColor } from "src"` 导入主题生成框架, 声明主题颜色, 然后使用 `defineTheme`
函数生成主题所有 CSS 变量, defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工作量, 具体请查看函数说明和定义.
颜色计算函数可以从 `src/functions` 导入, 例如 `import { scaleColorLight } from "src/functions"`, 或者使用 `polished` 库.
@@ -107,12 +107,15 @@ defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工
* @author 你的名字
* @description 主题描述
*/
import { defineTheme } from "src";
export default defineTheme({
import { defineTheme, type ThemeColor } from "src";
export const 主题名称DarkColors: ThemeColor = {
...
});
}
export default defineTheme(主题名称DarkColors);
// 使用其他主题颜色作为基础
import dark from "themes/dark";
import { darkColors } from "themes/dark";
export const 主题名称DarkColors: ThemeColor = darkColors;
export default defineTheme({
...dark,
...
@@ -130,17 +133,26 @@ export default defineTheme({
* @author 你的名字
* @description 主题描述
*/
import type { Theme } from "src";
import type { Theme, Chroma, Primary, Secondary, ... } from "src";
export const primary: Primary = ...;
export const secondary: Secondary =...;
export const chroma: Chroma =...;
...
export default theme: Theme = {
...
primary,
secondary,
chroma,
...
};
```
完成主题颜色开发后, 请在某个仓库的代码文件列表页, 打开 Code 菜单选择 Tea Cli 进行截图, 并放入 `screenshots`
目录下, 截图名与主题名相同. (推荐克隆 Github 的 actions/checkout 仓库, 该仓库信息较全, 避免泄露个人隐私)
目录下, 截图名与主题名相同. (推荐克隆本仓库, 避免泄露个人隐私)
然后将截图信息添加到 `README.md` 文件中, 可以在折叠部分中添加自己的说明.
主题颜色复用案例可以参考本主题的色盲主题.
## 主题样式贡献
主题样式使用 TypeScript 的 css 模板字符串开发, 该模板字符串会经过 sass 预处理器处理, 支持 SCSS 语法并且主题只接受 SCSS 嵌套语法, 请不要使用 CSS 语法, 如果一定要用请说明原因.

View File

@@ -1,11 +1,9 @@
# gitea-github-theme
<p align="center">
中文 |
<a href="./README_EN.md">English</a>
</p>
一个精致模仿 Github 风格的 Gitea 主题
> [!TIP]
>
> 推荐搭配文件图标浏览器插件一起使用更佳
> [web-file-explorer-icons](https://github.com/catppuccin/web-file-explorer-icons)
# Gitea GitHub Theme
## 版本号说明
@@ -15,7 +13,7 @@ Gitea 版本号格式: `1.大版本号.小版本号`
Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版本号适用于所有 Gitea 大版本号相同的 Gitea 版本.
比如: 主题版本 `1.24.4` 适用于 Gitea 版本 `>=1.24.0` ~ `<1.25.0`
比如: 主题版本 `1.24.5` 适用于 Gitea 版本 `>=1.24.0` `<1.25.0`
仅维护项目发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR.
@@ -46,8 +44,14 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
## 截图
### 基本主题
```ini
THEMES = github-auto, github-light, github-dark, github-soft-dark
```
<details open>
<summary>GitHub</summary>
<summary>Base</summary>
<h4>theme-github-light.css</h4>
<img src="screenshots/light.png"/>
<h4>theme-github-dark.css</h4>
@@ -56,9 +60,19 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
<img src="screenshots/soft-dark.png"/>
</details>
### 色盲主题 ( Beta )
```ini
THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark
THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
```
<details>
<summary>其他主题</summary>
等待贡献者ing...
<summary>Colorblind & Tritanopia (红绿色盲 & 蓝色盲)</summary>
<h4>theme-github-colorblind-light.css & theme-github-tritanopia-light.css</h4>
<img src="screenshots/colorblind-light.png"/>
<h4>theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css</h4>
<img src="screenshots/colorblind-dark.png"/>
</details>
## 自定义 CSS 变量
@@ -88,7 +102,7 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
| 变量名 | 描述 | 默认 | Github | 推荐 | 最小 | 最大 |
| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- |
| --custom-clone-menu-width | 克隆菜单宽度 | Gitea | 332px | 200px | 150px | 400px |
| --custom-clone-menu-width | 克隆按钮的菜单宽度 | Gitea | 332px | 200px | 150px | 400px |
| --custom-explore-repolist-columns | 探索页面的仓库列表列数 | 2 | 2 | 2 | | |
| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3 | 1 | 2/3 | | |
| --custom-user-repolist-columns | 用户页面的仓库列表列数 | 2 | 2 | 1/2 | | |

134
README_EN.md Normal file
View File

@@ -0,0 +1,134 @@
<p align="center">
<a href="./README.md">中文</a> |
English
</p>
# Gitea GitHub Theme
## Version Number Explanation
The theme version number is kept consistent with the Gitea version number
Gitea version number format: `1.major.minor`
Theoretically, minor version changes in Gitea do not modify the frontend layout, so the minor version of the theme is
applicable to all Gitea versions with the same major version number.
For example: Theme version `1.24.5` is applicable to Gitea versions `>=1.24.0` `<1.25.0`
Only the latest released Gitea version is maintained. Issues and PRs for other older theme versions will not be
accepted.
> Development stage theme version number format: `1.major.minor.timestamp`
## Installation
1. Download the latest CSS theme file from the release page and place it in the `gitea/public/assets/css` directory
2. Modify `gitea/conf/app.ini` and append the CSS filename without the `theme-` prefix to the end of `THEMES` under the
`[ui]` section
3. Restart Gitea
4. Check the theme in the settings
> [!IMPORTANT]
>
> Automatic color theme requires both light and dark theme files
Example: If the theme filename is `theme-github-dark.css`, add `github-dark` to the end of `THEMES`
Example `gitea/conf/app.ini`:
```ini
[ui]
THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-dark, github-soft-dark
```
For details, please refer to the Gitea documentation
[Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
## Screenshots
### Basic Themes
```ini
THEMES = github-auto, github-light, github-dark, github-soft-dark
```
<details open>
<summary>Base</summary>
<h4>theme-github-light.css</h4>
<img src="screenshots/en/light.png"/>
<h4>theme-github-dark.css</h4>
<img src="screenshots/en/dark.png"/>
<h4>theme-github-soft-dark.css</h4>
<img src="screenshots/en/soft-dark.png"/>
</details>
### Colorblind Themes (Beta)
```ini
THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark
THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
```
<details>
<summary>Colorblind & Tritanopia</summary>
<h4>theme-github-colorblind-light.css & theme-github-tritanopia-light.css</h4>
<img src="screenshots/en/colorblind-light.png"/>
<h4>theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css</h4>
<img src="screenshots/en/colorblind-dark.png"/>
</details>
## Custom CSS Variables
You can customize parts of the theme style according to your preferences
### Usage Method
Add the following code at the beginning or end of the theme's CSS file
```css
:root {
--custom-clone-menu-width: 150px;
...
}
```
> [!IMPORTANT]
>
> Please ensure to add custom variables in the `:root` selector, otherwise they will not take effect
>
> Variables are separated by `;`
>
> It is recommended to place custom variables in a separate file and append them to the theme file using shell commands
> or other methods
### CSS Variables
| Variable Name | Description | Default | Github | Recommend | Min | Max |
| :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :---- | :---- |
| --custom-clone-menu-width | Clone button menu width | Gitea | 332px | 200px | 150px | 400px |
| --custom-explore-repolist-columns | Number of repository list columns on explore page | 2 | 2 | 2 | | |
| --custom-explore-userlist-columns | Number of user/organization list columns on explore page | 3 | 1 | 2/3 | | |
| --custom-user-repolist-columns | Number of repository list columns on user page | 2 | 2 | 1/2 | | |
| --custom-org-repolist-columns | Number of repository list columns on organization page | 1 | 1 | 1/2 | | |
| --custom-org-userlist-columns | Number of user list columns on organization page | 2 | 1 | 1/2 | | |
## Using Development Version of the Theme
You might want to use the development version of the theme instead of the released version
Please ensure you have Node.js environment installed, Node.js 20 or above is recommended
```bash
git clone https://github.com/lutinglt/gitea-github-theme.git
cd gitea-github-theme
npm install
npm run build
```
After compilation, theme files will be generated in the `dist` directory. You can place the theme files into the
`gitea/public/assets/css` directory, then add the theme name to the end of `THEMES` in `gitea/conf/app.ini`
## Contribution
Please refer to [CONTRIBUTING](CONTRIBUTING.md)

View File

@@ -1,7 +1,7 @@
{
"name": "gitea-github-theme",
"version": "1.24.4",
"description": "A theme to make Gitea look and feel like GitHub",
"version": "1.24.6",
"description": "A sophisticated theme to make Gitea look and feel like GitHub",
"type": "module",
"scripts": {
"dev": "vite build --mode dev",

BIN
screenshots/colorblind-dark.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 KiB

BIN
screenshots/colorblind-light.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 259 KiB

BIN
screenshots/dark.png vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 202 KiB

After

Width:  |  Height:  |  Size: 260 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

BIN
screenshots/en/dark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

BIN
screenshots/en/light.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 279 KiB

BIN
screenshots/light.png vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 201 KiB

After

Width:  |  Height:  |  Size: 259 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 202 KiB

After

Width:  |  Height:  |  Size: 261 KiB

View File

@@ -1,36 +1,6 @@
import { prettylights2Chroma } from "./prettylights";
import { prettylights2Chroma, type prettylightsColor } from "./prettylights";
export const defaultDarkChroma = prettylights2Chroma({
syntax: {
brackethighlighter: { angle: "#9198a1", unmatched: "#f85149" },
carriage: { return: { bg: "#b62324", text: "#f0f6fc" } },
comment: "#9198a1",
constant: "#79c0ff",
constantOtherReferenceLink: "#a5d6ff",
entity: "#d2a8ff",
entityTag: "#7ee787",
invalid: { illegal: { bg: "#8e1519", text: "#f0f6fc" } },
keyword: "#ff7b72",
markup: {
bold: "#f0f6fc",
changed: { bg: "#5a1e02", text: "#ffdfb6" },
deleted: { bg: "#67060c", text: "#ffdcd7" },
heading: "#1f6feb",
ignored: { bg: "#1158c7", text: "#f0f6fc" },
inserted: { bg: "#033a16", text: "#aff5b4" },
italic: "#f0f6fc",
list: "#f2cc60",
},
metaDiffRange: "#d2a8ff",
storageModifierImport: "#f0f6fc",
string: "#a5d6ff",
stringRegexp: "#7ee787",
sublimelinterGutterMark: "#3d444d",
variable: "#ffa657",
},
});
export const defaultLightChroma = prettylights2Chroma({
export const lightPrettylights: prettylightsColor = {
syntax: {
brackethighlighter: { angle: "#59636e", unmatched: "#82071e" },
carriage: { return: { bg: "#cf222e", text: "#f6f8fa" } },
@@ -58,4 +28,37 @@ export const defaultLightChroma = prettylights2Chroma({
sublimelinterGutterMark: "#818b98",
variable: "#953800",
},
});
};
export const darkPrettylights: prettylightsColor = {
syntax: {
brackethighlighter: { angle: "#9198a1", unmatched: "#f85149" },
carriage: { return: { bg: "#b62324", text: "#f0f6fc" } },
comment: "#9198a1",
constant: "#79c0ff",
constantOtherReferenceLink: "#a5d6ff",
entity: "#d2a8ff",
entityTag: "#7ee787",
invalid: { illegal: { bg: "#8e1519", text: "#f0f6fc" } },
keyword: "#ff7b72",
markup: {
bold: "#f0f6fc",
changed: { bg: "#5a1e02", text: "#ffdfb6" },
deleted: { bg: "#67060c", text: "#ffdcd7" },
heading: "#1f6feb",
ignored: { bg: "#1158c7", text: "#f0f6fc" },
inserted: { bg: "#033a16", text: "#aff5b4" },
italic: "#f0f6fc",
list: "#f2cc60",
},
metaDiffRange: "#d2a8ff",
storageModifierImport: "#f0f6fc",
string: "#a5d6ff",
stringRegexp: "#7ee787",
sublimelinterGutterMark: "#3d444d",
variable: "#ffa657",
},
};
export const defaultLightChroma = prettylights2Chroma(lightPrettylights);
export const defaultDarkChroma = prettylights2Chroma(darkPrettylights);

View File

@@ -5,7 +5,7 @@ import { themeVars } from "src/types/vars";
import { defaultDarkChroma, defaultLightChroma } from "./chroma";
import type { Theme } from "./theme";
type ThemeColor = {
export type ThemeColor = {
/** 用于标识当前是否为暗色主题: `true` 暗色 `false` 亮色 */
isDarkTheme: boolean;
/** 主色调(强调色) */
@@ -14,38 +14,41 @@ type ThemeColor = {
primaryContrast: string;
/** 副色调(边框色) */
secondary: string;
/** 色 */
red: string;
/** 色 */
orange: string;
/** 色 */
yellow: string;
/** 黄绿色/橄榄色 */
olive: string;
/** 绿色 */
green: string;
/** 绿色/青色(偏绿) */
teal: string;
/** 蓝绿色/青色(偏) */
cyan: string;
/** 蓝 */
blue: string;
/** 蓝紫色/紫罗兰色 */
violet: string;
/** 色 */
purple: string;
/** 粉红色 */
pink: string;
/** 色 */
brown: string;
/** 色 */
black: string;
/** 色 */
grey: string;
/** 色 */
gold: string;
/** 色 */
white: string;
/** 基础颜色 */
base: {
/** 色 */
red: string;
/** 色 */
orange: string;
/** 黄色 */
yellow: string;
/** 黄绿色/橄榄色 */
olive: string;
/** 绿色 */
green: string;
/** 蓝绿色/青色(偏绿) */
teal: string;
/** 蓝绿色/青色(偏蓝) */
cyan: string;
/** 蓝色 */
blue: string;
/** 蓝紫色/紫罗兰色 */
violet: string;
/** 色 */
purple: string;
/** 粉红色 */
pink: string;
/** 色 */
brown: string;
/** 色 */
black: string;
/** 色 */
grey: string;
/** 色 */
gold: string;
/** 白色 */
white: string;
};
/** Action 日志 */
console: Console;
/** 提交代码对比 */
@@ -81,7 +84,7 @@ type ThemeColor = {
* github,
* })
*/
export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null): Theme {
export function defineTheme(themeColor: ThemeColor, chroma?: Chroma): Theme {
const brightDir = themeColor.isDarkTheme ? -1 : 1;
const primary: Primary = {
@@ -161,161 +164,187 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
const named: Named = {
red: {
self: themeColor.red,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.red, 15) : scaleColorLight(themeColor.red, 25),
self: themeColor.base.red,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.red, 15)
: scaleColorLight(themeColor.base.red, 25),
dark: {
num1: scaleColorLight(themeColor.red, -10),
num2: scaleColorLight(themeColor.red, -20),
num1: scaleColorLight(themeColor.base.red, -10),
num2: scaleColorLight(themeColor.base.red, -20),
},
badge: {
self: themeColor.red,
bg: rgba(themeColor.red, 0.1),
self: themeColor.base.red,
bg: rgba(themeColor.base.red, 0.1),
hover: {
bg: rgba(themeColor.red, 0.3),
bg: rgba(themeColor.base.red, 0.3),
},
},
},
orange: {
self: themeColor.orange,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.orange, 15) : scaleColorLight(themeColor.orange, 25),
self: themeColor.base.orange,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.orange, 15)
: scaleColorLight(themeColor.base.orange, 25),
dark: {
num1: scaleColorLight(themeColor.orange, -10),
num2: scaleColorLight(themeColor.orange, -20),
num1: scaleColorLight(themeColor.base.orange, -10),
num2: scaleColorLight(themeColor.base.orange, -20),
},
badge: {
self: themeColor.orange,
bg: rgba(themeColor.orange, 0.1),
self: themeColor.base.orange,
bg: rgba(themeColor.base.orange, 0.1),
hover: {
bg: rgba(themeColor.orange, 0.3),
bg: rgba(themeColor.base.orange, 0.3),
},
},
},
yellow: {
self: themeColor.yellow,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.yellow, 15) : scaleColorLight(themeColor.yellow, 25),
self: themeColor.base.yellow,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.yellow, 15)
: scaleColorLight(themeColor.base.yellow, 25),
dark: {
num1: scaleColorLight(themeColor.yellow, -10),
num2: scaleColorLight(themeColor.yellow, -20),
num1: scaleColorLight(themeColor.base.yellow, -10),
num2: scaleColorLight(themeColor.base.yellow, -20),
},
badge: {
self: themeColor.yellow,
bg: rgba(themeColor.yellow, 0.1),
self: themeColor.base.yellow,
bg: rgba(themeColor.base.yellow, 0.1),
hover: {
bg: rgba(themeColor.yellow, 0.3),
bg: rgba(themeColor.base.yellow, 0.3),
},
},
},
olive: {
self: themeColor.olive,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.olive, 15) : scaleColorLight(themeColor.olive, 25),
self: themeColor.base.olive,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.olive, 15)
: scaleColorLight(themeColor.base.olive, 25),
dark: {
num1: scaleColorLight(themeColor.olive, -10),
num2: scaleColorLight(themeColor.olive, -20),
num1: scaleColorLight(themeColor.base.olive, -10),
num2: scaleColorLight(themeColor.base.olive, -20),
},
},
green: {
self: themeColor.green,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.green, 15) : scaleColorLight(themeColor.green, 25),
self: themeColor.base.green,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.green, 15)
: scaleColorLight(themeColor.base.green, 25),
dark: {
num1: scaleColorLight(themeColor.green, -10),
num2: scaleColorLight(themeColor.green, -20),
num1: scaleColorLight(themeColor.base.green, -10),
num2: scaleColorLight(themeColor.base.green, -20),
},
badge: {
self: themeColor.green,
bg: rgba(themeColor.green, 0.1),
self: themeColor.base.green,
bg: rgba(themeColor.base.green, 0.1),
hover: {
bg: rgba(themeColor.green, 0.3),
bg: rgba(themeColor.base.green, 0.3),
},
},
},
teal: {
self: themeColor.teal,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.teal, 15) : scaleColorLight(themeColor.teal, 25),
self: themeColor.base.teal,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.teal, 15)
: scaleColorLight(themeColor.base.teal, 25),
dark: {
num1: scaleColorLight(themeColor.teal, -10),
num2: scaleColorLight(themeColor.teal, -20),
num1: scaleColorLight(themeColor.base.teal, -10),
num2: scaleColorLight(themeColor.base.teal, -20),
},
},
blue: {
self: themeColor.blue,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.blue, 15) : scaleColorLight(themeColor.blue, 25),
self: themeColor.base.blue,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.blue, 15)
: scaleColorLight(themeColor.base.blue, 25),
dark: {
num1: scaleColorLight(themeColor.blue, -10),
num2: scaleColorLight(themeColor.blue, -20),
num1: scaleColorLight(themeColor.base.blue, -10),
num2: scaleColorLight(themeColor.base.blue, -20),
},
},
violet: {
self: themeColor.violet,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.violet, 15) : scaleColorLight(themeColor.violet, 25),
self: themeColor.base.violet,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.violet, 15)
: scaleColorLight(themeColor.base.violet, 25),
dark: {
num1: scaleColorLight(themeColor.violet, -10),
num2: scaleColorLight(themeColor.violet, -20),
num1: scaleColorLight(themeColor.base.violet, -10),
num2: scaleColorLight(themeColor.base.violet, -20),
},
},
purple: {
self: themeColor.purple,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.purple, 15) : scaleColorLight(themeColor.purple, 25),
self: themeColor.base.purple,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.purple, 15)
: scaleColorLight(themeColor.base.purple, 25),
dark: {
num1: scaleColorLight(themeColor.purple, -10),
num2: scaleColorLight(themeColor.purple, -20),
num1: scaleColorLight(themeColor.base.purple, -10),
num2: scaleColorLight(themeColor.base.purple, -20),
},
},
pink: {
self: themeColor.pink,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.pink, 15) : scaleColorLight(themeColor.pink, 25),
self: themeColor.base.pink,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.pink, 15)
: scaleColorLight(themeColor.base.pink, 25),
dark: {
num1: scaleColorLight(themeColor.pink, -10),
num2: scaleColorLight(themeColor.pink, -20),
num1: scaleColorLight(themeColor.base.pink, -10),
num2: scaleColorLight(themeColor.base.pink, -20),
},
},
brown: {
self: themeColor.brown,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.brown, 15) : scaleColorLight(themeColor.brown, 25),
self: themeColor.base.brown,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.brown, 15)
: scaleColorLight(themeColor.base.brown, 25),
dark: {
num1: scaleColorLight(themeColor.brown, -10),
num2: scaleColorLight(themeColor.brown, -20),
num1: scaleColorLight(themeColor.base.brown, -10),
num2: scaleColorLight(themeColor.base.brown, -20),
},
},
black: {
self: themeColor.black,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.black, 15) : scaleColorLight(themeColor.black, 25),
self: themeColor.base.black,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.black, 15)
: scaleColorLight(themeColor.base.black, 25),
dark: {
num1: scaleColorLight(themeColor.black, -10),
num2: scaleColorLight(themeColor.black, -20),
num1: scaleColorLight(themeColor.base.black, -10),
num2: scaleColorLight(themeColor.base.black, -20),
},
},
grey: {
self: themeColor.grey,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.grey, 15) : scaleColorLight(themeColor.grey, 25),
self: themeColor.base.grey,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.grey, 15)
: scaleColorLight(themeColor.base.grey, 25),
},
gold: themeColor.gold,
white: themeColor.white,
gold: themeColor.base.gold,
white: themeColor.base.white,
};
const message: Message = {
error: {
bg: {
self: rgba(themeColor.red, 0.1),
active: rgba(themeColor.red, 0.5),
hover: rgba(themeColor.red, 0.3),
self: rgba(themeColor.base.red, 0.1),
active: rgba(themeColor.base.red, 0.5),
hover: rgba(themeColor.base.red, 0.3),
},
border: rgba(themeColor.red, 0.4),
text: saturate(0.2, themeColor.red), // 饱和度提高
border: rgba(themeColor.base.red, 0.4),
text: saturate(0.2, themeColor.base.red), // 饱和度提高
},
success: {
bg: rgba(themeColor.green, 0.1),
border: rgba(themeColor.green, 0.4),
text: saturate(0.2, themeColor.green),
bg: rgba(themeColor.base.green, 0.1),
border: rgba(themeColor.base.green, 0.4),
text: saturate(0.2, themeColor.base.green),
},
warning: {
bg: rgba(themeColor.yellow, 0.1),
border: rgba(themeColor.yellow, 0.4),
text: saturate(0.2, themeColor.yellow),
bg: rgba(themeColor.base.yellow, 0.1),
border: rgba(themeColor.base.yellow, 0.4),
text: saturate(0.2, themeColor.base.yellow),
},
info: {
bg: rgba(themeColor.blue, 0.1),
border: rgba(themeColor.blue, 0.4),
text: saturate(0.2, themeColor.blue),
bg: rgba(themeColor.base.blue, 0.1),
border: rgba(themeColor.base.blue, 0.4),
text: saturate(0.2, themeColor.base.blue),
},
};
@@ -326,7 +355,7 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
yellow: themeVars.color.yellow.self,
blue: themeVars.color.blue.self,
magenta: themeVars.color.pink.self,
cyan: themeColor.cyan,
cyan: themeColor.base.cyan,
white: themeVars.color.console.fg.subtle,
bright: {
black: themeVars.color.black.light,
@@ -335,7 +364,9 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
yellow: themeVars.color.yellow.light,
blue: themeVars.color.blue.light,
magenta: themeVars.color.pink.light,
cyan: themeColor.isDarkTheme ? scaleColorLight(themeColor.cyan, 10) : scaleColorLight(themeColor.cyan, 25),
cyan: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.cyan, 10)
: scaleColorLight(themeColor.base.cyan, 25),
white: themeVars.color.console.fg.self,
},
};

View File

@@ -1,10 +1,9 @@
import { saturate } from "polished";
import type { Console, Diff, Other } from "src";
import { scaleColorLight } from "src/functions";
import type { Chroma, Github } from "src/types";
import type { Github } from "src/types";
import { themeVars } from "src/types/vars";
import { defineTheme } from "./color";
import type { Theme } from "./theme";
import { type ThemeColor } from "./color";
export type GithubColor = {
isDarkTheme: boolean;
@@ -77,7 +76,7 @@ export type GithubColor = {
};
};
export function defineGithubTheme(githubColor: GithubColor, chroma: Chroma | null = null): Theme {
export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
const console: Console = {
fg: {
self: githubColor.fgColor.default,
@@ -327,12 +326,12 @@ export function defineGithubTheme(githubColor: GithubColor, chroma: Chroma | nul
},
},
};
return defineTheme(
{
isDarkTheme: githubColor.isDarkTheme,
primary: githubColor.fgColor.accent,
primaryContrast: githubColor.fgColor.default,
secondary: githubColor.borderColor.default,
return {
isDarkTheme: githubColor.isDarkTheme,
primary: githubColor.fgColor.accent,
primaryContrast: githubColor.fgColor.default,
secondary: githubColor.borderColor.default,
base: {
red: githubColor.fgColor.danger,
orange: githubColor.fgColor.severe,
yellow: githubColor.fgColor.attention,
@@ -349,11 +348,10 @@ export function defineGithubTheme(githubColor: GithubColor, chroma: Chroma | nul
grey: githubColor.fgColor.neutral,
gold: githubColor.display.lemon.fgColor,
white: githubColor.fgColor.white,
console,
diff,
other,
github,
},
chroma
);
console,
diff,
other,
github,
};
}

View File

@@ -73,7 +73,7 @@ export function prettylights2Chroma(prettylights: prettylightsColor): Chroma {
string: {
self: prettylights.syntax.string,
affix: prettylights.syntax.string,
backtick: prettylights.syntax.string,
backtick: prettylights.syntax.constant,
char: prettylights.syntax.string,
delimiter: prettylights.syntax.string,
doc: prettylights.syntax.comment,

View File

@@ -1,4 +1,5 @@
export { defineTheme } from "./core/color";
export { defaultDarkChroma, defaultLightChroma } from "./core/chroma";
export { defineTheme, type ThemeColor } from "./core/color";
export type { Theme } from "./core/theme";
export type { Chroma, Console, Diff, Github, Other } from "./types";
export type { Ansi, Chroma, Console, Diff, Github, Message, Named, Other, Primary, Secondary } from "./types";
export { otherThemeVars, themeVars } from "./types/vars";

View File

@@ -1,7 +1,8 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
export const dashboard = css`
.page-content.dashboard {
// 首页仪表板, 避免选中管理员后台的维护管理面板
.page-content.dashboard.feeds {
// 仓库列表的仓库/组织切换按钮
.ui.two.item.menu {
box-shadow: ${themeVars.github.shadow.floating.small};

View File

@@ -96,6 +96,8 @@ export const repoFiles = css`
}
.file-header-left {
padding: 6px 8px !important;
// 伪元素宽度等于按钮宽度而不是父元素宽度
position: relative;
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
border-radius: ${otherThemeVars.border.radius};
@@ -104,11 +106,11 @@ export const repoFiles = css`
content: "";
background: ${themeVars.github.underlineNav.borderColor.active};
border-radius: ${otherThemeVars.border.radius};
bottom: 0;
bottom: -8px;
left: 0;
height: 2px;
position: absolute;
left: 12px;
width: 113px;
width: 100%;
}
a.muted:hover {
color: inherit;
@@ -146,69 +148,179 @@ export const repoFilesMobile = css`
// 仓库打开文件时的视图
export const repoFileView = css`
// 隐藏主内容的下内容和页脚, 避免滚动文件树时滚动条遮挡
body > .full.height:has(.repo-view-file-tree-container) {
padding-bottom: 0;
+ .page-footer {
display: none;
}
}
.page-content.repository.file.list {
&:has(.repo-view-file-tree-container) {
// 取消下间隔优化观看体验
.secondary-nav {
margin-bottom: 0 !important;
.ui.tabs.divider {
margin-bottom: 0;
}
}
}
> .ui.container.fluid {
max-width: calc(100% - calc(2 * 16px));
}
.repo-view-container {
position: sticky;
top: 0;
// 左侧文件树
.repo-view-file-tree-container {
height: 100vh;
height: calc(100vh - 64px); // 减去头部高度
// 固定头部
position: sticky;
top: 0;
&:after {
content: "";
position: absolute;
top: -14px;
top: 0;
right: 0;
width: 1px;
height: calc(100% + 14px);
width: 1.5;
height: calc(100% + 64px); // 头部高度
background: ${themeVars.color.secondary.self};
}
> .repo-button-row {
height: 32px;
margin: 16px 0;
align-content: center;
background: ${themeVars.color.body};
font-size: 16px;
height: 64px;
margin: 0;
// 固定头部, 早期父元素有多余的页脚和内容高度导致滚动时无法固定, 修复后也可保留此属性无需删除
position: sticky;
top: 0;
&:after {
content: "";
position: absolute;
top: 32px + 32px;
top: 64px;
left: -16px;
width: calc(100% + 16px);
height: 1px;
background: ${themeVars.color.secondary.self};
}
.ui.compact.icon.button {
border: 0;
}
}
.view-file-tree-items {
margin-right: 0;
padding: 12px 16px 8px 0;
}
}
// 右侧文件视图内容
.repo-view-content {
padding-bottom: 40px;
.repo-button-row {
align-items: center;
align-content: center;
background: ${themeVars.color.box.header};
border: 1px solid ${themeVars.color.secondary.self};
border-radius: ${otherThemeVars.border.radius};
margin: 16px 0;
height: 46px;
min-height: 46px;
padding: 8px;
position: sticky;
top: 0;
z-index: 1;
.ui.button {
min-height: 32px;
}
// 打开文件树按钮
.repo-view-file-tree-toggle-show {
background: initial;
border-color: #0000;
padding: 0;
min-width: 32px;
}
// 分支选择按钮
.branch-dropdown-button {
padding: 0 12px;
}
// 路径
.repo-path {
gap: 4px;
.section {
&:first-child,
&.active {
font-weight: 600;
}
}
.btn {
svg {
margin-left: 4px;
color: ${themeVars.color.text.light.num1};
}
}
}
}
.non-diff-file-content {
// 避免分支菜单遮挡
position: relative;
z-index: 0;
h4.file-header {
padding: 8px 12px !important;
position: sticky;
top: 46px;
// 重叠边框线, 避免过粗
top: 45px;
z-index: 1;
.file-header-left {
color: ${themeVars.color.text.light.num1};
font-size: 12px;
}
.file-header-right {
// 按钮组
> .ui.buttons {
margin: 0 8px 0 0 !important; // 完全不知道为什么浏览器最终效果没生效, 只能 !important 了
.ui.mini.button {
min-height: 28px;
height: 28px;
font-size: 12px;
padding: 0 8px;
}
}
// 右侧操作按钮
> .btn-octicon {
display: flex;
align-items: center;
background: ${themeVars.color.button};
border: 1px solid ${themeVars.color.light.border};
height: 28px;
padding: 0 8px;
svg {
color: ${themeVars.color.text.light.num1};
}
&:first-of-type {
border-top-left-radius: ${otherThemeVars.border.radius};
border-bottom-left-radius: ${otherThemeVars.border.radius};
}
&:last-of-type {
border-top-right-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
}
&:hover {
background: ${themeVars.color.hover.self};
color: ${themeVars.color.text.light.num1};
}
}
}
}
}
// 头部提交信息
.ui.segment#repo-file-commit-box {
padding: 8px 12px;
margin-bottom: 8px !important;
margin-bottom: 16px !important;
min-height: 46px;
> .latest-commit {
gap: 8px;
.commit-summary {
color: ${themeVars.color.text.light.num1};
}
}
// 右侧提交时间
> .age {

View File

@@ -1,8 +1,10 @@
import "./actions";
import "./chroma";
import "./clone";
import "./commit";
import "./dashboard";
import "./diff";
import "./editor";
import "./explore";
import "./filelist";
import "./heatmap";
@@ -14,5 +16,3 @@ import "./repo";
import "./setting";
import "./signin";
import "./user";
import "./chroma";
import "./editor"

View File

@@ -3,11 +3,14 @@ import { css } from "src/types/vars";
// 注册/登录界面
export const signIn = css`
.page-content.user.signin {
.ui.grid > .column {
width: 384px;
padding: 16px;
> .ui.container {
max-width: unset;
.ui.grid {
justify-content: center;
> .column {
width: 384px;
padding: 16px;
> .ui.container {
max-width: unset;
}
}
}
.ui.top.attached.header {
@@ -15,6 +18,7 @@ export const signIn = css`
font-size: 20px;
font-weight: 600;
background-color: unset !important;
text-align: center;
padding: 16px;
}

View File

@@ -1,4 +1,4 @@
import { css, themeVars, otherThemeVars } from "src/types/vars";
import { css, otherThemeVars, themeVars } from "src/types/vars";
export const attached = css`
// 设置右面板的内容

View File

@@ -0,0 +1,74 @@
import { defineTheme, type Chroma, type ThemeColor } from "src";
import { github2ThemeColor, type GithubColor } from "src/core/github";
import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
import { darkGithubColors } from "themes/dark";
export const colorblindDarkGithubColors: GithubColor = {
isDarkTheme: true,
display: darkGithubColors.display,
diffBlob: {
addtionNum: { bgColor: "#58a6ff4d" },
addtionWord: { bgColor: "#388bfd66" },
deletionNum: { bgColor: "#db6d284d" },
deletionWord: { bgColor: "#db6d2866" },
hunkNum: { bgColor: { rest: "#2f3742" } },
},
fgColor: {
...darkGithubColors.fgColor,
danger: "#f0883e",
success: "#58a6ff",
},
bgColor: {
...darkGithubColors.bgColor,
danger: { muted: "#db6d281a" },
success: { emphasis: "#1f6feb", muted: "#388bfd33" },
},
borderColor: {
...darkGithubColors.borderColor,
success: { emphasis: "#1f6feb" },
},
button: {
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#2a7aef" } },
danger: { fgColor: { rest: "#f0883e", hover: "#ffffff" }, bgColor: { hover: "#9b4215" } },
},
control: darkGithubColors.control,
shadow: darkGithubColors.shadow,
overlay: darkGithubColors.overlay,
underlineNav: darkGithubColors.underlineNav,
contribution: darkGithubColors.contribution,
};
export const colorblindDarkPrettylights: prettylightsColor = {
syntax: {
brackethighlighter: { angle: "#9198a1", unmatched: "#db6d28" },
carriage: { return: { bg: "#9b4215", text: "#f0f6fc" } },
comment: "#9198a1",
constant: "#79c0ff",
constantOtherReferenceLink: "#a5d6ff",
entity: "#d2a8ff",
entityTag: "#a5d6ff",
invalid: { illegal: { bg: "#762d0a", text: "#f0f6fc" } },
keyword: "#f0883e",
markup: {
bold: "#f0f6fc",
changed: { bg: "#5a1e02", text: "#ffdfb6" },
deleted: { bg: "#5a1e02", text: "#ffdfb6" },
heading: "#1f6feb",
ignored: { bg: "#1158c7", text: "#f0f6fc" },
inserted: { bg: "#0c2d6b", text: "#cae8ff" },
italic: "#f0f6fc",
list: "#f2cc60",
},
metaDiffRange: "#d2a8ff",
storageModifierImport: "#f0f6fc",
string: "#a5d6ff",
stringRegexp: "#a5d6ff",
sublimelinterGutterMark: "#3d444d",
variable: "#ffa657",
},
};
export const colorblindDarkColors: ThemeColor = github2ThemeColor(colorblindDarkGithubColors);
export const colorblindDarkChroma: Chroma = prettylights2Chroma(colorblindDarkPrettylights);
export default defineTheme(colorblindDarkColors, colorblindDarkChroma);

View File

@@ -0,0 +1,74 @@
import { defineTheme, type Chroma, type ThemeColor } from "src";
import { github2ThemeColor, type GithubColor } from "src/core/github";
import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
import { lightGithubColors } from "themes/light";
export const colorblindLightGithubColors: GithubColor = {
isDarkTheme: false,
display: lightGithubColors.display,
diffBlob: {
addtionNum: { bgColor: "#b6e3ff" },
addtionWord: { bgColor: "#b6e3ff" },
deletionNum: { bgColor: "#ffd8b5" },
deletionWord: { bgColor: "#ffd8b5" },
hunkNum: { bgColor: { rest: "#e6eaef" } },
},
fgColor: {
...lightGithubColors.fgColor,
danger: "#bc4c00",
success: "#0969da",
},
bgColor: {
...lightGithubColors.bgColor,
danger: { muted: "#fff1e5" },
success: { emphasis: "#0969da", muted: "#ddf4ff" },
},
borderColor: {
...lightGithubColors.borderColor,
success: { emphasis: "#0969da" },
},
button: {
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#0864d1" } },
danger: { fgColor: { rest: "#bc4c00", hover: "#ffffff" }, bgColor: { hover: "#bc4c00" } },
},
control: lightGithubColors.control,
shadow: lightGithubColors.shadow,
overlay: lightGithubColors.overlay,
underlineNav: lightGithubColors.underlineNav,
contribution: lightGithubColors.contribution,
};
export const colorblindLightPrettylights: prettylightsColor = {
syntax: {
brackethighlighter: { angle: "#59636e", unmatched: "#762c00" },
carriage: { return: { bg: "#bc4c00", text: "#f6f8fa" } },
comment: "#59636e",
constant: "#0550ae",
constantOtherReferenceLink: "#0a3069",
entity: "#6639ba",
entityTag: "#0550ae",
invalid: { illegal: { bg: "#762c00", text: "#f6f8fa" } },
keyword: "#bc4c00",
markup: {
bold: "#1f2328",
changed: { bg: "#ffd8b5", text: "#953800" },
deleted: { bg: "#fff1e5", text: "#762c00" },
heading: "#0550ae",
ignored: { bg: "#0550ae", text: "#d1d9e0" },
inserted: { bg: "#ddf4ff", text: "#0550ae" },
italic: "#1f2328",
list: "#3b2300",
},
metaDiffRange: "#8250df",
storageModifierImport: "#1f2328",
string: "#0a3069",
stringRegexp: "#0550ae",
sublimelinterGutterMark: "#818b98",
variable: "#953800",
},
};
export const colorblindLightColors: ThemeColor = github2ThemeColor(colorblindLightGithubColors);
export const colorblindLightChroma: Chroma = prettylights2Chroma(colorblindLightPrettylights);
export default defineTheme(colorblindLightColors, colorblindLightChroma);

View File

@@ -1,6 +1,7 @@
import { defineGithubTheme } from "src/core/github";
import { defineTheme, type ThemeColor } from "src";
import { github2ThemeColor, type GithubColor } from "src/core/github";
export default defineGithubTheme({
export const darkGithubColors: GithubColor = {
isDarkTheme: true,
display: {
brown: { fgColor: "#b69a6d" },
@@ -22,7 +23,7 @@ export default defineGithubTheme({
attention: "#d29922",
danger: "#f85149",
default: "#f0f6fc",
disabled: "#656c7699",
disabled: "#656c76",
done: "#ab7df8",
muted: "#9198a1",
neutral: "#9198a1",
@@ -35,20 +36,20 @@ export default defineGithubTheme({
bgColor: {
accent: { emphasis: "#1f6feb", muted: "#388bfd1a" },
attention: { muted: "#bb800926" },
success: { emphasis: "#238636", muted: "#2ea04326" },
danger: { muted: "#f851491a" },
done: { emphasis: "#8957e5" },
default: "#0d1117",
inset: "#010409",
done: { emphasis: "#8957e5" },
muted: "#151b23",
neutral: { muted: "#656c7633" },
success: { emphasis: "#238636", muted: "#2ea04326" },
inset: "#010409",
},
borderColor: {
accent: { emphasis: "#1f6feb" },
default: "#3d444d",
attention: { emphasis: "#9e6a03" },
success: { emphasis: "#238636" },
default: "#3d444d",
done: { emphasis: "#8957e5" },
success: { emphasis: "#238636" },
muted: "#3d444db3",
translucent: "#ffffff26",
},
@@ -69,4 +70,8 @@ export default defineGithubTheme({
borderColor: { num0: "#0104090d" },
},
},
});
};
export const darkColors: ThemeColor = github2ThemeColor(darkGithubColors);
export default defineTheme(darkColors);

View File

@@ -1,6 +1,7 @@
import { defineGithubTheme } from "src/core/github";
import { defineTheme, type ThemeColor } from "src";
import { github2ThemeColor, type GithubColor } from "src/core/github";
export default defineGithubTheme({
export const lightGithubColors: GithubColor = {
isDarkTheme: false,
display: {
brown: { fgColor: "#755f43" },
@@ -35,20 +36,20 @@ export default defineGithubTheme({
bgColor: {
accent: { emphasis: "#0969da", muted: "#ddf4ff" },
attention: { muted: "#fff8c5" },
success: { emphasis: "#1f883d", muted: "#dafbe1" },
danger: { muted: "#ffebe9" },
done: { emphasis: "#8250df" },
default: "#ffffff",
inset: "#f6f8fa",
done: { emphasis: "#8250df" },
muted: "#f6f8fa",
neutral: { muted: "#818b981f" },
success: { emphasis: "#1f883d", muted: "#dafbe1" },
inset: "#f6f8fa",
},
borderColor: {
accent: { emphasis: "#0969da" },
default: "#d1d9e0",
attention: { emphasis: "#9a6700" },
success: { emphasis: "#1a7f37" },
default: "#d1d9e0",
done: { emphasis: "#8250df" },
success: { emphasis: "#1a7f37" },
muted: "#d1d9e0b3",
translucent: "#1f232826",
},
@@ -69,4 +70,8 @@ export default defineGithubTheme({
borderColor: { num0: "#1f23280d" },
},
},
});
};
export const lightColors: ThemeColor = github2ThemeColor(lightGithubColors);
export default defineTheme(lightColors);

View File

@@ -1,104 +1,103 @@
import { defineGithubTheme } from "src/core/github";
import { prettylights2Chroma } from "src/core/prettylights";
import { defineTheme, type Chroma, type ThemeColor } from "src";
import { github2ThemeColor, type GithubColor } from "src/core/github";
import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
import { darkGithubColors } from "themes/dark";
export default defineGithubTheme(
{
isDarkTheme: true,
display: {
brown: { fgColor: "#b69a6d" },
cyan: { fgColor: "#07ace4" },
indigo: { fgColor: "#9899ec" },
lemon: { fgColor: "#ba9b12" },
olive: { fgColor: "#a2a626" },
teal: { fgColor: "#1cb0ab" },
},
diffBlob: {
addtionNum: { bgColor: "#57ab5a4d" },
addtionWord: { bgColor: "#46954a66" },
deletionNum: { bgColor: "#e5534b4d" },
deletionWord: { bgColor: "#e5534b66" },
hunkNum: { bgColor: { rest: "#143d79" } },
},
fgColor: {
accent: "#478be6",
attention: "#c69026",
danger: "#e5534b",
default: "#d1d7e0",
disabled: "#656c76",
done: "#986ee2",
muted: "#9198a1",
neutral: "#9198a1",
severe: "#cc6b2c",
sponsors: "#c96198",
success: "#57ab5a",
black: "#010409",
white: "#cdd9e5",
},
bgColor: {
accent: { emphasis: "#316dca", muted: "#4184e41a" },
attention: { muted: "#ae7c1426" },
success: { emphasis: "#347d39", muted: "#46954a26" },
danger: { muted: "#e5534b1a" },
done: { emphasis: "#8256d0" },
default: "#212830",
inset: "#151b23",
muted: "#262c36",
neutral: { muted: "#656c7633" },
},
borderColor: {
accent: { emphasis: "#316dca" },
default: "#3d444d",
attention: { emphasis: "#966600" },
success: { emphasis: "#347d39" },
done: { emphasis: "#8256d0" },
muted: "#3d444db3",
translucent: "#cdd9e526",
},
button: {
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#3b8640" } },
danger: { fgColor: { rest: "#ea5c53", hover: "#ffffff" }, bgColor: { hover: "#ad2e2c" } },
},
control: {
bgColor: { active: "#3d444d", hover: "#2f3742", rest: "#2a313c" },
transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } },
},
shadow: { floating: { small: "#01040966" } },
overlay: { backdrop: { bgColor: "#262c3666" } },
underlineNav: { borderColor: { active: "#ec775c" } },
contribution: {
default: {
bgColor: { num0: "#2a313c", num1: "#1b4721", num2: "#2b6a30", num3: "#46954a", num4: "#6bc46d" },
borderColor: { num0: "#0104090d" },
},
export const softDarkGithubColors: GithubColor = {
isDarkTheme: true,
display: darkGithubColors.display,
diffBlob: {
addtionNum: { bgColor: "#57ab5a4d" },
addtionWord: { bgColor: "#46954a66" },
deletionNum: { bgColor: "#e5534b4d" },
deletionWord: { bgColor: "#e5534b66" },
hunkNum: { bgColor: { rest: "#143d79" } },
},
fgColor: {
accent: "#478be6",
attention: "#c69026",
danger: "#e5534b",
default: "#d1d7e0",
disabled: "#656c76",
done: "#986ee2",
muted: "#9198a1",
neutral: "#9198a1",
severe: "#cc6b2c",
sponsors: "#c96198",
success: "#57ab5a",
black: "#010409",
white: "#cdd9e5",
},
bgColor: {
accent: { emphasis: "#316dca", muted: "#4184e41a" },
attention: { muted: "#ae7c1426" },
danger: { muted: "#e5534b1a" },
default: "#212830",
done: { emphasis: "#8256d0" },
muted: "#262c36",
neutral: { muted: "#656c7633" },
success: { emphasis: "#347d39", muted: "#46954a26" },
inset: "#151b23",
},
borderColor: {
accent: { emphasis: "#316dca" },
attention: { emphasis: "#966600" },
default: "#3d444d",
done: { emphasis: "#8256d0" },
success: { emphasis: "#347d39" },
muted: "#3d444db3",
translucent: "#cdd9e526",
},
button: {
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#3b8640" } },
danger: { fgColor: { rest: "#ea5c53", hover: "#ffffff" }, bgColor: { hover: "#ad2e2c" } },
},
control: {
bgColor: { active: "#3d444d", hover: "#2f3742", rest: "#2a313c" },
transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } },
},
shadow: { floating: { small: "#01040966" } },
overlay: { backdrop: { bgColor: "#262c3666" } },
underlineNav: { borderColor: { active: "#ec775c" } },
contribution: {
default: {
bgColor: { num0: "#2a313c", num1: "#1b4721", num2: "#2b6a30", num3: "#46954a", num4: "#6bc46d" },
borderColor: { num0: "#0104090d" },
},
},
prettylights2Chroma({
syntax: {
brackethighlighter: { angle: "#9198a1", unmatched: "#e5534b" },
carriage: { return: { bg: "#ad2e2c", text: "#f0f6fc" } },
comment: "#9198a1",
constant: "#6cb6ff",
constantOtherReferenceLink: "#96d0ff",
entity: "#dcbdfb",
entityTag: "#8ddb8c",
invalid: { illegal: { bg: "#922323", text: "#f0f6fc" } },
keyword: "#f47067",
markup: {
bold: "#f0f6fc",
changed: { bg: "#682d0f", text: "#ffddb0" },
deleted: { bg: "#78191b", text: "#ffd8d3" },
heading: "#316dca",
ignored: { bg: "#255ab2", text: "#f0f6fc" },
inserted: { bg: "#1b4721", text: "#b4f1b4" },
italic: "#f0f6fc",
list: "#eac55f",
},
metaDiffRange: "#dcbdfb",
storageModifierImport: "#f0f6fc",
string: "#96d0ff",
stringRegexp: "#8ddb8c",
sublimelinterGutterMark: "#3d444d",
variable: "#f69d50",
};
export const softDarkPrettylights: prettylightsColor = {
syntax: {
brackethighlighter: { angle: "#9198a1", unmatched: "#e5534b" },
carriage: { return: { bg: "#ad2e2c", text: "#f0f6fc" } },
comment: "#9198a1",
constant: "#6cb6ff",
constantOtherReferenceLink: "#96d0ff",
entity: "#dcbdfb",
entityTag: "#8ddb8c",
invalid: { illegal: { bg: "#922323", text: "#f0f6fc" } },
keyword: "#f47067",
markup: {
bold: "#f0f6fc",
changed: { bg: "#682d0f", text: "#ffddb0" },
deleted: { bg: "#78191b", text: "#ffd8d3" },
heading: "#316dca",
ignored: { bg: "#255ab2", text: "#f0f6fc" },
inserted: { bg: "#1b4721", text: "#b4f1b4" },
italic: "#f0f6fc",
list: "#eac55f",
},
})
);
metaDiffRange: "#dcbdfb",
storageModifierImport: "#f0f6fc",
string: "#96d0ff",
stringRegexp: "#8ddb8c",
sublimelinterGutterMark: "#3d444d",
variable: "#f69d50",
},
};
export const softDarkColors: ThemeColor = github2ThemeColor(softDarkGithubColors);
export const softDarkChroma: Chroma = prettylights2Chroma(softDarkPrettylights);
export default defineTheme(softDarkColors, softDarkChroma);

View File

@@ -0,0 +1,45 @@
import { defineTheme, type Chroma, type ThemeColor } from "src";
import { darkPrettylights } from "src/core/chroma";
import { github2ThemeColor, type GithubColor } from "src/core/github";
import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
import { colorblindDarkGithubColors, colorblindDarkPrettylights } from "themes/colorblind-dark";
import { darkGithubColors } from "themes/dark";
export const tritanopiaDarkGithubColors: GithubColor = {
...colorblindDarkGithubColors,
diffBlob: {
...colorblindDarkGithubColors.diffBlob,
deletionNum: darkGithubColors.diffBlob.deletionNum,
deletionWord: darkGithubColors.diffBlob.deletionWord,
},
fgColor: {
...colorblindDarkGithubColors.fgColor,
danger: darkGithubColors.fgColor.danger,
},
bgColor: {
...colorblindDarkGithubColors.bgColor,
danger: darkGithubColors.bgColor.danger,
},
button: {
...colorblindDarkGithubColors.button,
danger: darkGithubColors.button.danger,
},
};
export const tritanopiaDarkPrettylights: prettylightsColor = {
syntax: {
...darkPrettylights.syntax,
markup: {
...darkPrettylights.syntax.markup,
changed: { bg: "#67060c", text: "#ffdcd7" },
inserted: colorblindDarkPrettylights.syntax.markup.inserted,
},
stringRegexp: colorblindDarkPrettylights.syntax.stringRegexp,
variable: "#ffa198",
},
};
export const tritanopiaDarkColors: ThemeColor = github2ThemeColor(tritanopiaDarkGithubColors);
export const tritanopiaDarkChroma: Chroma = prettylights2Chroma(tritanopiaDarkPrettylights);
export default defineTheme(tritanopiaDarkColors, tritanopiaDarkChroma);

View File

@@ -0,0 +1,45 @@
import { defineTheme, type Chroma, type ThemeColor } from "src";
import { lightPrettylights } from "src/core/chroma";
import { github2ThemeColor, type GithubColor } from "src/core/github";
import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
import { colorblindLightGithubColors, colorblindLightPrettylights } from "themes/colorblind-light";
import { lightGithubColors } from "themes/light";
export const tritanopiaLightGithubColors: GithubColor = {
...colorblindLightGithubColors,
diffBlob: {
...colorblindLightGithubColors.diffBlob,
deletionNum: lightGithubColors.diffBlob.deletionNum,
deletionWord: lightGithubColors.diffBlob.deletionWord,
},
fgColor: {
...colorblindLightGithubColors.fgColor,
danger: lightGithubColors.fgColor.danger,
},
bgColor: {
...colorblindLightGithubColors.bgColor,
danger: lightGithubColors.bgColor.danger,
},
button: {
...colorblindLightGithubColors.button,
danger: lightGithubColors.button.danger,
},
};
export const tritanopiaLightPrettylights: prettylightsColor = {
syntax: {
...lightPrettylights.syntax,
markup: {
...lightPrettylights.syntax.markup,
changed: { bg: "#ffcecb", text: "#a40e26" },
inserted: colorblindLightPrettylights.syntax.markup.inserted,
},
stringRegexp: colorblindLightPrettylights.syntax.stringRegexp,
variable: "#a40e26",
},
};
export const tritanopiaLightColors: ThemeColor = github2ThemeColor(tritanopiaLightGithubColors);
export const tritanopiaLightChroma: Chroma = prettylights2Chroma(tritanopiaLightPrettylights);
export default defineTheme(tritanopiaLightColors, tritanopiaLightChroma);