Compare commits
30 Commits
v1.24.4.25
...
68d632a6b3
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
68d632a6b3 | ||
|
|
2b5962e1c2 | ||
|
|
7cd7a48d17 | ||
|
|
ebc6463c30 | ||
|
|
77c3842a43 | ||
|
|
d311072ca0 | ||
|
|
8b4102d8d9 | ||
|
|
73b5397d77 | ||
|
|
134c383cdb | ||
|
|
c6e73000bd | ||
|
|
dbf3547ad5 | ||
|
|
5235dae367 | ||
|
|
a9df7a31e1 | ||
|
|
dd6e97be1d | ||
|
|
29f983cce6 | ||
|
|
fca10130a3 | ||
|
|
8676816342 | ||
|
|
9bcea89fcb | ||
|
|
26deec78ff | ||
|
|
ffb7fa810b | ||
|
|
2083d3026b | ||
|
|
5037e46447 | ||
|
|
cd2f7579b1 | ||
|
|
1b237b12f3 | ||
|
|
a8453a87a5 | ||
|
|
6aef26cdc8 | ||
|
|
a4c94cb34d | ||
|
|
8c45f44309 | ||
|
|
1c9b02ea88 | ||
|
|
61313d5644 |
15
.github/FUNDING.yml
vendored
Normal 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']
|
||||
16
.github/release-template.md
vendored
@@ -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
@@ -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
|
||||
|
||||
6
.github/workflows/release.yml
vendored
@@ -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 }}
|
||||
|
||||
@@ -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 语法, 如果一定要用请说明原因.
|
||||
|
||||
38
README.md
@@ -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
@@ -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)
|
||||
@@ -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
|
After Width: | Height: | Size: 260 KiB |
BIN
screenshots/colorblind-light.png
vendored
Normal file
|
After Width: | Height: | Size: 259 KiB |
BIN
screenshots/dark.png
vendored
|
Before Width: | Height: | Size: 202 KiB After Width: | Height: | Size: 260 KiB |
BIN
screenshots/en/colorblind-dark.png
Normal file
|
After Width: | Height: | Size: 278 KiB |
BIN
screenshots/en/colorblind-light.png
Normal file
|
After Width: | Height: | Size: 278 KiB |
BIN
screenshots/en/dark.png
Normal file
|
After Width: | Height: | Size: 278 KiB |
BIN
screenshots/en/light.png
Normal file
|
After Width: | Height: | Size: 278 KiB |
BIN
screenshots/en/soft-dark.png
Normal file
|
After Width: | Height: | Size: 279 KiB |
BIN
screenshots/light.png
vendored
|
Before Width: | Height: | Size: 201 KiB After Width: | Height: | Size: 259 KiB |
BIN
screenshots/soft-dark.png
vendored
|
Before Width: | Height: | Size: 202 KiB After Width: | Height: | Size: 261 KiB |
@@ -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);
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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};
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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"
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { css, themeVars, otherThemeVars } from "src/types/vars";
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
|
||||
export const attached = css`
|
||||
// 设置右面板的内容
|
||||
|
||||
74
themes/colorblind-dark.css.ts
Normal 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);
|
||||
74
themes/colorblind-light.css.ts
Normal 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);
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
45
themes/tritanopia-dark.css.ts
Normal 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);
|
||||
45
themes/tritanopia-light.css.ts
Normal 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);
|
||||