mirror of
https://github.com/lutinglt/gitea-github-theme.git
synced 2025-10-26 04:40:31 +00:00
修改外观设置中显示的主题名称
This commit is contained in:
3
.github/release.md
vendored
3
.github/release.md
vendored
@@ -12,6 +12,8 @@ determined.
|
||||
|
||||
### ✨ Feature
|
||||
|
||||
- 修改外观设置中显示的主题名称
|
||||
|
||||
#### CSS 变量
|
||||
|
||||
- 新增 `--custom-branch-menu-width` 变量, 用于设置分支菜单的宽度
|
||||
@@ -59,6 +61,7 @@ determined.
|
||||
- 修复 Wiki 页面和二级导航栏组织页面的团队菜单的圆角问题
|
||||
- 修复创建工单页面样式
|
||||
- 修复归档仓库 Issue 时间线过长插入归档信息框
|
||||
- 修复亮色主题下的 PR 合并操作评论的头像和按钮图标颜色
|
||||
|
||||
## 📃 English (From AI)
|
||||
|
||||
|
||||
@@ -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)" });
|
||||
}
|
||||
|
||||
@@ -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}`,
|
||||
});
|
||||
}
|
||||
// 删除原始的样式文件, 自动颜色主题因为删除, 永远不会生成两次
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -6,3 +6,4 @@
|
||||
import "./public";
|
||||
// 组件样式
|
||||
import "./components";
|
||||
|
||||
|
||||
25
styles/public/animation.ts
Normal file
25
styles/public/animation.ts
Normal 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);
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user