修改外观设置中显示的主题名称

This commit is contained in:
lutinglt
2025-09-09 23:48:55 +08:00
parent dc0f43a082
commit ae9bc3cbb5
9 changed files with 88 additions and 21 deletions

3
.github/release.md vendored
View File

@@ -12,6 +12,8 @@ determined.
### ✨ Feature
- 修改外观设置中显示的主题名称
#### CSS 变量
- 新增 `--custom-branch-menu-width` 变量, 用于设置分支菜单的宽度
@@ -59,6 +61,7 @@ determined.
- 修复 Wiki 页面和二级导航栏组织页面的团队菜单的圆角问题
- 修复创建工单页面样式
- 修复归档仓库 Issue 时间线过长插入归档信息框
- 修复亮色主题下的 PR 合并操作评论的头像和按钮图标颜色
## 📃 English (From AI)

View File

@@ -1,5 +1,5 @@
import { createGlobalTheme, globalKeyframes, globalStyle } from "@vanilla-extract/css";
import { otherThemeVars, themeVars } from "src/types/vars";
import { createGlobalTheme, globalStyle } from "@vanilla-extract/css";
import { otherThemeVars, themeInfoVars, themeVars } from "src/types/vars";
import type { MapLeafNodes, WithOptionalLayer } from "./types";
export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
@@ -34,9 +34,7 @@ const emoji = `
export function createTheme(theme: Theme): void {
const isDarkTheme: boolean = JSON.parse(theme.isDarkTheme);
if (isDarkTheme) {
globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" });
}
createGlobalTheme(":root", themeInfoVars, { version: "1.24.6.250909" });
createGlobalTheme(":root", themeVars, theme);
createGlobalTheme(":root", otherThemeVars, {
border: { radius: "6px" },
@@ -53,12 +51,5 @@ export function createTheme(theme: Theme): void {
accentColor: themeVars.color.accent,
colorScheme: isDarkTheme ? "dark" : "light",
});
globalKeyframes(overlayAppearDown, {
"0%": { opacity: 0, transform: "translateY(-8px)" },
"100%": { opacity: 1, transform: "translateY(0)" },
});
globalKeyframes(overlayAppearUp, {
"0%": { opacity: 0, transform: "translateY(8px)" },
"100%": { opacity: 1, transform: "translateY(0)" },
});
if (isDarkTheme) globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" });
}

View File

@@ -50,6 +50,11 @@ export function themeInput(outDir: string, themeDir: string, mode: string): { [k
return input;
}
function getAutoThemeInfo(nameGroup: string[]): string {
const displayName = nameGroup.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
return `gitea-theme-meta-info { --theme-display-name: GitHub ${displayName};}`; // 不要省略分号, 也不要追加任何变量, 否则 Gitea 不识别
}
const prefix = "theme-github-";
/**
@@ -82,23 +87,29 @@ export function themePlugin(): Plugin {
const fileName = `${prefix}${value.fileName}`;
const originalFileName = value.originalFileNames.pop();
const type = value.type;
const source = `${styles}${value.source.toString()}`;
// 合并样式文件和主题信息
const meta = getAutoThemeInfo(key.split(".")[0].split("-"));
const source = `${meta}\n${value.source.toString()}${styles}`;
// 添加主题到输出
this.emitFile({ name, fileName, source, type, originalFileName });
// 自动颜色主题
const isDark = key.endsWith("dark.css");
const darkName = key.replace("light.css", "dark.css");
const lightName = key.replace("dark.css", "light.css");
const autoName = `${prefix}${key.replace("dark.css", "auto.css").replace("light.css", "auto.css")}`;
const nameGroup = key.split(".")[0].split("-");
const isDark = nameGroup.at(-1) === "dark";
const darkName = key.replace("light", "dark");
const lightName = darkName.replace("dark", "light");
const autoName = `${prefix}${darkName.replace("dark", "auto")}`;
const findTheme = isDark ? lightName : darkName;
if (findTheme in bundle) {
const lightContent = `@import "./${prefix}${lightName}" (prefers-color-scheme: light);`;
const darkContent = `@import "./${prefix}${darkName}" (prefers-color-scheme: dark);`;
const autoNameGroup = nameGroup.slice(0, -1);
autoNameGroup.push("auto");
const metaInfo = getAutoThemeInfo(autoNameGroup);
this.emitFile({
name: autoName,
fileName: autoName,
type: "asset",
source: `${lightContent}\n${darkContent}`,
source: `${lightContent}\n${darkContent}\n${metaInfo}`,
});
}
// 删除原始的样式文件, 自动颜色主题因为删除, 永远不会生成两次

View File

@@ -41,8 +41,13 @@ const customVars = {
org: { repolistColumns: "org-repolist-columns", userlistColumns: "org-userlist-columns" },
};
const themeInfo = {
version: null,
};
export const themeVars = createGlobalThemeContract(vars, varMapper());
export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper());
export const customThemeVars = createGlobalThemeContract(customVars, varMapper("custom"));
export const themeInfoVars = createGlobalThemeContract(themeInfo, varMapper("theme"));
export { css } from "@linaria/core";

View File

@@ -360,6 +360,16 @@ export const comment = css`
}
`;
// 评论书写框
export const commentForm = css`
.repository .comment.form .content .segment {
&::before,
&::after {
display: none;
}
}
`;
export const dropdown = css`
.repository {
// Issue/PR 列表下的所有筛选菜单
@@ -379,7 +389,7 @@ export const prMerge = css`
.repository.view.issue .comment-list .timeline-item.pull-merge-box {
// 头像
.timeline-avatar {
color: ${themeVars.color.text.self} !important;
color: ${themeVars.color.white} !important;
border-radius: ${otherThemeVars.border.radius};
width: 40px;
height: 40px;
@@ -459,6 +469,12 @@ export const prMerge = css`
padding: 16px;
display: grid;
gap: 8px;
.no-header {
&::before,
&::after {
display: none;
}
}
}
}
`;
@@ -552,9 +568,15 @@ export const issueSidebar = css`
.ui.depending > div,
.flex-text-block,
.ui.list,
.toggle-wip,
p {
${sidebarPadding};
}
// 允许维护者编辑
> .ui.checkbox {
font-weight: 400;
margin: 4px 8px;
}
.issue-sidebar-combo {
.ui.dropdown > a.fixed-text.muted {
align-items: center;

View File

@@ -40,6 +40,15 @@ export const signIn = css`
.button {
height: 40px;
}
.divider.divider-text {
margin: 20px 0px;
}
#oauth2-login-navigator-inner {
gap: 8px;
.ui.button svg {
width: 18px;
}
}
}
.ui.top.attached.header.segment {
font-size: 14px;

View File

@@ -6,3 +6,4 @@
import "./public";
// 组件样式
import "./components";

View File

@@ -0,0 +1,25 @@
import { overlayAppearDown, overlayAppearUp } from "src/core/theme";
import { css } from "src/types/vars";
export const keyframe = css`
@keyframes ${overlayAppearDown} {
0% {
opacity: 0;
transform: translateY(-8px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes ${overlayAppearUp} {
0% {
opacity: 0;
transform: translateY(8px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
`;

View File

@@ -28,7 +28,7 @@ export const baseButton = css`
}
// 主色调按钮保持白色
.ui.primary.buttons .button svg {
color: ${themeVars.color.text.self};
color: ${themeVars.color.white};
}
.ui.primary {
&.button,