亮色主题适配

This commit is contained in:
lutinglt
2025-08-07 18:26:21 +08:00
parent 0a6770c28e
commit 065d7893d8
8 changed files with 19 additions and 28 deletions

17
.github/release.md vendored
View File

@@ -1,20 +1,11 @@
## ✨ Feature
#### CSS 变量
- 支持亮色主题
- 支持自定义探索/组织/用户页面的仓库列表列数
- 支持自定义探索/组织页面的用户/组织列表列数
## 🎈 Perf
## 🌈 Style
#### 更符合 GitHub 风格
- 同步 Issue/PR 的评论样式
- 同步表情菜单样式
- 同步探索/组织/用户页面的仓库列表样式
- 同步探索/组织页面的用户列表样式
- 同步探索页面的组织列表样式
- 优化差异对比的代码折叠/展开按钮的高度和动画效果
## 🐞 Fix
- 修复探索页面下仓库的类型标签意外触发悬浮效果
- 修复仓库页面与探索页面下仓库主题标签字重不一致的问题

View File

@@ -324,7 +324,7 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
},
primary: {
fgColor: {
accent: saturate(0.1, scaleColorLight(githubColor.fgColor.success, githubColor.isDarkTheme ? 5 : -5)),
accent: saturate(0.1, scaleColorLight(githubColor.fgColor.success, githubColor.isDarkTheme ? 10 : -10)),
rest: githubColor.button.primary.fgColor.rest,
},
bgColor: {
@@ -379,8 +379,8 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
num3: githubColor.contribution.default.bgColor.num3,
num4: githubColor.contribution.default.bgColor.num4,
num5: saturate(
0.1,
scaleColorLight(githubColor.contribution.default.bgColor.num4, githubColor.isDarkTheme ? 30 : -30)
0.2,
scaleColorLight(githubColor.contribution.default.bgColor.num4, githubColor.isDarkTheme ? 58 : -58)
),
},
borderColor: {

View File

@@ -29,11 +29,11 @@ export const diff = css`
}
/* 展开/收缩按钮 */
.code-expander-button {
height: 24px !important;
line-height: 24px;
height: 28px !important;
&:hover {
background: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.white}
}
}
/* 行号居中 */

View File

@@ -42,19 +42,19 @@ export const babel = css`
border-radius: 25px !important;
&.green {
color: ${themeVars.color.text.self} !important;
color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.success.emphasis} !important;
border-color: ${themeVars.github.bgColor.success.emphasis} !important;
}
&.red {
color: ${themeVars.color.text.self} !important;
color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
border-color: ${themeVars.github.bgColor.done.emphasis} !important;
}
&.purple {
color: ${themeVars.color.text.self} !important;
color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
border-color: ${themeVars.github.bgColor.done.emphasis} !important;
}

View File

@@ -80,12 +80,13 @@ export const repoTopic = css`
#repo-topics .ui.label.repo-topic {
border-radius: 25px;
font-size: 12px;
font-weight: 500;
padding: 5px 10px;
background-color: ${themeVars.github.bgColor.accent.muted};
color: ${themeVars.github.fgColor.accent};
&:hover {
background-color: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.text.self};
color: ${themeVars.color.white};
}
}
`;

View File

@@ -68,7 +68,7 @@ export const navbarRight = css`
.navbar-profile-admin {
background-color: ${themeVars.github.bgColor.accent.emphasis};
border-radius: 25px;
color: ${themeVars.color.text.self};
color: ${themeVars.color.white};
font-size: 8px;
font-weight: 600;
padding: 2px 5px;

View File

@@ -9,6 +9,8 @@ export const transition = css`
.job-step-logs,
.job-brief-item,
.repo-file-cell,
// 差异对比的代码折叠按钮
.code-expander-button,
.tippy-box .flex-items-block .item,
.clone-panel-tab .item,
.ui.form select,

View File

@@ -1,10 +1,7 @@
import { defineGithubTheme } from "src/core/github";
// [TODO] 亮色主题下 PR/Issue 的标签文字颜色
// 亮色主题下仓库主题标签 hover 时的文字颜色
// 头像的管理员标识文字颜色
// 差异对比的展开按钮 hover 时的文字颜色
// chroma 语法高亮的颜色
// [TODO] chroma 语法高亮的颜色
export default defineGithubTheme({
isDarkTheme: false,
display: {