Skip to content

Commit dd61f78

Browse files
bkoelmanbkoelman
committed
Add dark mode to landing page
1 parent b0a5f45 commit dd61f78

File tree

4 files changed

+81
-0
lines changed

4 files changed

+81
-0
lines changed

Diff for: ‎docs/home/assets/dark-mode.css

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
html {
2+
background-color: #171717 !important;
3+
filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
4+
-webkit-filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
5+
}
6+
7+
body {
8+
background-color: #FFF !important;
9+
}
10+
11+
img,
12+
video,
13+
body * [style*="background-image"] {
14+
filter: hue-rotate(180deg) contrast(100%) invert(100%);
15+
-webkit-filter: hue-rotate(180deg) contrast(100%) invert(100%);
16+
}

Diff for: ‎docs/home/assets/home.css

+8
Original file line numberDiff line numberDiff line change
@@ -603,3 +603,11 @@ div[sponsor]:hover {
603603
padding: 3px 0;
604604
}
605605
}
606+
607+
/*--------------------------------------------------------------
608+
# Theme selection
609+
--------------------------------------------------------------*/
610+
.btn-theme:focus,
611+
.btn-theme:active {
612+
box-shadow: none !important;
613+
}

Diff for: ‎docs/home/assets/home.js

+29
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,31 @@
1+
function setTheme(theme) {
2+
const darkModeStyleSheet = document.getElementById('dark-mode-style-sheet');
3+
const activeTheme = document.getElementById('active-theme');
4+
5+
if (theme === "auto") {
6+
darkModeStyleSheet.disabled = !window.matchMedia("(prefers-color-scheme: dark)").matches;
7+
activeTheme.className = "bi-circle-half";
8+
}
9+
else if (theme === "dark") {
10+
darkModeStyleSheet.disabled = false;
11+
activeTheme.className = "bi bi-moon";
12+
} else if (theme === "light") {
13+
darkModeStyleSheet.disabled = true;
14+
activeTheme.className = "bi bi-sun";
15+
}
16+
17+
localStorage.setItem("theme", theme)
18+
}
19+
20+
$('.theme-choice').click(function () {
21+
setTheme(this.dataset.theme);
22+
})
23+
24+
function initTheme() {
25+
const theme = localStorage.getItem("theme") || "auto";
26+
setTheme(theme);
27+
}
28+
129
!(function($) {
230
"use strict";
331

@@ -89,6 +117,7 @@
89117
}
90118
$(window).on('load', function() {
91119
aos_init();
120+
initTheme();
92121
});
93122

94123
})(jQuery);

Diff for: ‎docs/home/index.html

+28
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,41 @@
1010
<link href="favicon.ico" rel="apple-touch-icon">
1111
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
1212
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
13+
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
1314
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet">
1415
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/styles/default.min.css" rel="stylesheet">
1516
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
1617
<link href="styles/home.css" rel="stylesheet">
1718
<link href="styles/icofont.min.css" rel="stylesheet">
19+
<link href="styles/dark-mode.css" rel="stylesheet" id="dark-mode-style-sheet" disabled>
20+
<script>
21+
// Running this early to prevent an initial white flash on page load when dark mode is the default theme.
22+
const darkModeStyleSheet = document.getElementById('dark-mode-style-sheet');
23+
const theme = localStorage.getItem("theme") || "auto";
24+
25+
if (theme === "auto") {
26+
darkModeStyleSheet.disabled = !window.matchMedia("(prefers-color-scheme: dark)").matches;
27+
}
28+
else if (theme === "dark") {
29+
darkModeStyleSheet.disabled = false;
30+
} else if (theme === "light") {
31+
darkModeStyleSheet.disabled = true;
32+
}
33+
</script>
1834
</head>
1935
<body>
36+
<div class="container-xl">
37+
<div class="dropdown p-3 float-right">
38+
<a class="btn btn-theme dropdown-toggle" href="#" role="button" id="themeSelector" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
39+
<i id="active-theme"></i>
40+
</a>
41+
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="themeSelector">
42+
<a class="dropdown-item theme-choice" data-theme="light" href="#"><i class="bi bi-sun"></i> Light</a>
43+
<a class="dropdown-item theme-choice" data-theme="dark" href="#"><i class="bi bi-moon"></i> Dark</a>
44+
<a class="dropdown-item theme-choice" data-theme="auto" href="#"><i class="bi-circle-half"></i> Auto</a>
45+
</div>
46+
</div>
47+
</div>
2048
<section id="hero" class="d-flex align-items-center">
2149
<div class="container">
2250
<div class="row">

0 commit comments

Comments
 (0)