[OCaml] Mobile-friendly clone of cgit.
style switch syntax theme from gruvbox to zenburn dark
Replace the Gruvbox Dark Hard Contrast palette with a Zenburn-derived palette using a darker background (#2c2c2c vs classic Zenburn's #3f3f3f) for better contrast against the page background. Colour mapping: keywords/storage -> warm yellow #f0dfaf strings -> muted red #cc9393 comments -> green #7f9f7f (italic) constants/numbers -> blue #8cd0d3 functions -> cyan #93e0e3 types/support -> orange #dfaf8f variables -> blue/fg #8cd0d3/#dcdccc
.kiro/steering/web-design.md
@@ -39,7 +39,7 @@
39
39
40
40
- Source code highlighting SHALL be server-rendered at request time. No client-side JavaScript highlighter SHALL be used.
41
41
- The highlighting engine uses hilite + textmate-language with bundled TextMate grammars (48 languages).
42
Removed:
- The colour theme lives in `lib/static/syntax-theme.css` (currently Gruvbox Dark Hard Contrast) and is decoupled from structural styles.
42
Added:
- The colour theme lives in `lib/static/syntax-theme.css` (currently Zenburn Dark, high-contrast variant) and is decoupled from structural styles.
43
43
- CSS selectors use `[class*="-keyword"]` attribute matching for language-agnostic theming.
44
44
45
45
## README Documentation
lib/static/readme.css
@@ -107,8 +107,8 @@
107
107
font-size: 0.88em;
108
108
padding: 0.15em 0.35em;
109
109
border-radius: 0.2rem;
110
Removed:
background-color: #1d2021;
111
Removed:
color: #8ec07c;
110
Added:
background-color: #2c2c2c;
111
Added:
color: #93e0e3;
112
112
}
113
113
114
114
.readme-link {
@@ -184,8 +184,8 @@
184
184
overflow-x: auto;
185
185
border: 1px solid var(--color-border-subtle);
186
186
border-radius: 0.25rem;
187
Removed:
background-color: #1d2021;
188
Removed:
color: #ebdbb2;
187
Added:
background-color: #2c2c2c;
188
Added:
color: #dcdccc;
189
189
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
190
190
font-size: 0.9rem;
191
191
line-height: 1.5;
lib/static/syntax-theme.css
@@ -1,90 +1,98 @@
1
1
/* ==========================================================================
2
Removed:
Syntax highlighting theme: Gruvbox Dark Hard Contrast
2
Added:
Syntax highlighting theme: Zenburn Dark (high contrast variant)
3
3
4
Removed:
Colour palette from https://github.com/morhetz/gruvbox
5
Removed:
Background #1d2021 | Foreground #ebdbb2
4
Added:
Based on the Zenburn palette by Jani Nurminen, with a darker background
5
Added:
for improved readability on dark page backgrounds.
6
6
7
Removed:
Bright: red #fb4934 | green #b8bb26 | yellow #fabd2f | blue #83a598
8
Removed:
purple #d3869b | aqua #8ec07c | orange #fe8019
9
Removed:
Neutral: red #cc241d | green #98971a | yellow #d79921 | blue #458588
10
Removed:
purple #b16286 | aqua #689d6a | orange #d65d0e
11
Removed:
Gray: #928374 | Light fg: #fbf1c7
7
Added:
Background #2c2c2c | Foreground #dcdccc
8
Added:
9
Added:
Palette:
10
Added:
red #cc9393 | bright red #dca3a3
11
Added:
green #7f9f7f | bright green #bfebbf
12
Added:
yellow #f0dfaf | dim yellow #e0cf9f
13
Added:
blue #8cd0d3 | dim blue #7cb8bb
14
Added:
orange #dfaf8f | bright orange #ecbcbc
15
Added:
magenta #dc8cc3 | dim magenta #c0bed1
16
Added:
cyan #93e0e3
17
Added:
fg+1 #ffffef | fg+2 #e0e0d0
18
Added:
bg+1 #3f3f3f | bg+2 #4f4f4f
19
Added:
comment #7f9f7f (green, italic)
12
20
========================================================================== */
13
21
14
22
/* Keywords: control flow, storage, operators */
15
23
[class*="-keyword"] {
16
Removed:
color: #fb4934;
24
Added:
color: #f0dfaf;
17
25
}
18
26
19
27
[class*="-storage-type"],
20
28
[class*="-storage-modifier"] {
21
Removed:
color: #fb4934;
29
Added:
color: #f0dfaf;
22
30
}
23
31
24
32
/* Strings */
25
33
[class*="-string"] {
26
Removed:
color: #b8bb26;
34
Added:
color: #cc9393;
27
35
}
28
36
29
37
/* Comments */
30
38
[class*="-comment"] {
31
Removed:
color: #928374;
39
Added:
color: #7f9f7f;
32
40
font-style: italic;
33
41
}
34
42
35
43
/* Constants: numbers, booleans, language constants */
36
44
[class*="-constant-numeric"],
37
45
[class*="-constant-language"] {
38
Removed:
color: #d3869b;
46
Added:
color: #8cd0d3;
39
47
}
40
48
41
49
[class*="-constant-character"] {
42
Removed:
color: #b8bb26;
50
Added:
color: #dca3a3;
43
51
}
44
52
45
53
/* Entity names: functions, classes, types, tags */
46
54
[class*="-entity-name-function"] {
47
Removed:
color: #8ec07c;
55
Added:
color: #93e0e3;
48
56
}
49
57
50
58
[class*="-entity-name-type"] {
51
Removed:
color: #fabd2f;
59
Added:
color: #dfaf8f;
52
60
}
53
61
54
62
[class*="-entity-name-tag"] {
55
Removed:
color: #fe8019;
63
Added:
color: #e0cf9f;
56
64
}
57
65
58
66
[class*="-entity-other-attribute-name"] {
59
Removed:
color: #83a598;
67
Added:
color: #8cd0d3;
60
68
}
61
69
62
70
/* Support: built-in functions, types */
63
71
[class*="-support-function"] {
64
Removed:
color: #8ec07c;
72
Added:
color: #93e0e3;
65
73
}
66
74
67
75
[class*="-support-type"] {
68
Removed:
color: #fabd2f;
76
Added:
color: #dfaf8f;
69
77
}
70
78
71
79
[class*="-support-class"] {
72
Removed:
color: #fabd2f;
80
Added:
color: #dfaf8f;
73
81
}
74
82
75
83
/* Variables */
76
84
[class*="-variable-language"],
77
85
[class*="-variable-other-constant"] {
78
Removed:
color: #83a598;
86
Added:
color: #8cd0d3;
79
87
}
80
88
81
89
[class*="-variable-parameter"] {
82
Removed:
color: #83a598;
90
Added:
color: #dcdccc;
83
91
}
84
92
85
93
/* Punctuation — subdued foreground */
86
94
[class*="-punctuation"] {
87
Removed:
color: #ebdbb2;
95
Added:
color: #dcdccc;
88
96
}
89
97
90
98
/* Meta — structural, inherits from parent or children */
@@ -94,42 +102,42 @@
94
102
95
103
/* Markup (markdown, HTML) */
96
104
[class*="-markup-heading"] {
97
Removed:
color: #fe8019;
105
Added:
color: #dfaf8f;
98
106
font-weight: bold;
99
107
}
100
108
101
109
[class*="-markup-bold"] {
102
Removed:
color: #fabd2f;
110
Added:
color: #f0dfaf;
103
111
font-weight: bold;
104
112
}
105
113
106
114
[class*="-markup-italic"] {
107
Removed:
color: #83a598;
115
Added:
color: #8cd0d3;
108
116
font-style: italic;
109
117
}
110
118
111
119
[class*="-markup-inline-raw"],
112
120
[class*="-markup-fenced-code"] {
113
Removed:
color: #8ec07c;
121
Added:
color: #93e0e3;
114
122
}
115
123
116
124
[class*="-markup-deleted"] {
117
Removed:
color: #fb4934;
118
Removed:
background-color: rgba(251, 73, 52, 0.1);
125
Added:
color: #dca3a3;
126
Added:
background-color: rgba(220, 163, 163, 0.1);
119
127
}
120
128
121
129
[class*="-markup-inserted"] {
122
Removed:
color: #b8bb26;
123
Removed:
background-color: rgba(184, 187, 38, 0.1);
130
Added:
color: #bfebbf;
131
Added:
background-color: rgba(127, 159, 127, 0.12);
124
132
}
125
133
126
134
/* Diff specific */
127
135
[class*="-punctuation-definition-inserted"],
128
136
[class*="-markup-inserted"] {
129
Removed:
color: #b8bb26;
137
Added:
color: #bfebbf;
130
138
}
131
139
132
140
[class*="-punctuation-definition-deleted"],
133
141
[class*="-markup-deleted"] {
134
Removed:
color: #fb4934;
142
Added:
color: #dca3a3;
135
143
}