From ae9bc3cbb5e9653b212d492c7dfe1fdf7e200916 Mon Sep 17 00:00:00 2001 From: lutinglt Date: Tue, 9 Sep 2025 23:48:55 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=A4=96=E8=A7=82=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E4=B8=AD=E6=98=BE=E7=A4=BA=E7=9A=84=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E5=90=8D=E7=A7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/release.md | 3 +++ src/core/theme.ts | 17 ++++------------- src/core/vite.ts | 23 +++++++++++++++++------ src/types/vars.ts | 5 +++++ styles/components/issue.ts | 24 +++++++++++++++++++++++- styles/components/signin.ts | 9 +++++++++ styles/index.ts | 1 + styles/public/animation.ts | 25 +++++++++++++++++++++++++ styles/public/button.ts | 2 +- 9 files changed, 88 insertions(+), 21 deletions(-) create mode 100644 styles/public/animation.ts diff --git a/.github/release.md b/.github/release.md index c6bad05..a6cac3e 100644 --- a/.github/release.md +++ b/.github/release.md @@ -12,6 +12,8 @@ determined. ### ✨ Feature +- 修改外观设置中显示的主题名称 + #### CSS 变量 - 新增 `--custom-branch-menu-width` 变量, 用于设置分支菜单的宽度 @@ -59,6 +61,7 @@ determined. - 修复 Wiki 页面和二级导航栏组织页面的团队菜单的圆角问题 - 修复创建工单页面样式 - 修复归档仓库 Issue 时间线过长插入归档信息框 +- 修复亮色主题下的 PR 合并操作评论的头像和按钮图标颜色 ## 📃 English (From AI) diff --git a/src/core/theme.ts b/src/core/theme.ts index 7e0ae41..5747328 100644 --- a/src/core/theme.ts +++ b/src/core/theme.ts @@ -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>; @@ -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)" }); } diff --git a/src/core/vite.ts b/src/core/vite.ts index 3c32992..b9873db 100644 --- a/src/core/vite.ts +++ b/src/core/vite.ts @@ -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}`, }); } // 删除原始的样式文件, 自动颜色主题因为删除, 永远不会生成两次 diff --git a/src/types/vars.ts b/src/types/vars.ts index 27d4d1a..3110b49 100644 --- a/src/types/vars.ts +++ b/src/types/vars.ts @@ -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"; diff --git a/styles/components/issue.ts b/styles/components/issue.ts index 0f82a67..cfede77 100644 --- a/styles/components/issue.ts +++ b/styles/components/issue.ts @@ -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; diff --git a/styles/components/signin.ts b/styles/components/signin.ts index 1545234..a826da8 100644 --- a/styles/components/signin.ts +++ b/styles/components/signin.ts @@ -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; diff --git a/styles/index.ts b/styles/index.ts index b20025a..ed05aa8 100644 --- a/styles/index.ts +++ b/styles/index.ts @@ -6,3 +6,4 @@ import "./public"; // 组件样式 import "./components"; + diff --git a/styles/public/animation.ts b/styles/public/animation.ts new file mode 100644 index 0000000..a9fb2d8 --- /dev/null +++ b/styles/public/animation.ts @@ -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); + } + } +`; diff --git a/styles/public/button.ts b/styles/public/button.ts index f0fbebb..81f2543 100644 --- a/styles/public/button.ts +++ b/styles/public/button.ts @@ -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,