亮色主题适配

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

View File

@@ -324,7 +324,7 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
}, },
primary: { primary: {
fgColor: { 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, rest: githubColor.button.primary.fgColor.rest,
}, },
bgColor: { bgColor: {
@@ -379,8 +379,8 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
num3: githubColor.contribution.default.bgColor.num3, num3: githubColor.contribution.default.bgColor.num3,
num4: githubColor.contribution.default.bgColor.num4, num4: githubColor.contribution.default.bgColor.num4,
num5: saturate( num5: saturate(
0.1, 0.2,
scaleColorLight(githubColor.contribution.default.bgColor.num4, githubColor.isDarkTheme ? 30 : -30) scaleColorLight(githubColor.contribution.default.bgColor.num4, githubColor.isDarkTheme ? 58 : -58)
), ),
}, },
borderColor: { borderColor: {

View File

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

View File

@@ -42,19 +42,19 @@ export const babel = css`
border-radius: 25px !important; border-radius: 25px !important;
&.green { &.green {
color: ${themeVars.color.text.self} !important; color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.success.emphasis} !important; background-color: ${themeVars.github.bgColor.success.emphasis} !important;
border-color: ${themeVars.github.bgColor.success.emphasis} !important; border-color: ${themeVars.github.bgColor.success.emphasis} !important;
} }
&.red { &.red {
color: ${themeVars.color.text.self} !important; color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.done.emphasis} !important; background-color: ${themeVars.github.bgColor.done.emphasis} !important;
border-color: ${themeVars.github.bgColor.done.emphasis} !important; border-color: ${themeVars.github.bgColor.done.emphasis} !important;
} }
&.purple { &.purple {
color: ${themeVars.color.text.self} !important; color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.done.emphasis} !important; background-color: ${themeVars.github.bgColor.done.emphasis} !important;
border-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 { #repo-topics .ui.label.repo-topic {
border-radius: 25px; border-radius: 25px;
font-size: 12px; font-size: 12px;
font-weight: 500;
padding: 5px 10px; padding: 5px 10px;
background-color: ${themeVars.github.bgColor.accent.muted}; background-color: ${themeVars.github.bgColor.accent.muted};
color: ${themeVars.github.fgColor.accent}; color: ${themeVars.github.fgColor.accent};
&:hover { &:hover {
background-color: ${themeVars.github.bgColor.accent.emphasis}; 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 { .navbar-profile-admin {
background-color: ${themeVars.github.bgColor.accent.emphasis}; background-color: ${themeVars.github.bgColor.accent.emphasis};
border-radius: 25px; border-radius: 25px;
color: ${themeVars.color.text.self}; color: ${themeVars.color.white};
font-size: 8px; font-size: 8px;
font-weight: 600; font-weight: 600;
padding: 2px 5px; padding: 2px 5px;

View File

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

View File

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