8347139 · helix · git.iko.soy

git.iko.soy/helix

book: Use per-theme syntax-highlighting CSS variables (#5406)

Until this patch, all themes used the Colibri values for syntax highlighting. This made the documentation very hard to read in some light themes.

commit8347139ff582341246975f047f04b4848f6e5af9 authorSoso <51865119+sgued@users.noreply.github.com> dateSat 21 Jan 2023, 20:24 (4 years ago) parent42b0401

2 files changed+78−9

compare with master

unifiedsplit

book/theme/css/variables.css+70−1 book/theme/highlight.css+8−8

book/theme/css/variables.css+70−1

@@ -48,6 +48,18 @@

4848 --searchresults-border-color: #888;

4949 --searchresults-li-bg: #252932;

5050 --search-mark-bg: #e3b171;

51+ --hljs-background: #191f26;

52+ --hljs-color: #e6e1cf;

53+ --hljs-quote: #5c6773;

54+ --hljs-variable: #ff7733;

55+ --hljs-type: #ffee99;

56+ --hljs-title: #b8cc52;

57+ --hljs-symbol: #ffb454;

58+ --hljs-selector-tag: #ff7733;

59+ --hljs-selector-tag: #36a3d9;

60+ --hljs-selector-tag: #00568d;

61+ --hljs-selector-tag: #91b362;

62+ --hljs-selector-tag: #d96c75;

5163}

5264

5365.coal {

@@ -88,6 +100,18 @@

88100 --searchresults-border-color: #98a3ad;

89101 --searchresults-li-bg: #2b2b2f;

90102 --search-mark-bg: #355c7d;

103+ --hljs-background: #969896;

104+ --hljs-color: #cc6666;

105+ --hljs-quote: #de935f;

106+ --hljs-variable: #f0c674;

107+ --hljs-type: #b5bd68;

108+ --hljs-title: #8abeb7;

109+ --hljs-symbol: #81a2be;

110+ --hljs-selector-tag: #b294bb;

111+ --hljs-selector-tag: #1d1f21;

112+ --hljs-selector-tag: #c5c8c6;

113+ --hljs-selector-tag: #718c00;

114+ --hljs-selector-tag: #c82829;

91115}

92116

93117.light {

@@ -128,6 +152,14 @@

128152 --searchresults-border-color: #888;

129153 --searchresults-li-bg: #e4f2fe;

130154 --search-mark-bg: #a2cff5;

155+ --hljs-background: #f6f7f6;

156+ --hljs-color: #000;

157+ --hljs-quote: #575757;

158+ --hljs-variable: #d70025;

159+ --hljs-type: #b21e00;

160+ --hljs-title: #0030f2;

161+ --hljs-symbol: #008200;

162+ --hljs-selector-tag: #9d00ec;

131163}

132164

133165.navy {

@@ -168,6 +200,19 @@

168200 --searchresults-border-color: #5c5c68;

169201 --searchresults-li-bg: #242430;

170202 --search-mark-bg: #a2cff5;

203+

204+ --hljs-background: #969896;

205+ --hljs-color: #cc6666;

206+ --hljs-quote: #de935f;

207+ --hljs-variable: #f0c674;

208+ --hljs-type: #b5bd68;

209+ --hljs-title: #8abeb7;

210+ --hljs-symbol: #81a2be;

211+ --hljs-selector-tag: #b294bb;

212+ --hljs-selector-tag: #1d1f21;

213+ --hljs-selector-tag: #c5c8c6;

214+ --hljs-selector-tag: #718c00;

215+ --hljs-selector-tag: #c82829;

171216}

172217

173218.rust {

@@ -208,6 +253,14 @@

208253 --searchresults-border-color: #888;

209254 --searchresults-li-bg: #dec2a2;

210255 --search-mark-bg: #e69f67;

256+ --hljs-background: #f6f7f6;

257+ --hljs-color: #000;

258+ --hljs-quote: #575757;

259+ --hljs-variable: #d70025;

260+ --hljs-type: #b21e00;

261+ --hljs-title: #0030f2;

262+ --hljs-symbol: #008200;

263+ --hljs-selector-tag: #9d00ec;

211264}

212265

213266@media (prefers-color-scheme: dark) {

@@ -292,7 +345,15 @@

292345 --searchresults-header-fg: #5f5f71;

293346 --searchresults-border-color: #5c5c68;

294347 --searchresults-li-bg: #242430;

295− --search-mark-bg: #a2cff5;

348+ --search-mark-bg: #acff5;

349+ --hljs-background: #2f1e2e;

350+ --hljs-color: #a39e9b;

351+ --hljs-quote: #8d8687;

352+ --hljs-variable: #ef6155;

353+ --hljs-type: #f99b15;

354+ --hljs-title: #fec418;

355+ --hljs-symbol: #48b685;

356+ --hljs-selector-tag: #815ba4;

296357}

297358

298359.colibri {

@@ -338,5 +399,13 @@

338399 --searchresults-border-color: #5c5c68;

339400 --searchresults-li-bg: #242430;

340401 --search-mark-bg: #a2cff5;

402+ --hljs-background: #TODO;

403+ --hljs-color: #TODO;

404+ --hljs-quote: #TODO;

405+ --hljs-variable: #TODO;

406+ --hljs-type: #TODO;

407+ --hljs-title: #TODO;

408+ --hljs-symbol: #TODO;

409+ --hljs-selector-tag: #TODO;

341410*/

342411}

book/theme/highlight.css+8−8

@@ -7,12 +7,12 @@ code.hljs {

77 padding:3px 5px

88}

99.hljs {

10− background:#2f1e2e;

11− color:#a39e9b

10+ background: var(--hljs-background);

11+ color: var(--hljs-color);

1212}

1313.hljs-comment,

1414.hljs-quote {

15− color:#8d8687

15+ color: var(--hljs-quote)

1616}

1717.hljs-link,

1818.hljs-meta,

@@ -23,7 +23,7 @@ code.hljs {

2323.hljs-tag,

2424.hljs-template-variable,

2525.hljs-variable {

26− color:#ef6155

26+ color: var(--hljs-variable)

2727}

2828.hljs-built_in,

2929.hljs-deletion,

@@ -31,22 +31,22 @@ code.hljs {

3131.hljs-number,

3232.hljs-params,

3333.hljs-type {

34− color:#f99b15

34+ color: var(--hljs-type)

3535}

3636.hljs-attribute,

3737.hljs-section,

3838.hljs-title {

39− color:#fec418

39+ color: var(--hljs-title)

4040}

4141.hljs-addition,

4242.hljs-bullet,

4343.hljs-string,

4444.hljs-symbol {

45− color:#48b685

45+ color: var(--hljs-symbol)

4646}

4747.hljs-keyword,

4848.hljs-selector-tag {

49− color:#815ba4

49+ color: var(--hljs-selector-tag)

5050}

5151.hljs-emphasis {

5252 font-style:italic