sky/gitea-github-theme
1
0
Fork 0
mirror of https://github.com/lutinglt/gitea-github-theme.git synced 2025-10-28 07:00:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(chroma): 代码高亮重构 (#9)

Browse Source 
* feat(chroma): 代码高亮重构

* todo

* release 亮色适配

* 发布页分支按钮高度修正

* chroma变量和修复注册页导航栏

* chroma 重构适配亮色

---------

Co-authored-by: lutinglt <lutinglt@users.noreply.github.com>
This commit is contained in:
鲁汀
2025-08-10 14:06:08 +08:00
committed by GitHub
parent 065d7893d8
commit dca1c34518
18 changed files with 835 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
styles/components/clone.ts
View File

@@ -54,7 +54,7 @@ export const clone = css`
font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
min-width: 150px;
max-width: 400px;
width: ${customThemeVars.custom.cloneMenuWidth};
width: ${customThemeVars.cloneMenuWidth};
&:hover {
border: 1px solid ${themeVars.color.light.border};
border-radius: ${otherThemeVars.border.radius};

2
styles/components/commit.ts
View File

@@ -8,7 +8,7 @@ export const commit = css`
// 作者
.author {
// 作者名称
a.author-wrapper {
.author-wrapper {
color: ${themeVars.color.text.light.num1};
}
}

1
styles/components/diff.ts
View File

@@ -29,6 +29,7 @@ export const diff = css`
}
/* 展开/收缩按钮 */
.code-expander-button {
color: ${themeVars.color.text.light.num1};
height: 28px !important;
&:hover {

10
styles/components/explore.ts
View File

@@ -1,9 +1,9 @@
import { fallbackVar } from "src/functions";
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
const userRepoVar = fallbackVar(customThemeVars.custom.userRepolistColumns, "2");
const exploreRepoVar = fallbackVar(customThemeVars.custom.explore.repolistColumns, "2");
const orgRepoVar = fallbackVar(customThemeVars.custom.org.repolistColumns, "1");
const userRepoVar = fallbackVar(customThemeVars.userRepolistColumns, "2");
const exploreRepoVar = fallbackVar(customThemeVars.explore.repolistColumns, "2");
const orgRepoVar = fallbackVar(customThemeVars.org.repolistColumns, "1");
// 仓库列表
export const repoList = css`
@@ -88,8 +88,8 @@ export const repoList = css`
}
`;
const exploreUserVar = fallbackVar(customThemeVars.custom.explore.userlistColumns, "3");
const orgUserVar = fallbackVar(customThemeVars.custom.org.userlistColumns, "2");
const exploreUserVar = fallbackVar(customThemeVars.explore.userlistColumns, "3");
const orgUserVar = fallbackVar(customThemeVars.org.userlistColumns, "2");
// 用户列表
export const userList = css`

3
styles/components/release.ts
View File

@@ -11,6 +11,7 @@ export const releaseTagMenu = css`
font-weight: 500;
&.active {
background: ${themeVars.github.bgColor.accent.emphasis} !important;
color: ${themeVars.color.white};
}
}
}
@@ -101,6 +102,8 @@ export const rightButton = css`
&.tags {
.ui.small.button {
background-color: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};
color: ${themeVars.color.text.light.self};
padding: 5px 16px;
min-height: auto;
line-height: 20px;

505
styles/public/chroma.ts
View File

@@ -1,277 +1,286 @@
import { css } from "src/types/vars";
import { css, themeVars } from "src/types/vars";
export const chroma = css`
// https://github.com/go-gitea/gitea/blob/main/web_src/css/chroma/base.css
export const chromaBase = css`
.chroma {
background-color: var(--color-code-bg);
// LineTableTD
.lntd {
vertical-align: top;
border: 0;
margin: 0;
padding: 0;
margin: 0;
border: 0;
}
// LineTable
.lntable {
border-spacing: 0;
padding: 0;
margin: 0;
border: 0;
width: auto;
margin: 0;
padding: 0;
display: block;
overflow: auto;
}
.hl {
width: 100%;
display: block;
}
// LineHighlight
.hl {
display: block;
width: 100%;
}
// LineNumbersTable
.lnt,
// LineNumbers
.ln {
margin-right: 0.4em;
padding: 0 0.4em;
}
// GenericStrong
.gs {
font-weight: var(--font-weight-semibold);
}
// GenericUnderline
.gl {
text-decoration: underline;
}
}
`;
.bp {
color: #fabd2f;
}
.c,
.c1,
.ch,
.cm {
color: #777e94;
}
.cp {
color: #8ec07c;
}
.cpf {
color: #79c0ff;
}
.cs {
color: #9075cd;
}
.dl {
color: #79c0ff;
}
.gd {
color: #fff;
background-color: #5f3737;
}
.ge {
color: #ddee30;
}
.gh {
color: #ffaa10;
}
.gi {
color: #fff;
background-color: #3a523a;
}
.go {
color: #777e94;
}
.gp {
color: #ebdbb2;
}
.gr {
color: #f43;
}
.gs {
color: #ebdbb2;
}
.gt {
color: #7ee787;
}
.gu {
color: #a5d6ff;
}
.il {
color: #79c0ff;
}
.k {
color: #ff7b72;
}
.kc {
color: #79c0ff;
}
.kd {
color: #ff7b72;
}
.kn {
color: #ff7b72;
}
.kp {
color: #5f8700;
}
.kr {
color: #7ee787;
}
.kt {
color: #ff7b72;
}
.m,
.mb,
.mf,
.mh,
.mi,
.mo {
color: #79c0ff;
}
.n {
color: #c9d1d9;
}
.na {
color: #d2a8ff;
}
.nb {
color: #a5d6ff;
}
.nc {
color: #e6edf3;
}
.nd {
color: #79c0ff;
}
.ne {
color: #7ee787;
}
.nf,
.ni {
color: #d2a8ff;
}
.nl {
color: #7ee787;
}
.nn {
color: #e6edf3;
}
.no {
color: #79c0ff;
}
.nt {
color: #7ee787;
}
.nv {
color: #ebdbb2;
}
.nx {
color: #b6bac5;
}
.o {
color: #7ee787;
}
.ow {
color: #5f8700;
}
.p {
color: #d2d4db;
}
.s,
.s1,
.s2 {
color: #a5d6ff;
}
.sa {
color: #79c0ff;
}
.sb {
color: #a5d6ff;
}
.sc {
color: #79c0ff;
}
.sd {
color: #777e94;
}
.se {
color: #7ee787;
}
.sh {
color: #79c0ff;
}
.si {
color: #ffaa10;
}
.sr {
color: #9075cd;
}
.ss {
color: #7ee787;
}
.sx {
color: #ffaa10;
}
.vc {
color: #7ee787;
}
.vg,
.vi {
color: #ffaa10;
}
// https://github.com/alecthomas/chroma/blob/6428fb4e65f3c1493491571c8a6a8f1add1da822/types.go#L208
export const chromaCode = css`
.chroma {
// TextWhiteSpace
.w {
color: #7f8699;
color: ${themeVars.chroma.textWhiteSpace};
}
// Error
.err {
color: ${themeVars.chroma.err};
}
// Keyword
.k {
color: ${themeVars.chroma.keyword.self};
}
.kc {
color: ${themeVars.chroma.keyword.constant};
}
.kd {
color: ${themeVars.chroma.keyword.declaration};
}
.kn {
color: ${themeVars.chroma.keyword.namespace};
}
.kp {
color: ${themeVars.chroma.keyword.pseudo};
}
.kr {
color: ${themeVars.chroma.keyword.reserved};
}
.kt {
color: ${themeVars.chroma.keyword.type};
}
// Name
.n {
color: ${themeVars.chroma.name.self};
}
.na {
color: ${themeVars.chroma.name.attribute};
}
.nb {
color: ${themeVars.chroma.name.builtin};
}
.bp {
color: ${themeVars.chroma.name.builtinPseudo};
}
.nc {
color: ${themeVars.chroma.name.class};
}
.no {
color: ${themeVars.chroma.name.constant};
}
.nd {
color: ${themeVars.chroma.name.decorator};
}
.ni {
color: ${themeVars.chroma.name.entity};
}
.ne {
color: ${themeVars.chroma.name.exception};
}
.nf {
color: ${themeVars.chroma.name.function};
}
.fm {
color: ${themeVars.chroma.name.functionMagic};
}
.py {
color: ${themeVars.chroma.name.property};
}
.nl {
color: ${themeVars.chroma.name.label};
}
.nn {
color: ${themeVars.chroma.name.namespace};
}
.nx {
color: ${themeVars.chroma.name.other};
}
.nt {
color: ${themeVars.chroma.name.tag};
}
.nv {
color: ${themeVars.chroma.name.variable};
}
.vc {
color: ${themeVars.chroma.name.variableClass};
}
.vg {
color: ${themeVars.chroma.name.variableGlobal};
}
.vi {
color: ${themeVars.chroma.name.variableInstance};
}
.vm {
color: ${themeVars.chroma.name.variableMagic};
}
// Literal
.l {
color: ${themeVars.chroma.literal.self};
}
.ld {
color: ${themeVars.chroma.literal.date};
}
// String
.s {
color: ${themeVars.chroma.string.self};
}
.sa {
color: ${themeVars.chroma.string.affix};
}
.sb {
color: ${themeVars.chroma.string.backtick};
}
.sc {
color: ${themeVars.chroma.string.char};
}
.dl {
color: ${themeVars.chroma.string.delimiter};
}
.sd {
color: ${themeVars.chroma.string.doc};
}
.s2 {
color: ${themeVars.chroma.string.double};
}
.se {
color: ${themeVars.chroma.string.escape};
}
.sh {
color: ${themeVars.chroma.string.heredoc};
}
.si {
color: ${themeVars.chroma.string.interpol};
}
.sx {
color: ${themeVars.chroma.string.other};
}
.sr {
color: ${themeVars.chroma.string.regex};
}
.s1 {
color: ${themeVars.chroma.string.single};
}
.ss {
color: ${themeVars.chroma.string.symbol};
}
// Number
.m {
color: ${themeVars.chroma.number.self};
}
.mb {
color: ${themeVars.chroma.number.bin};
}
.mf {
color: ${themeVars.chroma.number.float};
}
.mh {
color: ${themeVars.chroma.number.hex};
}
.mi {
color: ${themeVars.chroma.number.integer};
}
.il {
color: ${themeVars.chroma.number.integerLong};
}
.mo {
color: ${themeVars.chroma.number.oct};
}
// Operator
.o {
color: ${themeVars.chroma.operator.self};
}
.ow {
color: ${themeVars.chroma.operator.word};
}
// Punctuation
.p {
color: ${themeVars.chroma.punctuation};
}
// Comment
.c {
color: ${themeVars.chroma.comment.self};
}
.ch {
color: ${themeVars.chroma.comment.hashbang};
}
.cm {
color: ${themeVars.chroma.comment.multiline};
}
.cp {
color: ${themeVars.chroma.comment.preproc};
}
.cpf {
color: ${themeVars.chroma.comment.preprocFile};
}
.c1 {
color: ${themeVars.chroma.comment.single};
}
.cs {
color: ${themeVars.chroma.comment.special};
}
// Generic
.g {
color: ${themeVars.chroma.generic.self};
}
.gd {
color: ${themeVars.chroma.generic.deleted};
}
.ge {
color: ${themeVars.chroma.generic.emph};
}
.gr {
color: ${themeVars.chroma.generic.error};
}
.gh {
color: ${themeVars.chroma.generic.heading};
}
.gi {
color: ${themeVars.chroma.generic.inserted};
}
.go {
color: ${themeVars.chroma.generic.output};
}
.gp {
color: ${themeVars.chroma.generic.prompt};
}
.gs {
color: ${themeVars.chroma.generic.strong};
}
.gu {
color: ${themeVars.chroma.generic.subheading};
}
.gt {
color: ${themeVars.chroma.generic.traceback};
}
.gu {
color: ${themeVars.chroma.generic.underline};
}
}
`;

5
styles/public/dropdown.ts
View File

@@ -120,6 +120,11 @@ export const selectionDropdown = css`
${activeItemAfterStyle};
}
}
// 发布版本页面的分支按钮, 覆盖 Gitea 的样式, 避免按钮元素高度不一致
.repository.new.release .target .selection.dropdown {
padding-top: 8px;
padding-bottom: 8px;
}
// 这个按钮项目前只在创建仓库的拥有者
// 不实现伪元素, 因为 .item 设置溢出的元素会被截断
.ui.selection.dropdown.ellipsis-text-items,

3
styles/public/navbar.ts
View File

@@ -2,7 +2,8 @@ import { css, otherThemeVars, themeVars } from "src/types/vars";
export const navbarRight = css`
#navbar {
.navbar-right {
// 进入用户页面后, 避免注册, 登录和首页等意外覆盖
.navbar-right:has(.user-menu) {
gap: 8px;
// 右侧按钮, 但不包括头像
> .item:not(:last-child) {