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');