From 1f0b623356c657697bb4618018c66c6b18045065 Mon Sep 17 00:00:00 2001
From: Benedikt Werner <1benediktwerner@gmail.com>
Date: Sun, 13 Oct 2019 23:54:36 +0200
Subject: [PATCH 1/3] Don't save default theme to localStorage
---
src/theme/book.js | 9 +++++----
src/theme/index.hbs | 8 +++++---
2 files changed, 10 insertions(+), 7 deletions(-)
diff --git a/src/theme/book.js b/src/theme/book.js
index 263e8ad05b..862200b766 100644
--- a/src/theme/book.js
+++ b/src/theme/book.js
@@ -321,7 +321,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') {
@@ -356,9 +356,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);
}
@@ -368,7 +369,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/index.hbs b/src/theme/index.hbs
index abb5c837ae..40c4a79357 100644
--- a/src/theme/index.hbs
+++ b/src/theme/index.hbs
@@ -39,7 +39,7 @@
{{/if}}
-
+
From 80f96cedeefd5a57d2484ca8fa055ad75a0a18b9 Mon Sep 17 00:00:00 2001
From: Benedikt Werner <1benediktwerner@gmail.com>
Date: Mon, 14 Oct 2019 00:04:16 +0200
Subject: [PATCH 2/3] Auto enable dark mode on no-js
---
src/theme/css/variables.css | 42 +++++++++++++++++++++++++++++++++++++
1 file changed, 42 insertions(+)
diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css
index 29daa07293..49a752d027 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) {
+ .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;
+ }
+}
From 895268ed2bc36fff818be2c4569bddfa30d1b9ae Mon Sep 17 00:00:00 2001
From: Benedikt Werner <1benediktwerner@gmail.com>
Date: Mon, 14 Oct 2019 17:12:19 +0200
Subject: [PATCH 3/3] Fix light theme with no-js
---
src/theme/css/variables.css | 2 +-
src/theme/index.hbs | 3 ++-
2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css
index 49a752d027..6838c644ac 100644
--- a/src/theme/css/variables.css
+++ b/src/theme/css/variables.css
@@ -210,7 +210,7 @@
}
@media (prefers-color-scheme: dark) {
- .no-js {
+ .light.no-js {
--bg: hsl(200, 7%, 8%);
--fg: #98a3ad;
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index 40c4a79357..0600c16a15 100644
--- a/src/theme/index.hbs
+++ b/src/theme/index.hbs
@@ -1,5 +1,5 @@
-
+
@@ -69,6 +69,7 @@
if (theme === null || theme === undefined) { theme = default_theme; }
var html = document.querySelector('html');
html.classList.remove('no-js')
+ html.classList.remove('{{ default_theme }}')
html.classList.add(theme);
html.classList.add('js');