Skip to content

Commit a82e426

Browse files
sergioalvzsergioalvz
authored
Merge pull request #267 from codecoolture/css-only-color-mode
Defer to user's preferences for color mode
2 parents 19b1f64 + 2cc0849 commit a82e426

File tree

15 files changed

+329
-469
lines changed

15 files changed

+329
-469
lines changed

‎components/Codeblock/index.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
import { useDarkMode } from "@/hooks";
21
import { classNames } from "@/lib/classNames";
32

43
type CodeblockProps = Pick<React.JSX.IntrinsicElements["pre"], "children" | "className">;
54

65
export function Codeblock({ children }: CodeblockProps) {
7-
const { isDarkModeEnabled } = useDarkMode();
8-
9-
return <pre className={classNames("Codeblock", isDarkModeEnabled && "Codeblock--Dark")}>{children}</pre>;
6+
return <pre className={classNames("Codeblock")}>{children}</pre>;
107
}

‎components/Codeblock/style.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
@import "./themes/dark.css";
2-
@import "./themes/light.css";
1+
@import "./theme.css";
32

43
.Codeblock {
54
font-size: var(--fs-s);

‎components/Codeblock/theme.css‎

Lines changed: 299 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
/**
2+
* Theme: Atom One Dark
3+
*/
4+
.Codeblock pre code.hljs {
5+
display: block;
6+
overflow-x: auto;
7+
padding: 1em;
8+
}
9+
10+
.Codeblock .hljs {
11+
color: #abb2bf;
12+
}
13+
14+
.Codeblock .hljs-comment,
15+
.Codeblock .hljs-quote {
16+
color: #5c6370;
17+
font-style: italic;
18+
}
19+
20+
.Codeblock .hljs-doctag,
21+
.Codeblock .hljs-formula,
22+
.Codeblock .hljs-keyword {
23+
color: #c678dd;
24+
}
25+
26+
.Codeblock .hljs-deletion,
27+
.Codeblock .hljs-name,
28+
.Codeblock .hljs-section,
29+
.Codeblock .hljs-selector-tag,
30+
.Codeblock .hljs-subst {
31+
color: #e06c75;
32+
}
33+
34+
.Codeblock .hljs-literal {
35+
color: #56b6c2;
36+
}
37+
38+
.Codeblock .hljs-addition,
39+
.Codeblock .hljs-attribute,
40+
.Codeblock .hljs-meta .hljs-string,
41+
.Codeblock .hljs-regexp,
42+
.Codeblock .hljs-string {
43+
color: #98c379;
44+
}
45+
46+
.Codeblock .hljs-attr,
47+
.Codeblock .hljs-number,
48+
.Codeblock .hljs-selector-attr,
49+
.Codeblock .hljs-selector-class,
50+
.Codeblock .hljs-selector-pseudo,
51+
.Codeblock .hljs-template-variable,
52+
.Codeblock .hljs-type,
53+
.Codeblock .hljs-variable {
54+
color: #d19a66;
55+
}
56+
57+
.Codeblock .hljs-bullet,
58+
.Codeblock .hljs-link,
59+
.Codeblock .hljs-meta,
60+
.Codeblock .hljs-selector-id,
61+
.Codeblock .hljs-symbol,
62+
.Codeblock .hljs-title {
63+
color: #61aeee;
64+
}
65+
66+
.Codeblock .hljs-built_in,
67+
.Codeblock .hljs-class .hljs-title,
68+
.Codeblock .hljs-title.class_ {
69+
color: #e6c07b;
70+
}
71+
72+
.Codeblock .hljs-emphasis {
73+
font-style: italic;
74+
}
75+
76+
.Codeblock .hljs-strong {
77+
font-weight: 700;
78+
}
79+
80+
.Codeblock .hljs-link {
81+
text-decoration: underline;
82+
}
83+
84+
@media (prefers-color-scheme: light) {
85+
/**
86+
* Theme: Atom One Light
87+
*/
88+
.Codeblock pre code.hljs {
89+
display: block;
90+
overflow-x: auto;
91+
padding: 1em;
92+
}
93+
94+
.Codeblock .hljs {
95+
color: #383a42;
96+
}
97+
98+
.Codeblock .hljs-comment,
99+
.Codeblock .hljs-quote {
100+
color: #a0a1a7;
101+
font-style: italic;
102+
}
103+
104+
.Codeblock .hljs-doctag,
105+
.Codeblock .hljs-formula,
106+
.Codeblock .hljs-keyword {
107+
color: #a626a4;
108+
}
109+
110+
.Codeblock .hljs-deletion,
111+
.Codeblock .hljs-name,
112+
.Codeblock .hljs-section,
113+
.Codeblock .hljs-selector-tag,
114+
.Codeblock .hljs-subst {
115+
color: #e45649;
116+
}
117+
118+
.Codeblock .hljs-literal {
119+
color: #0184bb;
120+
}
121+
122+
.Codeblock .hljs-addition,
123+
.Codeblock .hljs-attribute,
124+
.Codeblock .hljs-meta .hljs-string,
125+
.Codeblock .hljs-regexp,
126+
.Codeblock .hljs-string {
127+
color: #50a14f;
128+
}
129+
130+
.Codeblock .hljs-attr,
131+
.Codeblock .hljs-number,
132+
.Codeblock .hljs-selector-attr,
133+
.Codeblock .hljs-selector-class,
134+
.Codeblock .hljs-selector-pseudo,
135+
.Codeblock .hljs-template-variable,
136+
.Codeblock .hljs-type,
137+
.Codeblock .hljs-variable {
138+
color: #986801;
139+
}
140+
141+
.Codeblock .hljs-bullet,
142+
.Codeblock .hljs-link,
143+
.Codeblock .hljs-meta,
144+
.Codeblock .hljs-selector-id,
145+
.Codeblock .hljs-symbol,
146+
.Codeblock .hljs-title {
147+
color: #4078f2;
148+
}
149+
150+
.Codeblock .hljs-built_in,
151+
.Codeblock .hljs-class .hljs-title,
152+
.Codeblock .hljs-title.class_ {
153+
color: #c18401;
154+
}
155+
156+
.Codeblock .hljs-emphasis {
157+
font-style: italic;
158+
}
159+
160+
.Codeblock .hljs-strong {
161+
font-weight: 700;
162+
}
163+
164+
.Codeblock .hljs-link {
165+
text-decoration: underline;
166+
}
167+
168+
.Codeblock code[class*="language-"],
169+
.Codeblock pre[class*="language-"] {
170+
color: black;
171+
text-shadow: 0 1px white;
172+
text-align: left;
173+
white-space: pre;
174+
word-spacing: normal;
175+
word-break: normal;
176+
word-wrap: normal;
177+
line-height: 1.5;
178+
179+
-moz-tab-size: 4;
180+
-o-tab-size: 4;
181+
tab-size: 4;
182+
183+
-webkit-hyphens: none;
184+
-moz-hyphens: none;
185+
-ms-hyphens: none;
186+
hyphens: none;
187+
}
188+
189+
.Codeblock pre[class*="language-"]::-moz-selection,
190+
.Codeblock pre[class*="language-"] ::-moz-selection,
191+
.Codeblock code[class*="language-"]::-moz-selection,
192+
.Codeblock code[class*="language-"] ::-moz-selection {
193+
text-shadow: none;
194+
background: #b3d4fc;
195+
}
196+
197+
.Codeblock pre[class*="language-"]::selection,
198+
.Codeblock pre[class*="language-"] ::selection,
199+
.Codeblock code[class*="language-"]::selection,
200+
.Codeblock code[class*="language-"] ::selection {
201+
text-shadow: none;
202+
background: #b3d4fc;
203+
}
204+
205+
@media print {
206+
.Codeblock code[class*="language-"],
207+
.Codeblock pre[class*="language-"] {
208+
text-shadow: none;
209+
}
210+
}
211+
212+
/* Code blocks */
213+
.Codeblock pre[class*="language-"] {
214+
padding: 1em;
215+
margin: 0.5em 0;
216+
overflow: auto;
217+
}
218+
219+
/* Inline code */
220+
.Codeblock :not(pre) > code[class*="language-"] {
221+
padding: 0.1em;
222+
border-radius: 0.3em;
223+
white-space: normal;
224+
}
225+
226+
.Codeblock .token.comment,
227+
.Codeblock .token.prolog,
228+
.Codeblock .token.doctype,
229+
.Codeblock .token.cdata {
230+
color: slategray;
231+
}
232+
233+
.Codeblock .token.punctuation {
234+
color: #999;
235+
}
236+
237+
.Codeblock .token.namespace {
238+
opacity: 0.7;
239+
}
240+
241+
.Codeblock .token.property,
242+
.Codeblock .token.tag,
243+
.Codeblock .token.boolean,
244+
.Codeblock .token.number,
245+
.Codeblock .token.constant,
246+
.Codeblock .token.symbol,
247+
.Codeblock .token.deleted {
248+
color: #905;
249+
}
250+
251+
.Codeblock .token.selector,
252+
.Codeblock .token.attr-name,
253+
.Codeblock .token.string,
254+
.Codeblock .token.char,
255+
.Codeblock .token.builtin,
256+
.Codeblock .token.inserted {
257+
color: #690;
258+
}
259+
260+
.Codeblock .token.operator,
261+
.Codeblock .token.entity,
262+
.Codeblock .token.url,
263+
.Codeblock .language-css .token.string,
264+
.Codeblock .style .token.string {
265+
color: #9a6e3a;
266+
/* This background color was intended by the author of this theme. */
267+
background: hsla(0, 0%, 100%, 0.5);
268+
}
269+
270+
.Codeblock .token.atrule,
271+
.Codeblock .token.attr-value,
272+
.Codeblock .token.keyword {
273+
color: #07a;
274+
}
275+
276+
.Codeblock .token.function,
277+
.Codeblock .token.class-name {
278+
color: #dd4a68;
279+
}
280+
281+
.Codeblock .token.regex,
282+
.Codeblock .token.important,
283+
.Codeblock .token.variable {
284+
color: #e90;
285+
}
286+
287+
.Codeblock .token.important,
288+
.Codeblock .token.bold {
289+
font-weight: bold;
290+
}
291+
292+
.Codeblock .token.italic {
293+
font-style: italic;
294+
}
295+
296+
.Codeblock .token.entity {
297+
cursor: help;
298+
}
299+
}

0 commit comments

Comments
 (0)