Skip to content

Commit c66556c

Browse files
ericmjericmj
committed
Add GitHub Light variant to Makeup theme
The bundled theme was hexpm's GitHub Dark colors (designed for hexpm's forced dark .highlight background). On diff pages the .highlight wrapper is transparent so add/remove line backgrounds show through, which left light-mode users staring at #a5d6ff strings on white. Add GitHub Light token colors as the default and gate the dark palette behind [data-theme=dark].
1 parent 2d067f0 commit c66556c

1 file changed

Lines changed: 153 additions & 70 deletions

File tree

‎assets/vendor/css/makeup.css‎

Lines changed: 153 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
/*
2-
* Makeup syntax highlighting theme: GitHub Dark
3-
* Based on GitHub's dark code theme colors
2+
* Makeup syntax highlighting theme: GitHub Light (default) + GitHub Dark
3+
* (via [data-theme=dark]). Token classes are the standard Pygments names
4+
* emitted by Makeup so this file works with any Makeup lexer.
45
*/
56

67
.highlight {
7-
background: #0d1117;
8-
color: #c9d1d9;
8+
background: #f6f8fa;
9+
color: #1f2328;
910
border-radius: 0.5rem;
1011
padding: 1rem;
1112
overflow-x: auto;
@@ -20,87 +21,169 @@
2021
user-select: none;
2122
}
2223

23-
.highlight .hll { background-color: #161b22; }
24+
.highlight .hll { background-color: #fff8c5; }
2425

2526
/* Keywords */
26-
.highlight .k { color: #ff7b72; }
27-
.highlight .kc { color: #ff7b72; }
28-
.highlight .kd { color: #ff7b72; }
29-
.highlight .kn { color: #ff7b72; }
30-
.highlight .kp { color: #ff7b72; }
31-
.highlight .kr { color: #ff7b72; }
32-
.highlight .kt { color: #ff7b72; }
27+
.highlight .k { color: #cf222e; }
28+
.highlight .kc { color: #cf222e; }
29+
.highlight .kd { color: #cf222e; }
30+
.highlight .kn { color: #cf222e; }
31+
.highlight .kp { color: #cf222e; }
32+
.highlight .kr { color: #cf222e; }
33+
.highlight .kt { color: #cf222e; }
3334

3435
/* Names */
35-
.highlight .nc { color: #d2a8ff; }
36-
.highlight .nd { color: #d2a8ff; }
37-
.highlight .ne { color: #d2a8ff; }
38-
.highlight .nf { color: #d2a8ff; }
39-
.highlight .fm { color: #d2a8ff; }
40-
.highlight .nb { color: #ffa657; }
41-
.highlight .bp { color: #ffa657; }
42-
.highlight .na { color: #79c0ff; }
43-
.highlight .ni { color: #c9d1d9; }
44-
.highlight .nl { color: #79c0ff; }
45-
.highlight .nn { color: #c9d1d9; }
46-
.highlight .no { color: #79c0ff; }
47-
.highlight .nt { color: #7ee787; }
48-
.highlight .nv { color: #79c0ff; }
49-
.highlight .vc { color: #79c0ff; }
50-
.highlight .vg { color: #79c0ff; }
51-
.highlight .vi { color: #79c0ff; }
52-
.highlight .vm { color: #79c0ff; }
36+
.highlight .nc { color: #6639ba; }
37+
.highlight .nd { color: #6639ba; }
38+
.highlight .ne { color: #6639ba; }
39+
.highlight .nf { color: #6639ba; }
40+
.highlight .fm { color: #6639ba; }
41+
.highlight .nb { color: #953800; }
42+
.highlight .bp { color: #953800; }
43+
.highlight .na { color: #0550ae; }
44+
.highlight .ni { color: #1f2328; }
45+
.highlight .nl { color: #0550ae; }
46+
.highlight .nn { color: #1f2328; }
47+
.highlight .no { color: #0550ae; }
48+
.highlight .nt { color: #116329; }
49+
.highlight .nv { color: #0550ae; }
50+
.highlight .vc { color: #0550ae; }
51+
.highlight .vg { color: #0550ae; }
52+
.highlight .vi { color: #0550ae; }
53+
.highlight .vm { color: #0550ae; }
5354

5455
/* Strings */
55-
.highlight .s { color: #a5d6ff; }
56-
.highlight .s1 { color: #a5d6ff; }
57-
.highlight .s2 { color: #a5d6ff; }
58-
.highlight .sa { color: #a5d6ff; }
59-
.highlight .sb { color: #a5d6ff; }
60-
.highlight .sc { color: #a5d6ff; }
61-
.highlight .sd { color: #a5d6ff; }
62-
.highlight .se { color: #79c0ff; }
63-
.highlight .sh { color: #a5d6ff; }
64-
.highlight .si { color: #a5d6ff; }
65-
.highlight .sr { color: #a5d6ff; }
66-
.highlight .ss { color: #79c0ff; }
67-
.highlight .sx { color: #a5d6ff; }
68-
.highlight .dl { color: #a5d6ff; }
56+
.highlight .s { color: #0a3069; }
57+
.highlight .s1 { color: #0a3069; }
58+
.highlight .s2 { color: #0a3069; }
59+
.highlight .sa { color: #0a3069; }
60+
.highlight .sb { color: #0a3069; }
61+
.highlight .sc { color: #0a3069; }
62+
.highlight .sd { color: #0a3069; }
63+
.highlight .se { color: #0550ae; }
64+
.highlight .sh { color: #0a3069; }
65+
.highlight .si { color: #0a3069; }
66+
.highlight .sr { color: #0a3069; }
67+
.highlight .ss { color: #0550ae; }
68+
.highlight .sx { color: #0a3069; }
69+
.highlight .dl { color: #0a3069; }
6970

7071
/* Numbers */
71-
.highlight .m { color: #79c0ff; }
72-
.highlight .mb { color: #79c0ff; }
73-
.highlight .mf { color: #79c0ff; }
74-
.highlight .mh { color: #79c0ff; }
75-
.highlight .mi { color: #79c0ff; }
76-
.highlight .mo { color: #79c0ff; }
77-
.highlight .il { color: #79c0ff; }
72+
.highlight .m { color: #0550ae; }
73+
.highlight .mb { color: #0550ae; }
74+
.highlight .mf { color: #0550ae; }
75+
.highlight .mh { color: #0550ae; }
76+
.highlight .mi { color: #0550ae; }
77+
.highlight .mo { color: #0550ae; }
78+
.highlight .il { color: #0550ae; }
7879

7980
/* Operators */
80-
.highlight .o { color: #ff7b72; }
81-
.highlight .ow { color: #ff7b72; }
82-
.highlight .p { color: #c9d1d9; }
81+
.highlight .o { color: #cf222e; }
82+
.highlight .ow { color: #cf222e; }
83+
.highlight .p { color: #1f2328; }
8384

8485
/* Comments */
85-
.highlight .c { color: #8b949e; font-style: italic; }
86-
.highlight .c1 { color: #8b949e; font-style: italic; }
87-
.highlight .ch { color: #8b949e; font-style: italic; }
88-
.highlight .cm { color: #8b949e; font-style: italic; }
89-
.highlight .cp { color: #8b949e; font-style: italic; }
90-
.highlight .cpf { color: #8b949e; font-style: italic; }
91-
.highlight .cs { color: #8b949e; font-style: italic; }
86+
.highlight .c { color: #6e7781; font-style: italic; }
87+
.highlight .c1 { color: #6e7781; font-style: italic; }
88+
.highlight .ch { color: #6e7781; font-style: italic; }
89+
.highlight .cm { color: #6e7781; font-style: italic; }
90+
.highlight .cp { color: #6e7781; font-style: italic; }
91+
.highlight .cpf { color: #6e7781; font-style: italic; }
92+
.highlight .cs { color: #6e7781; font-style: italic; }
9293

9394
/* Generic (diffs, etc.) */
94-
.highlight .gd { color: #ffdcd7; background-color: #67060c; }
95-
.highlight .gi { color: #aff5b4; background-color: #033a16; }
95+
.highlight .gd { color: #82071e; background-color: #ffebe9; }
96+
.highlight .gi { color: #116329; background-color: #dafbe1; }
9697
.highlight .ge { font-style: italic; }
9798
.highlight .gs { font-weight: bold; }
98-
.highlight .gh { color: #1f6feb; font-weight: bold; }
99-
.highlight .gu { color: #1f6feb; }
100-
.highlight .go { color: #8b949e; }
101-
.highlight .gp { color: #8b949e; }
102-
.highlight .gr { color: #ffa657; }
103-
.highlight .gt { color: #ffa657; }
99+
.highlight .gh { color: #0550ae; font-weight: bold; }
100+
.highlight .gu { color: #0550ae; }
101+
.highlight .go { color: #6e7781; }
102+
.highlight .gp { color: #6e7781; }
103+
.highlight .gr { color: #cf222e; }
104+
.highlight .gt { color: #cf222e; }
104105

105106
/* Errors */
106-
.highlight .err { color: #ffa657; }
107+
.highlight .err { color: #cf222e; }
108+
109+
/* ===== Dark theme (GitHub Dark) ===== */
110+
111+
[data-theme=dark] .highlight {
112+
background: #0d1117;
113+
color: #c9d1d9;
114+
}
115+
116+
[data-theme=dark] .highlight .hll { background-color: #161b22; }
117+
118+
[data-theme=dark] .highlight .k,
119+
[data-theme=dark] .highlight .kc,
120+
[data-theme=dark] .highlight .kd,
121+
[data-theme=dark] .highlight .kn,
122+
[data-theme=dark] .highlight .kp,
123+
[data-theme=dark] .highlight .kr,
124+
[data-theme=dark] .highlight .kt { color: #ff7b72; }
125+
126+
[data-theme=dark] .highlight .nc,
127+
[data-theme=dark] .highlight .nd,
128+
[data-theme=dark] .highlight .ne,
129+
[data-theme=dark] .highlight .nf,
130+
[data-theme=dark] .highlight .fm { color: #d2a8ff; }
131+
[data-theme=dark] .highlight .nb,
132+
[data-theme=dark] .highlight .bp { color: #ffa657; }
133+
[data-theme=dark] .highlight .na,
134+
[data-theme=dark] .highlight .nl,
135+
[data-theme=dark] .highlight .no,
136+
[data-theme=dark] .highlight .nv,
137+
[data-theme=dark] .highlight .vc,
138+
[data-theme=dark] .highlight .vg,
139+
[data-theme=dark] .highlight .vi,
140+
[data-theme=dark] .highlight .vm { color: #79c0ff; }
141+
[data-theme=dark] .highlight .ni,
142+
[data-theme=dark] .highlight .nn { color: #c9d1d9; }
143+
[data-theme=dark] .highlight .nt { color: #7ee787; }
144+
145+
[data-theme=dark] .highlight .s,
146+
[data-theme=dark] .highlight .s1,
147+
[data-theme=dark] .highlight .s2,
148+
[data-theme=dark] .highlight .sa,
149+
[data-theme=dark] .highlight .sb,
150+
[data-theme=dark] .highlight .sc,
151+
[data-theme=dark] .highlight .sd,
152+
[data-theme=dark] .highlight .sh,
153+
[data-theme=dark] .highlight .si,
154+
[data-theme=dark] .highlight .sr,
155+
[data-theme=dark] .highlight .sx,
156+
[data-theme=dark] .highlight .dl { color: #a5d6ff; }
157+
[data-theme=dark] .highlight .se,
158+
[data-theme=dark] .highlight .ss { color: #79c0ff; }
159+
160+
[data-theme=dark] .highlight .m,
161+
[data-theme=dark] .highlight .mb,
162+
[data-theme=dark] .highlight .mf,
163+
[data-theme=dark] .highlight .mh,
164+
[data-theme=dark] .highlight .mi,
165+
[data-theme=dark] .highlight .mo,
166+
[data-theme=dark] .highlight .il { color: #79c0ff; }
167+
168+
[data-theme=dark] .highlight .o,
169+
[data-theme=dark] .highlight .ow { color: #ff7b72; }
170+
[data-theme=dark] .highlight .p { color: #c9d1d9; }
171+
172+
[data-theme=dark] .highlight .c,
173+
[data-theme=dark] .highlight .c1,
174+
[data-theme=dark] .highlight .ch,
175+
[data-theme=dark] .highlight .cm,
176+
[data-theme=dark] .highlight .cp,
177+
[data-theme=dark] .highlight .cpf,
178+
[data-theme=dark] .highlight .cs { color: #8b949e; }
179+
180+
[data-theme=dark] .highlight .gd { color: #ffdcd7; background-color: #67060c; }
181+
[data-theme=dark] .highlight .gi { color: #aff5b4; background-color: #033a16; }
182+
[data-theme=dark] .highlight .gh,
183+
[data-theme=dark] .highlight .gu { color: #1f6feb; }
184+
[data-theme=dark] .highlight .go,
185+
[data-theme=dark] .highlight .gp { color: #8b949e; }
186+
[data-theme=dark] .highlight .gr,
187+
[data-theme=dark] .highlight .gt { color: #ffa657; }
188+
189+
[data-theme=dark] .highlight .err { color: #ffa657; }

0 commit comments

Comments
 (0)