Skip to content

Commit 90b9912

Browse files
dschodscho
committed
Merge branch 'dark-mode' into gh-pages
This is ongoing work, deployed to my personal fork for the convenience of testing out the changes from Pull Request 1888. Signed-off-by: Johannes Schindelin <[email protected]>
2 parents 64518d0 + d169ee1 commit 90b9912

Some content is hidden

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

41 files changed

+344
-148
lines changed

‎assets/js/application.js

+33
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const baseURLPrefix = (() => {
2929

3030
$(document).ready(function() {
3131
BrowserFallbacks.init();
32+
DarkMode.init();
3233
Search.init();
3334
Dropdowns.init();
3435
Forms.init();
@@ -541,6 +542,38 @@ var Downloads = {
541542
},
542543
}
543544

545+
var DarkMode = {
546+
init: function() {
547+
const button = $('#dark-mode-button');
548+
if (!button.length) return;
549+
button.show(3000);
550+
551+
// Check for dark mode preference at the OS level
552+
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
553+
554+
// Get the user's theme preference from local storage, if it's available
555+
const currentTheme = localStorage.getItem("theme");
556+
557+
if ((prefersDarkScheme && currentTheme !== "light")
558+
|| (!prefersDarkScheme && currentTheme === "dark")) {
559+
button.text("🌞");
560+
}
561+
562+
button.click(function(e) {
563+
e.preventDefault();
564+
let theme
565+
if (prefersDarkScheme) {
566+
theme = document.documentElement.dataset.theme === "light" ? "dark" : "light"
567+
} else {
568+
theme = document.documentElement.dataset.theme === "dark" ? "light" : "dark"
569+
}
570+
document.documentElement.dataset.theme = theme
571+
localStorage.setItem("theme", theme);
572+
button.text(theme === "dark" ? "🌞" : "🌙");
573+
});
574+
},
575+
}
576+
544577
// Scroll to Top
545578
$('#scrollToTop').removeClass('no-js');
546579
$(window).scroll(function() {

‎assets/sass/application.scss

+3-2
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+
background-color: var(--main-bg);
3839
border: solid 1px #efeee6;
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;

‎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

+178
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
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: rgba(223, 221, 213, 0.33);
12+
$button-bg-hover-color: rgba(250, 250, 250, 0.9);
13+
$mark-color: #ff0;
14+
$base-border-color: #d8d7cf;
15+
$callout-color: #e9e8e0;
16+
$highlight-bg-color: #eee0b5;
17+
$black-3: #333333;
18+
$main-bg: #fcfcfa;
19+
$bg-color: #f0efe7 url($baseurl + "images/bg/body.jpg");
20+
$sidebar-bg-color: #efefe7;
21+
$no-changes-bg-color: #f5f5f3;
22+
$dropdown-active-bg-color: #fff;
23+
$versions-footer-bg-color: #eae9e0;
24+
25+
@if $mode == dark {
26+
$orange: #d7834f;
27+
$blue: #007a7e;
28+
$font-color: #b3b1b1;
29+
$aside-font-color: darken($font-color, 10%);
30+
$light-font-color: #bdbbb0;
31+
$link-color: #5facaf;
32+
$nav-link-color: #979594;
33+
$fixed-width-font-color: #afa7a0;
34+
$button-bg-hover-color: rgba(223, 221, 213, 0.6);
35+
$mark-color: #aeae74;
36+
$base-border-color: #b3b2a7;
37+
$callout-color: #555555;
38+
$highlight-bg-color: #7d724f;
39+
$black-3: #cccccc;
40+
$main-bg: #333333;
41+
$bg-color: #2a2a2aff;
42+
$sidebar-bg-color: #3d3d3a;
43+
$no-changes-bg-color: #515150;
44+
$dropdown-active-bg-color: #515150;
45+
$versions-footer-bg-color: #1f1f1e;
46+
47+
:root#{$theme} {
48+
div#masthead {
49+
background: transparent;
50+
}
51+
div#masthead::before {
52+
content: "";
53+
width: 100%;
54+
height: 295px;
55+
@include background-image-2x($baseurl + "images/bg/isometric-grid", 35px, 21px, top right, repeat);
56+
position: absolute;
57+
filter: brightness(.4) contrast(1.6);
58+
z-index: -1;
59+
}
60+
img {
61+
filter: brightness(.6) contrast(1.2);
62+
}
63+
// let the logo shine slightly brighter
64+
img[alt="Git"] {
65+
filter: brightness(0.9) contrast(1.5);
66+
}
67+
68+
a.subtle-button {
69+
background-image: linear-gradient(#555555, #777777);
70+
border-top: solid 1px #333333;
71+
border-right: solid 1px #333333;
72+
border-bottom: solid 1px #333333;
73+
border-left: solid 1px #333333;
74+
@include box-shadow(none);
75+
}
76+
77+
a {
78+
text-decoration: dashed 1px underline;
79+
}
80+
81+
#front-nav img {
82+
filter: none;
83+
}
84+
85+
div.monitor {
86+
filter: brightness(.85);
87+
}
88+
89+
.monitor a {
90+
color: #dbd7d7;
91+
}
92+
93+
hr.sidebar {
94+
filter: brightness(0.5);
95+
}
96+
97+
#documentation #main div.verseblock pre.content {
98+
color: var(--light-font-color);
99+
background-color: #5e5951;
100+
}
101+
102+
form#search {
103+
@include box-shadow(none);
104+
}
105+
106+
input.pagefind-ui__search-input {
107+
background: var(--main-bg);
108+
}
109+
110+
#reference-version {
111+
background-color: rgba(111, 110, 105, 0.33);
112+
}
113+
114+
#l10n-versions-dropdown footer a {
115+
color: #6969dd;
116+
}
117+
}
118+
}
119+
120+
:root#{$theme} {
121+
--orange: #{$orange};
122+
--orange-darker-5: #{darken($orange, 5%)};
123+
--blue: #{$blue};
124+
--font-color: #{$font-color};
125+
--aside-font-color: #{$aside-font-color};
126+
--light-font-color: #{$light-font-color};
127+
--light-font-color-darker-10: #{darken($light-font-color, 10%)};
128+
--light-font-color-darker-25: #{darken($light-font-color, 25%)};
129+
--light-font-color-darker-35: #{darken($light-font-color, 35%)};
130+
--light-font-color-darker-55: #{darken($light-font-color, 55%)};
131+
--light-font-color-lighter-20: #{lighten($light-font-color, 20%)};
132+
--link-color: #{$link-color};
133+
--nav-link-color: #{$nav-link-color};
134+
--link-hover-color: #{lighten($link-color, 10%)};
135+
--fixed-width-font-color: #{$fixed-width-font-color};
136+
--button-bg-color: #{$button-bg-color};
137+
--button-bg-hover-color: #{$button-bg-hover-color};
138+
--mark-color: #{$mark-color};
139+
--base-border-color: #{$base-border-color};
140+
--base-border-color-darker-8: #{darken($base-border-color, 8%)};
141+
--base-border-color-lighter-10: #{lighten($base-border-color, 10%)};
142+
--callout-color: #{$callout-color};
143+
--highlight-bg-color: #{$highlight-bg-color};
144+
145+
--black-3: #{$black-3};
146+
--main-bg: #{$main-bg};
147+
--sidebar-bg-color: #{$sidebar-bg-color};
148+
--bg-color: #{$bg-color};
149+
--no-changes-bg-color: #{$no-changes-bg-color};
150+
--dropdown-active-bg-color: #{$dropdown-active-bg-color};
151+
--versions-footer-bg-color: #{$versions-footer-bg-color};
152+
}
153+
}
154+
155+
@include mode
156+
@include mode($mode: dark, $theme: '[data-theme="dark"]')
157+
158+
@media screen and (prefers-color-scheme: dark) {
159+
@include mode($mode: dark)
160+
@include mode($mode: light, $theme: '[data-theme="light"]')
161+
}
162+
163+
#dark-mode-button {
164+
display: none;
165+
z-index: 10;
166+
position: fixed;
167+
right: 20px;
168+
bottom: 2rem;
169+
border-radius: 50px;
170+
border: 2px solid transparent;
171+
font-size: x-large;
172+
padding: 10px 5px 10px 5px;
173+
background-color: var(--button-bg-color);
174+
&:hover {
175+
background-color: var(--button-bg-hover-color);
176+
}
177+
text-decoration: none;
178+
}

‎assets/sass/downloads.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
#logo-license {
65
@extend .callout;
@@ -10,7 +9,7 @@
109
p {
1110
font-size: 12px;
1211
line-height: 1.4;
13-
color: $light-font-color;
12+
color: var(--light-font-color);
1413
}
1514

1615
p + p {
@@ -56,7 +55,7 @@
5655

5756
a {
5857
display: block;
59-
color: $font-color;
58+
color: var(--font-color);
6059
text-align: center;
6160
background-repeat: no-repeat;
6261
background-position: 0 0;
@@ -75,7 +74,7 @@
7574
h3 {
7675
font-size: 18px;
7776
font-weight: bold;
78-
color: $orange;
77+
color: var(--orange);
7978
}
8079

8180
p {
@@ -90,7 +89,7 @@
9089
}
9190

9291
h3 {
93-
color: darken($orange, 5%);
92+
color: var(--orange-darker-5);
9493
}
9594
}
9695
}
@@ -100,7 +99,7 @@
10099
top: 8px;
101100
left: 12px;
102101
display: none;
103-
color: $orange;
102+
color: var(--orange);
104103
}
105104

106105
.downloading .hide {

‎assets/sass/errors.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ body {
55
font-size: $base-font-size;
66
line-height: $base-line-height;
77
font-family: $base-font-family;
8-
color: $font-color;
9-
background: #f0efe7 url($baseurl + "images/bg/body.jpg");
8+
color: var(--font-color);
9+
background: var(--bg-color);
1010
}
1111

1212
// windows chrome makes a mess of Adelle web font
@@ -43,9 +43,9 @@ nav ul {
4343
li {
4444
a {
4545
display: block;
46-
color: $orange;
46+
color: var(--orange);
4747
&:hover {
48-
color: darken($orange, 5%);
48+
color: var(--orange-darker-5);
4949
}
5050
}
5151
}

0 commit comments

Comments
 (0)