Skip to content

Commit 38689e5

Browse files
mudgemudge
committed
Only respect system colour scheme preferences
Rather than implementing a JavaScript-based override on top of the default user preferences for colour schemes, rely entirely on the user preferences reported by the browser. This way, we can implement dark mode support in pure CSS and remove the dependency on JavaScript (without which, the site mistakenly would render in dark mode by default).
1 parent ecd49eb commit 38689e5

File tree

5 files changed

+43
-142
lines changed

5 files changed

+43
-142
lines changed

‎jekyll-assets/_includes/theme.html

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎jekyll-assets/_layouts/boxes.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,12 @@
44
{% include head.html %}
55
</head>
66
<body onload="makeToc()">
7-
<script type="text/javascript">initTheme()</script>
87
{% include header.html %}
98

109
<div class="toptitle">
1110
<h1><a href="/documentation/"><b>Raspberry Pi</b> Documentation</a></h1>
12-
<div id="search-theme-toggle-container">
11+
<div id="search-container">
1312
<div id="docsearch"></div>
14-
{% include theme.html %}
1513
</div>
1614
{% include tabs.html %}
1715
</div>

‎jekyll-assets/_layouts/docs.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
{% include head.html %}
55
</head>
66
<body onload="makeToc()">
7-
<script type="text/javascript">initTheme()</script>
87
<input type="checkbox" id="mobile-toggle" />
98
{% include header.html %}
109
<div id="docs-content">
@@ -20,7 +19,6 @@ <h1 id="docs-header-title">
2019
<label class="mobile-menu-toggle" for="mobile-toggle">
2120
<div class="mobile-menu-toggle-inner"></div>
2221
</label>
23-
{% include theme.html %}
2422
</div>
2523
<div id="docsearch">
2624
</div>

‎jekyll-assets/css/style.css

Lines changed: 42 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,4 @@
11
:root {
2-
--bg: #000000;
3-
--near-bg: #111;
4-
--top-title-colour: #343434;
5-
--red-tint: #d75a64;
6-
--brand-colour: #cd2355;
7-
--code-bg-colour: #121212;
8-
--code-bg-colour-transparent: rgba(18, 18, 18, 0.9);
9-
--tab-bg-colour: #252535;
10-
--toc-hover-colour: #353545;
11-
--subtle: #707070;
12-
--less-subtle: #333;
13-
--home: #cd2355;
14-
--rp2040-context-tag: #50C878;
15-
--accent: #d75a64;
16-
--docsearch-primary-color: var(--accent);
17-
--docsearch-logo-color: var(--red-tint);
18-
--copy-button-bg: #707070;
19-
--copy-button-text: #CCC;
20-
--textcolor: white;
21-
--subtle-text: #CCC;
22-
--theme-toggle-label: url("data:image/svg+xml;utf8,<svg width=\'30px\' height=\'30px\' viewBox=\'0 0 16 16\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M7 3V0H9V3H7Z\' fill=\'%23FFF\'/><path d=\'M9 13V16H7V13H9Z\' fill=\'%23FFF\'/><path d=\'M11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8Z\' fill=\'%23FFF\'/><path d=\'M0 9H3V7H0V9Z\' fill=\'%23FFF\'/><path d=\'M16 7H13V9H16V7Z\' fill=\'%23FFF\'/><path d=\'M3.75735 5.17157L1.63603 3.05025L3.05025 1.63603L5.17157 3.75735L3.75735 5.17157Z\' fill=\'%23FFF\'/><path d=\'M12.2426 10.8284L14.364 12.9497L12.9497 14.364L10.8284 12.2426L12.2426 10.8284Z\' fill=\'%23FFF\'/><path d=\'M3.05025 14.364L5.17157 12.2426L3.75735 10.8284L1.63603 12.9498L3.05025 14.364Z\' fill=\'%23FFF\'/><path d=\'M12.9497 1.63604L10.8284 3.75736L12.2426 5.17158L14.364 3.05026L12.9497 1.63604Z\' fill=\'%23FFF\'/></svg>");
23-
--mobile-menu-label: url("data:image/svg+xml,%3Csvg width='30px' height='40px' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cpath fill='%23FFF' d='M20 5V2H0v3h20zm0 6V8H0v3h20zm0 6v-3H0v3h20z'/%3E%3C/g%3E%3C/svg%3E");
24-
25-
/* header and footer styling */
26-
--rptl-header-background-color: var(--bg);
27-
--rptl-header-border-bottom-color: var(--code-bg-colour);
28-
--rptl-header-text-color: var(--textcolor);
29-
--rptl-header-burger-stroke-color: var(--textcolor);
30-
--rptl-header-subnav-background-color: var(--near-bg);
31-
--rptl-header-logo-text-fill: var(--textcolor);
32-
--rptl-header-logo-leaf-fill: var(--bg);
33-
--rptl-header-logo-berry-fill: var(--bg);
34-
--rptl-cookiebanner-background-color: var(--code-bg-colour);
35-
--rptl-cookiebanner-text-color: var(--textcolor);
36-
--rptl-footer-background-color: #13131B;
37-
--rptl-footer-text-color: var(--subtle-text);
38-
39-
color: var(--textcolor);
40-
}
41-
.light {
422
--bg: #fff;
433
--near-bg: #f6f6f6;
444
--red-tint: #d75a64;
@@ -59,7 +19,6 @@
5919
--copy-button-text: #444;
6020
--textcolor: black;
6121
--subtle-text: #444;
62-
--theme-toggle-label: url("data:image/svg+xml;utf8,<svg width=\'30px\' height=\'30px\' viewBox=\'0 0 24 24\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z\' stroke=\'%23000\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/></svg>");
6322
--mobile-menu-label: url("data:image/svg+xml,%3Csvg width='30px' height='40px' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cpath fill='var(--textcolor)' d='M20 5V2H0v3h20zm0 6V8H0v3h20zm0 6v-3H0v3h20z'/%3E%3C/g%3E%3C/svg%3E");
6423

6524
/* header and footer styling */
@@ -77,7 +36,48 @@
7736
--rptl-footer-text-color: var(--less-subtle);
7837

7938
color: var(--textcolor);
39+
}
8040

41+
@media (prefers-color-scheme: dark) {
42+
:root {
43+
--bg: #000000;
44+
--near-bg: #111;
45+
--top-title-colour: #343434;
46+
--red-tint: #d75a64;
47+
--brand-colour: #cd2355;
48+
--code-bg-colour: #121212;
49+
--code-bg-colour-transparent: rgba(18, 18, 18, 0.9);
50+
--tab-bg-colour: #252535;
51+
--toc-hover-colour: #353545;
52+
--subtle: #707070;
53+
--less-subtle: #333;
54+
--home: #cd2355;
55+
--rp2040-context-tag: #50C878;
56+
--accent: #d75a64;
57+
--docsearch-primary-color: var(--accent);
58+
--docsearch-logo-color: var(--red-tint);
59+
--copy-button-bg: #707070;
60+
--copy-button-text: #CCC;
61+
--textcolor: white;
62+
--subtle-text: #CCC;
63+
--mobile-menu-label: url("data:image/svg+xml,%3Csvg width='30px' height='40px' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cpath fill='%23FFF' d='M20 5V2H0v3h20zm0 6V8H0v3h20zm0 6v-3H0v3h20z'/%3E%3C/g%3E%3C/svg%3E");
64+
65+
/* header and footer styling */
66+
--rptl-header-background-color: var(--bg);
67+
--rptl-header-border-bottom-color: var(--code-bg-colour);
68+
--rptl-header-text-color: var(--textcolor);
69+
--rptl-header-burger-stroke-color: var(--textcolor);
70+
--rptl-header-subnav-background-color: var(--near-bg);
71+
--rptl-header-logo-text-fill: var(--textcolor);
72+
--rptl-header-logo-leaf-fill: var(--bg);
73+
--rptl-header-logo-berry-fill: var(--bg);
74+
--rptl-cookiebanner-background-color: var(--code-bg-colour);
75+
--rptl-cookiebanner-text-color: var(--textcolor);
76+
--rptl-footer-background-color: #13131B;
77+
--rptl-footer-text-color: var(--subtle-text);
78+
79+
color: var(--textcolor);
80+
}
8181
}
8282

8383
body {
@@ -213,17 +213,12 @@ div.subtitle p {
213213
justify-content: center;
214214
}
215215

216-
/* boxes page, constrain search bar/theme toggle line to a reasonable size */
217-
body > .toptitle > #search-theme-toggle-container {
216+
#search-container {
218217
width: 50%;
219218
margin: auto;
220219
max-width: 900px;
221220
}
222221

223-
body > .toptitle > #search-theme-toggle-container > #theme-toggle-container {
224-
flex-grow: 0;
225-
}
226-
227222
#docs-container {
228223
position: relative;
229224
flex-grow: 1;
@@ -285,53 +280,10 @@ pre {
285280
align-content: center;
286281
}
287282

288-
#theme-toggle {
289-
border-radius: 3px;
290-
padding: 5px;
291-
}
292-
293-
#theme-toggle:hover {
294-
background-color: var(--toc-hover-colour);
295-
text-decoration: none;
296-
}
297-
298-
#search-theme-toggle-container {
299-
display: flex;
300-
flex-direction: row;
301-
gap: 20px;
302-
align-items: center;
303-
justify-content: center;
304-
}
305-
306-
#theme-toggle-container {
307-
align-self: center;
308-
align-items: start;
309-
display: block;
310-
}
311-
312283
#docsearch {
313284
flex-grow: 1;
314285
}
315286

316-
#search-theme-toggle-container #theme-toggle-container::after {
317-
height: 100%;
318-
}
319-
320-
#theme-toggle-header {
321-
font-family: monospace;
322-
}
323-
324-
#theme-toggle-header {
325-
content: var(--theme-toggle-label);
326-
}
327-
328-
#theme-toggle span {
329-
display: none;
330-
}
331-
#theme-toggle {
332-
content: var(--theme-toggle-label);
333-
}
334-
335287
.toc-toggle-container {
336288
display: flex;
337289
align-items: center;
@@ -1503,12 +1455,6 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
15031455
padding-right: 5px;
15041456
}
15051457

1506-
#theme-toggle-container {
1507-
display: block;
1508-
padding-left: 5px;
1509-
padding-right: 5px;
1510-
}
1511-
15121458
.toc {
15131459
height: auto;
15141460
}

‎jekyll-assets/scripts/theme.js

Lines changed: 0 additions & 38 deletions
This file was deleted.

0 commit comments

Comments
 (0)