Skip to content

Commit c038af8

Browse files
dschodscho
authored
Merge pull request #1888 from dscho/dark-mode
Support dark mode
2 parents fc56dfe + 994925a commit c038af8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+553
-223
lines changed

‎assets/js/application.js

+39-6
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const baseURLPrefix = (() => {
3131

3232
$(document).ready(function() {
3333
BrowserFallbacks.init();
34+
DarkMode.init();
3435
Search.init();
3536
Dropdowns.init();
3637
Forms.init();
@@ -222,7 +223,12 @@ var Search = {
222223
$("#show-results-label").text("No matching pages found.");
223224
return;
224225
}
225-
$("#show-results-label").text("Show all results...");
226+
227+
const language = document.querySelector("html")?.getAttribute("lang");
228+
$("#show-results-label")
229+
.text("Show all results...")
230+
.attr('href', `${baseURLPrefix}search/results?search=${term}${language && `&language=${language}`}`);
231+
226232
const loadButton = $("#load-more-results");
227233
loadButton.text(`Loading ${
228234
results.results.length < 2
@@ -299,11 +305,6 @@ var Search = {
299305
selectResultOption: function() {
300306
var link = $('#search-results a')[Search.selectedIndex];
301307
var url = $(link).attr('href');
302-
if(!url) {
303-
const term = $('#search-text').val();
304-
const language = document.querySelector("html")?.getAttribute("lang");
305-
url = `${baseURLPrefix}search/results?search=${term}${language && `&language=${language}`}`;
306-
}
307308
window.location.href = url;
308309
selectedIndex = 0;
309310
},
@@ -551,6 +552,38 @@ var Downloads = {
551552
},
552553
}
553554

555+
var DarkMode = {
556+
init: function() {
557+
const button = $('#dark-mode-button');
558+
if (!button.length) return;
559+
560+
// Check for dark mode preference at the OS level
561+
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
562+
563+
// Get the user's theme preference from local storage, if it's available
564+
const currentTheme = localStorage.getItem("theme");
565+
566+
if ((prefersDarkScheme && currentTheme !== "light")
567+
|| (!prefersDarkScheme && currentTheme === "dark")) {
568+
button.attr("src", `${baseURLPrefix}images/light-mode.svg`);
569+
}
570+
button.css("display", "block");
571+
572+
button.click(function(e) {
573+
e.preventDefault();
574+
let theme
575+
if (prefersDarkScheme) {
576+
theme = document.documentElement.dataset.theme === "light" ? "dark" : "light"
577+
} else {
578+
theme = document.documentElement.dataset.theme === "dark" ? "light" : "dark"
579+
}
580+
document.documentElement.dataset.theme = theme
581+
localStorage.setItem("theme", theme);
582+
button.attr("src", `${baseURLPrefix}images/${theme === "dark" ? "light" : "dark"}-mode.svg`);
583+
});
584+
},
585+
}
586+
554587
// Scroll to Top
555588
$('#scrollToTop').removeClass('no-js');
556589
$(window).scroll(function() {

‎assets/sass/application.scss

+14-3
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,18 @@ $baseurl: "{{ .Site.BaseURL }}{{ if (and (ne .Site.BaseURL "/") (ne .Site.BaseUR
2727
@import 'book2';
2828
@import 'lists';
2929
@import 'about';
30+
@import 'dark-mode';
3031

3132
code {
3233
display: inline;
3334
padding: 0 5px;
3435
}
3536

3637
pre {
37-
background-color: #fff;
38-
border: solid 1px #efeee6;
38+
background-color: var(--main-bg);
39+
border: solid 1px var(--pre-border);
3940
border-radius: 3px;
40-
color: $orange;
41+
color: var(--orange);
4142
display: block;
4243
font-family: $fixed-width-font-family;
4344
font-variant-ligatures: none;
@@ -50,3 +51,13 @@ pre {
5051
.d-flex{
5152
display: flex;
5253
}
54+
55+
#dark-mode-button {
56+
grid-area: dark;
57+
display: none;
58+
width: 28px;
59+
background-color: transparent;
60+
text-decoration: none;
61+
align-self: center;
62+
margin: 5px;
63+
}

‎assets/sass/book.scss

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@import "variables";
22
@import "mixins";
3-
@import "layout";
43

54
.ebooks img {
65
padding: 5px;
@@ -13,7 +12,7 @@
1312
padding-bottom: 20px !important;
1413
background-color: transparent !important;
1514
overflow: hidden;
16-
border: solid 1px lighten($base-border-color, 10%);
15+
border: solid 1px var(--base-border-color-lighter-10);
1716
}
1817

1918
#book-intro {
@@ -36,7 +35,7 @@
3635
.license {
3736
font-size: 11px;
3837
line-height: 1.3;
39-
color: $light-font-color;
38+
color: var(--light-font-color);
4039
}
4140

4241
a#open-book {
@@ -52,7 +51,7 @@
5251
display: none;
5352
padding-left: 22px;
5453
font-size: 12px;
55-
color: $light-font-color;
54+
color: var(--light-font-color);
5655
text-align: center;
5756
text-indent: 40px;
5857

@@ -74,7 +73,7 @@ ol.book-toc {
7473
}
7574

7675
h2 {
77-
color: $font-color;
76+
color: var(--font-color);
7877
}
7978

8079
a {
@@ -140,7 +139,7 @@ ol.book-toc {
140139

141140
&.active {
142141
font-weight: bold;
143-
color: $orange;
142+
color: var(--orange);
144143
}
145144
}
146145
}

‎assets/sass/dark-mode.css

+193
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
@mixin mode($mode: light, $theme: "") {
2+
// Palette
3+
$orange: #f14e32;
4+
$blue: #009099;
5+
$font-color: #4e443c;
6+
$aside-font-color: lighten($font-color, 20%);
7+
$light-font-color: #9a9994;
8+
$link-color: #0388a6;
9+
$nav-link-color: #413932;
10+
$fixed-width-font-color: #4e443c;
11+
$button-bg-color: #dfddd554;
12+
$button-bg-hover-color: #fafafae5;
13+
$button-color: #{$link-color};
14+
$mark-bg-color: #ff0;
15+
$mark-color: #000;
16+
$base-border-color: #d8d7cf;
17+
$callout-color: #e9e8e0;
18+
$highlight-bg-color: #eee0b5;
19+
$pre-border: #efeee6;
20+
$black-3: #333333;
21+
$main-bg: #fcfcfa;
22+
$main-border: #e2e0d8;
23+
$bg-color: #f0efe7 url($baseurl + "images/bg/body.jpg");
24+
$sidebar-bg-color: #efefe7;
25+
$no-changes-bg-color: #f5f5f3;
26+
$dropdown-active-bg-color: #fff;
27+
$versions-footer-bg-color: #eae9e0;
28+
$search-border: #ceccc5;
29+
$search-focus-border: #007175;
30+
31+
@if $mode == dark {
32+
$orange: #d7834f;
33+
$blue: #007a7e;
34+
$font-color: #b3b1b1;
35+
$aside-font-color: darken($font-color, 10%);
36+
$light-font-color: #bdbbb0;
37+
$link-color: #d7834f;
38+
$nav-link-color: #979594;
39+
$fixed-width-font-color: #afa7a0;
40+
$button-bg-hover-color: #dfddd599;
41+
$button-color: #{$button-bg-hover-color};
42+
$mark-bg-color: #898882;
43+
$mark-color: #d2d2d2;
44+
$base-border-color: #b3b2a7;
45+
$callout-color: #555555;
46+
$highlight-bg-color: #47412d;
47+
$pre-border: #494945;
48+
$black-3: #cccccc;
49+
$main-bg: #333333;
50+
$main-border: #5e5e5a;
51+
$bg-color: #2a2a2aff;
52+
$sidebar-bg-color: #3d3d3a;
53+
$no-changes-bg-color: #515150;
54+
$dropdown-active-bg-color: #515150;
55+
$versions-footer-bg-color: #1f1f1e;
56+
$search-border: #5e5e5a;
57+
$search-focus-border: #ceccc5;
58+
59+
:root#{$theme} {
60+
div#masthead {
61+
background: transparent;
62+
}
63+
64+
div#masthead::before {
65+
content: "";
66+
width: 100%;
67+
height: 295px;
68+
@include background-image-2x($baseurl + "images/bg/isometric-grid", 35px, 21px, top right, repeat);
69+
position: absolute;
70+
filter: brightness(.4) contrast(1.6);
71+
z-index: -1;
72+
}
73+
74+
img {
75+
filter: brightness(.6) contrast(1.2);
76+
}
77+
78+
// the images in the About section would be too dark
79+
body#about {
80+
img:not(.no-filter) {
81+
filter: brightness(0.9) contrast(0.6) invert(1);
82+
}
83+
84+
ol#about-nav li a {
85+
filter: brightness(0.8);
86+
}
87+
}
88+
89+
img[alt="Git"] {
90+
filter: unset;
91+
content: url(./images/logo.dark-mode.svg);
92+
}
93+
94+
a.subtle-button {
95+
background-image: linear-gradient(#555555, #777777);
96+
border-top: solid 1px #333333;
97+
border-right: solid 1px #333333;
98+
border-bottom: solid 1px #333333;
99+
border-left: solid 1px #333333;
100+
@include box-shadow(none);
101+
}
102+
103+
#front-nav img {
104+
filter: none;
105+
}
106+
107+
div.monitor {
108+
filter: brightness(.85);
109+
}
110+
111+
.monitor a {
112+
color: #dbd7d7;
113+
}
114+
115+
hr.sidebar {
116+
filter: brightness(0.5);
117+
}
118+
119+
#documentation #main div.verseblock pre.content {
120+
color: var(--light-font-color);
121+
background-color: #5e5951;
122+
}
123+
124+
form#search {
125+
@include box-shadow(none);
126+
}
127+
128+
input.pagefind-ui__search-input {
129+
background: var(--main-bg);
130+
}
131+
132+
#search-results table td.matches :is(a:hover, a.highlight) {
133+
text-shadow:unset;
134+
}
135+
136+
#reference-version {
137+
background-color: #6f6e6954;
138+
}
139+
140+
#l10n-versions-dropdown footer a {
141+
color: #6969dd;
142+
}
143+
}
144+
}
145+
146+
:root#{$theme} {
147+
--orange: #{$orange};
148+
--orange-darker-5: #{darken($orange, 5%)};
149+
--blue: #{$blue};
150+
--font-color: #{$font-color};
151+
--aside-font-color: #{$aside-font-color};
152+
--light-font-color: #{$light-font-color};
153+
--light-font-color-darker-10: #{darken($light-font-color, 10%)};
154+
--light-font-color-darker-25: #{darken($light-font-color, 25%)};
155+
--light-font-color-darker-35: #{darken($light-font-color, 35%)};
156+
--light-font-color-darker-55: #{darken($light-font-color, 55%)};
157+
--light-font-color-lighter-20: #{lighten($light-font-color, 20%)};
158+
--link-color: #{$link-color};
159+
--nav-link-color: #{$nav-link-color};
160+
--link-hover-color: #{lighten($link-color, 10%)};
161+
--fixed-width-font-color: #{$fixed-width-font-color};
162+
--button-bg-color: #{$button-bg-color};
163+
--button-bg-hover-color: #{$button-bg-hover-color};
164+
--button-color: #{$button-color};
165+
--mark-bg-color: #{$mark-bg-color};
166+
--mark-color: #{$mark-color};
167+
--base-border-color: #{$base-border-color};
168+
--base-border-color-darker-8: #{darken($base-border-color, 8%)};
169+
--base-border-color-lighter-10: #{lighten($base-border-color, 10%)};
170+
--callout-color: #{$callout-color};
171+
--highlight-bg-color: #{$highlight-bg-color};
172+
--pre-border: #{$pre-border};
173+
174+
--black-3: #{$black-3};
175+
--main-bg: #{$main-bg};
176+
--main-border: #{$main-border};
177+
--sidebar-bg-color: #{$sidebar-bg-color};
178+
--bg-color: #{$bg-color};
179+
--no-changes-bg-color: #{$no-changes-bg-color};
180+
--dropdown-active-bg-color: #{$dropdown-active-bg-color};
181+
--versions-footer-bg-color: #{$versions-footer-bg-color};
182+
--search-border: #{$search-border};
183+
--search-focus-border: #{$search-focus-border};
184+
}
185+
}
186+
187+
@include mode
188+
@include mode($mode: dark, $theme: '[data-theme="dark"]')
189+
190+
@media screen and (prefers-color-scheme: dark) {
191+
@include mode($mode: dark, $theme: ':not([data-theme="light"])')
192+
@include mode($mode: light)
193+
}

0 commit comments

Comments
 (0)