From 605a49e6d1ce4ff33c310388d5ade4f8944683cc Mon Sep 17 00:00:00 2001
From: Oli Evans <oli@tableflip.io>
Date: Tue, 28 Jul 2020 16:01:51 +0100
Subject: [PATCH] fix: ensure light mode even if dark mode OS pref (#1029)

---
 assets/_custom.scss           |  7 ++-----
 assets/_variables.scss        |  2 ++
 assets/dark-mode/dark-mode.js | 10 ++--------
 assets/plugins/_dark.scss     |  2 ++
 4 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/assets/_custom.scss b/assets/_custom.scss
index 0833b53cf..030bcc2fb 100644
--- a/assets/_custom.scss
+++ b/assets/_custom.scss
@@ -77,8 +77,7 @@
     padding: 1px .5rem;
     border: 0;
     border-radius: .25rem;
-    background: rgba(255,255,255,.1);
-    color: #e9ecef;
+    background: $book-search-results-bg;
     margin-top: 3px;
 }
 
@@ -89,9 +88,7 @@
 #book-search-input {
     outline: none;
 }
-#book-search-input:focus {
-    background: rgba(255,255,255,.2);
-}
+
 // Tweaks
 summary {
     outline: none;
diff --git a/assets/_variables.scss b/assets/_variables.scss
index 98b4d4ef2..f15a40569 100644
--- a/assets/_variables.scss
+++ b/assets/_variables.scss
@@ -1 +1,3 @@
 /* You can override SASS variables here. */
+
+$book-search-results-bg: #f8f9fa !default;
diff --git a/assets/dark-mode/dark-mode.js b/assets/dark-mode/dark-mode.js
index 2bed8d3f8..5fe0f1d1b 100644
--- a/assets/dark-mode/dark-mode.js
+++ b/assets/dark-mode/dark-mode.js
@@ -5,8 +5,7 @@
   const lightMode = document.getElementById('light-mode-link')
   const darkMode = document.getElementById('dark-mode-link')
   const btn = document.querySelector('.dark-mode-toggle')
-  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches 
-  let theme = prefersDarkScheme ? 'dark' : 'light'
+  let theme = 'light'
 
   function enableLightMode () {
     lightMode.disabled = false
@@ -20,16 +19,11 @@
     btn.setAttribute('aria-pressed', theme === 'dark')
   }
   
-  // enable dark theme optimistically on OS with dark theme enabled to reduce flashing of white theme.
-  if (prefersDarkScheme) {
-    enableDarkMode()
-  }
-
   // wait for localstorage...
   const previousChoice = localStorage.getItem('theme')
   theme = previousChoice || theme
   
-  // Light is default, so enable dark if user previously chose it but their OS pref is light.
+  // Light is default, so enable dark if user previously chose it.
   if (theme === 'dark') {
     enableDarkMode()
   }
diff --git a/assets/plugins/_dark.scss b/assets/plugins/_dark.scss
index d2c57e39c..5131ee6cd 100644
--- a/assets/plugins/_dark.scss
+++ b/assets/plugins/_dark.scss
@@ -9,3 +9,5 @@ $color-link: #0090ff;
 $color-visited-link: #0090ff;
 
 $icon-filter: brightness(0) invert(1);
+
+$book-search-results-bg: rgba(255,255,255,.1);