From c9dae170f38bae0907a86eff36406f1231b580ec Mon Sep 17 00:00:00 2001
From: Benedikt Werner <1benediktwerner@gmail.com>
Date: Wed, 23 Oct 2019 12:15:59 +0200
Subject: [PATCH] Better automatic dark mode (#1069)
* Don't save default theme to localStorage
* Auto enable dark mode on no-js
* Fix light theme with no-js
---
src/theme/book.js | 9 ++++----
src/theme/css/variables.css | 42 +++++++++++++++++++++++++++++++++++++
src/theme/index.hbs | 11 ++++++----
3 files changed, 54 insertions(+), 8 deletions(-)
diff --git a/src/theme/book.js b/src/theme/book.js
index 1a419adb..fa352891 100644
--- a/src/theme/book.js
+++ b/src/theme/book.js
@@ -296,7 +296,7 @@ function playpen_text(playpen) {
themeToggleButton.focus();
}
- function set_theme(theme) {
+ function set_theme(theme, store = true) {
let ace_theme;
if (theme == 'coal' || theme == 'navy') {
@@ -331,9 +331,10 @@ function playpen_text(playpen) {
try { previousTheme = localStorage.getItem('mdbook-theme'); } catch (e) { }
if (previousTheme === null || previousTheme === undefined) { previousTheme = default_theme; }
- try { localStorage.setItem('mdbook-theme', theme); } catch (e) { }
+ if (store) {
+ try { localStorage.setItem('mdbook-theme', theme); } catch (e) { }
+ }
- document.body.className = theme;
html.classList.remove(previousTheme);
html.classList.add(theme);
}
@@ -343,7 +344,7 @@ function playpen_text(playpen) {
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = default_theme; }
- set_theme(theme);
+ set_theme(theme, false);
themeToggleButton.addEventListener('click', function () {
if (themePopup.style.display === 'block') {
diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css
index 29daa072..6838c644 100644
--- a/src/theme/css/variables.css
+++ b/src/theme/css/variables.css
@@ -208,3 +208,45 @@
--searchresults-li-bg: #dec2a2;
--search-mark-bg: #e69f67;
}
+
+@media (prefers-color-scheme: dark) {
+ .light.no-js {
+ --bg: hsl(200, 7%, 8%);
+ --fg: #98a3ad;
+
+ --sidebar-bg: #292c2f;
+ --sidebar-fg: #a1adb8;
+ --sidebar-non-existant: #505254;
+ --sidebar-active: #3473ad;
+ --sidebar-spacer: #393939;
+
+ --scrollbar: var(--sidebar-fg);
+
+ --icons: #43484d;
+ --icons-hover: #b3c0cc;
+
+ --links: #2b79a2;
+
+ --inline-code-color: #c5c8c6;;
+
+ --theme-popup-bg: #141617;
+ --theme-popup-border: #43484d;
+ --theme-hover: #1f2124;
+
+ --quote-bg: hsl(234, 21%, 18%);
+ --quote-border: hsl(234, 21%, 23%);
+
+ --table-border-color: hsl(200, 7%, 13%);
+ --table-header-bg: hsl(200, 7%, 28%);
+ --table-alternate-bg: hsl(200, 7%, 11%);
+
+ --searchbar-border-color: #aaa;
+ --searchbar-bg: #b7b7b7;
+ --searchbar-fg: #000;
+ --searchbar-shadow-color: #aaa;
+ --searchresults-header-fg: #666;
+ --searchresults-border-color: #98a3ad;
+ --searchresults-li-bg: #2b2b2f;
+ --search-mark-bg: #355c7d;
+ }
+}
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index 99ae32ab..3a0cb4a8 100644
--- a/src/theme/index.hbs
+++ b/src/theme/index.hbs
@@ -1,5 +1,5 @@
-
+
@@ -39,7 +39,7 @@
{{/if}}
-
+