mirror of
https://github.com/lutinglt/gitea-github-theme.git
synced 2025-10-26 13:00:31 +00:00
修改外观设置中显示的主题名称
This commit is contained in:
3
.github/release.md
vendored
3
.github/release.md
vendored
@@ -12,6 +12,8 @@ determined.
|
|||||||
|
|
||||||
### ✨ Feature
|
### ✨ Feature
|
||||||
|
|
||||||
|
- 修改外观设置中显示的主题名称
|
||||||
|
|
||||||
#### CSS 变量
|
#### CSS 变量
|
||||||
|
|
||||||
- 新增 `--custom-branch-menu-width` 变量, 用于设置分支菜单的宽度
|
- 新增 `--custom-branch-menu-width` 变量, 用于设置分支菜单的宽度
|
||||||
@@ -59,6 +61,7 @@ determined.
|
|||||||
- 修复 Wiki 页面和二级导航栏组织页面的团队菜单的圆角问题
|
- 修复 Wiki 页面和二级导航栏组织页面的团队菜单的圆角问题
|
||||||
- 修复创建工单页面样式
|
- 修复创建工单页面样式
|
||||||
- 修复归档仓库 Issue 时间线过长插入归档信息框
|
- 修复归档仓库 Issue 时间线过长插入归档信息框
|
||||||
|
- 修复亮色主题下的 PR 合并操作评论的头像和按钮图标颜色
|
||||||
|
|
||||||
## 📃 English (From AI)
|
## 📃 English (From AI)
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { createGlobalTheme, globalKeyframes, globalStyle } from "@vanilla-extract/css";
|
import { createGlobalTheme, globalStyle } from "@vanilla-extract/css";
|
||||||
import { otherThemeVars, themeVars } from "src/types/vars";
|
import { otherThemeVars, themeInfoVars, themeVars } from "src/types/vars";
|
||||||
import type { MapLeafNodes, WithOptionalLayer } from "./types";
|
import type { MapLeafNodes, WithOptionalLayer } from "./types";
|
||||||
|
|
||||||
export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
|
export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
|
||||||
@@ -34,9 +34,7 @@ const emoji = `
|
|||||||
|
|
||||||
export function createTheme(theme: Theme): void {
|
export function createTheme(theme: Theme): void {
|
||||||
const isDarkTheme: boolean = JSON.parse(theme.isDarkTheme);
|
const isDarkTheme: boolean = JSON.parse(theme.isDarkTheme);
|
||||||
if (isDarkTheme) {
|
createGlobalTheme(":root", themeInfoVars, { version: "1.24.6.250909" });
|
||||||
globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" });
|
|
||||||
}
|
|
||||||
createGlobalTheme(":root", themeVars, theme);
|
createGlobalTheme(":root", themeVars, theme);
|
||||||
createGlobalTheme(":root", otherThemeVars, {
|
createGlobalTheme(":root", otherThemeVars, {
|
||||||
border: { radius: "6px" },
|
border: { radius: "6px" },
|
||||||
@@ -53,12 +51,5 @@ export function createTheme(theme: Theme): void {
|
|||||||
accentColor: themeVars.color.accent,
|
accentColor: themeVars.color.accent,
|
||||||
colorScheme: isDarkTheme ? "dark" : "light",
|
colorScheme: isDarkTheme ? "dark" : "light",
|
||||||
});
|
});
|
||||||
globalKeyframes(overlayAppearDown, {
|
if (isDarkTheme) globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" });
|
||||||
"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)" },
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -50,6 +50,11 @@ export function themeInput(outDir: string, themeDir: string, mode: string): { [k
|
|||||||
return input;
|
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-";
|
const prefix = "theme-github-";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -82,23 +87,29 @@ export function themePlugin(): Plugin {
|
|||||||
const fileName = `${prefix}${value.fileName}`;
|
const fileName = `${prefix}${value.fileName}`;
|
||||||
const originalFileName = value.originalFileNames.pop();
|
const originalFileName = value.originalFileNames.pop();
|
||||||
const type = value.type;
|
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 });
|
this.emitFile({ name, fileName, source, type, originalFileName });
|
||||||
// 自动颜色主题
|
// 自动颜色主题
|
||||||
const isDark = key.endsWith("dark.css");
|
const nameGroup = key.split(".")[0].split("-");
|
||||||
const darkName = key.replace("light.css", "dark.css");
|
const isDark = nameGroup.at(-1) === "dark";
|
||||||
const lightName = key.replace("dark.css", "light.css");
|
const darkName = key.replace("light", "dark");
|
||||||
const autoName = `${prefix}${key.replace("dark.css", "auto.css").replace("light.css", "auto.css")}`;
|
const lightName = darkName.replace("dark", "light");
|
||||||
|
const autoName = `${prefix}${darkName.replace("dark", "auto")}`;
|
||||||
const findTheme = isDark ? lightName : darkName;
|
const findTheme = isDark ? lightName : darkName;
|
||||||
if (findTheme in bundle) {
|
if (findTheme in bundle) {
|
||||||
const lightContent = `@import "./${prefix}${lightName}" (prefers-color-scheme: light);`;
|
const lightContent = `@import "./${prefix}${lightName}" (prefers-color-scheme: light);`;
|
||||||
const darkContent = `@import "./${prefix}${darkName}" (prefers-color-scheme: dark);`;
|
const darkContent = `@import "./${prefix}${darkName}" (prefers-color-scheme: dark);`;
|
||||||
|
const autoNameGroup = nameGroup.slice(0, -1);
|
||||||
|
autoNameGroup.push("auto");
|
||||||
|
const metaInfo = getAutoThemeInfo(autoNameGroup);
|
||||||
this.emitFile({
|
this.emitFile({
|
||||||
name: autoName,
|
name: autoName,
|
||||||
fileName: autoName,
|
fileName: autoName,
|
||||||
type: "asset",
|
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" },
|
org: { repolistColumns: "org-repolist-columns", userlistColumns: "org-userlist-columns" },
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const themeInfo = {
|
||||||
|
version: null,
|
||||||
|
};
|
||||||
|
|
||||||
export const themeVars = createGlobalThemeContract(vars, varMapper());
|
export const themeVars = createGlobalThemeContract(vars, varMapper());
|
||||||
export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper());
|
export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper());
|
||||||
export const customThemeVars = createGlobalThemeContract(customVars, varMapper("custom"));
|
export const customThemeVars = createGlobalThemeContract(customVars, varMapper("custom"));
|
||||||
|
export const themeInfoVars = createGlobalThemeContract(themeInfo, varMapper("theme"));
|
||||||
|
|
||||||
export { css } from "@linaria/core";
|
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`
|
export const dropdown = css`
|
||||||
.repository {
|
.repository {
|
||||||
// Issue/PR 列表下的所有筛选菜单
|
// Issue/PR 列表下的所有筛选菜单
|
||||||
@@ -379,7 +389,7 @@ export const prMerge = css`
|
|||||||
.repository.view.issue .comment-list .timeline-item.pull-merge-box {
|
.repository.view.issue .comment-list .timeline-item.pull-merge-box {
|
||||||
// 头像
|
// 头像
|
||||||
.timeline-avatar {
|
.timeline-avatar {
|
||||||
color: ${themeVars.color.text.self} !important;
|
color: ${themeVars.color.white} !important;
|
||||||
border-radius: ${otherThemeVars.border.radius};
|
border-radius: ${otherThemeVars.border.radius};
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
@@ -459,6 +469,12 @@ export const prMerge = css`
|
|||||||
padding: 16px;
|
padding: 16px;
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
.no-header {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
@@ -552,9 +568,15 @@ export const issueSidebar = css`
|
|||||||
.ui.depending > div,
|
.ui.depending > div,
|
||||||
.flex-text-block,
|
.flex-text-block,
|
||||||
.ui.list,
|
.ui.list,
|
||||||
|
.toggle-wip,
|
||||||
p {
|
p {
|
||||||
${sidebarPadding};
|
${sidebarPadding};
|
||||||
}
|
}
|
||||||
|
// 允许维护者编辑
|
||||||
|
> .ui.checkbox {
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 4px 8px;
|
||||||
|
}
|
||||||
.issue-sidebar-combo {
|
.issue-sidebar-combo {
|
||||||
.ui.dropdown > a.fixed-text.muted {
|
.ui.dropdown > a.fixed-text.muted {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -40,6 +40,15 @@ export const signIn = css`
|
|||||||
.button {
|
.button {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
.divider.divider-text {
|
||||||
|
margin: 20px 0px;
|
||||||
|
}
|
||||||
|
#oauth2-login-navigator-inner {
|
||||||
|
gap: 8px;
|
||||||
|
.ui.button svg {
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.ui.top.attached.header.segment {
|
.ui.top.attached.header.segment {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|||||||
@@ -6,3 +6,4 @@
|
|||||||
import "./public";
|
import "./public";
|
||||||
// 组件样式
|
// 组件样式
|
||||||
import "./components";
|
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 {
|
.ui.primary.buttons .button svg {
|
||||||
color: ${themeVars.color.text.self};
|
color: ${themeVars.color.white};
|
||||||
}
|
}
|
||||||
.ui.primary {
|
.ui.primary {
|
||||||
&.button,
|
&.button,
|
||||||
|
|||||||
Reference in New Issue
Block a user