fix: set dark theme based on prefers-color-scheme (#966)

* fix: set dark theme based on prefers-color-scheme

fixes #728

* add an explicit banner fill color

src/inline-script/inline-script.js

@@ -4,7 +4,7 @@
 // the build process and write it to checksum.js.
 
 import { testHasLocalStorageOnce } from '../routes/_utils/testStorage'
-import { switchToTheme } from '../routes/_utils/themeEngine'
+import { DEFAULT_LIGHT_THEME, DEFAULT_THEME, switchToTheme } from '../routes/_utils/themeEngine'
 import { basename } from '../routes/_api/utils'
 import { onUserIsLoggedOut } from '../routes/_actions/onUserIsLoggedOut'
 
@@ -26,12 +26,13 @@ if (currentInstance) {
   document.head.appendChild(link)
 }
 
-if (currentInstance && localStorage.store_instanceThemes) {
+let theme = (currentInstance &&
+  localStorage.store_instanceThemes &&
+  safeParse(localStorage.store_instanceThemes)[safeParse(localStorage.store_currentInstance)]) ||
+  DEFAULT_THEME
+if (theme !== DEFAULT_LIGHT_THEME) {
   // switch theme ASAP to minimize flash of default theme
-  let theme = safeParse(localStorage.store_instanceThemes)[safeParse(localStorage.store_currentInstance)]
+  switchToTheme(theme)
-  if (theme && theme !== 'default') {
-    switchToTheme(theme)
-  }
 }
 
 if (!hasLocalStorage || !currentInstance) {

src/routes/_actions/addInstance.js

@@ -1,7 +1,7 @@
 import { getAccessTokenFromAuthCode, registerApplication, generateAuthLink } from '../_api/oauth'
 import { getInstanceInfo } from '../_api/instance'
 import { goto } from '../../../__sapper__/client'
-import { switchToTheme } from '../_utils/themeEngine'
+import { DEFAULT_THEME, switchToTheme } from '../_utils/themeEngine'
 import { store } from '../_store/store'
 import { updateVerifyCredentialsForInstance } from './instances'
 import { updateCustomEmojiForInstance } from './emoji'
@@ -69,7 +69,7 @@ async function registerNewInstance (code) {
     REDIRECT_URI
   )
   let { loggedInInstances, loggedInInstancesInOrder, instanceThemes } = store.get()
-  instanceThemes[currentRegisteredInstanceName] = 'default'
+  instanceThemes[currentRegisteredInstanceName] = DEFAULT_THEME
   loggedInInstances[currentRegisteredInstanceName] = instanceData
   if (!loggedInInstancesInOrder.includes(currentRegisteredInstanceName)) {
     loggedInInstancesInOrder.push(currentRegisteredInstanceName)
@@ -84,7 +84,7 @@ async function registerNewInstance (code) {
     instanceThemes: instanceThemes
   })
   store.save()
-  switchToTheme('default')
+  switchToTheme(DEFAULT_THEME)
   // fire off these requests so they're cached
   /* no await */ updateVerifyCredentialsForInstance(currentRegisteredInstanceName)
   /* no await */ updateCustomEmojiForInstance(currentRegisteredInstanceName)

src/routes/_actions/instances.js

@@ -1,6 +1,6 @@
 import { getVerifyCredentials } from '../_api/user'
 import { store } from '../_store/store'
-import { switchToTheme } from '../_utils/themeEngine'
+import { DEFAULT_THEME, switchToTheme } from '../_utils/themeEngine'
 import { toast } from '../_components/toast/toast'
 import { goto } from '../../../__sapper__/client'
 import { cacheFirstUpdateAfter } from '../_utils/sync'
@@ -55,7 +55,7 @@ export async function logOutOfInstance (instanceName) {
   })
   store.save()
   toast.say(`Logged out of ${instanceName}`)
-  switchToTheme(instanceThemes[newInstance] || 'default')
+  switchToTheme(instanceThemes[newInstance] || DEFAULT_THEME)
   /* no await */ database.clearDatabaseForInstance(instanceName)
   goto('/settings/instances')
 }

src/routes/_components/NotLoggedInHome.html

@@ -27,11 +27,11 @@
   .not-logged-in-home-svg {
     width: 70px;
     height: 70px;
-    fill: royalblue;
+    fill: var(--banner-fill);
     display: inline-block;
   }
   .not-logged-in-home h1 {
-    color: royalblue;
+    color: var(--banner-fill);
     display: inline-block;
     font-size: 3em;
     margin: auto 15px;
@@ -55,4 +55,4 @@
       ExternalLink
     }
   }
-</script>
+</script>

src/routes/_components/settings/instance/ThemeSettings.html

@@ -75,19 +75,20 @@
   import { changeTheme } from '../../../_actions/instances'
   import { store } from '../../../_store/store'
   import { themes } from '../../../_static/themes'
+  import { DEFAULT_THEME } from '../../../_utils/themeEngine'
 
   export default {
     async oncreate () {
       let { instanceName } = this.get()
       let { instanceThemes } = this.store.get()
       this.set({
-        selectedTheme: instanceThemes[instanceName] || 'default'
+        selectedTheme: instanceThemes[instanceName] || DEFAULT_THEME
       })
     },
     store: () => store,
     data: () => ({
       themes,
-      selectedTheme: 'default'
+      selectedTheme: DEFAULT_THEME
     }),
     computed: {
       themeGroups: ({ themes }) => ([
@@ -108,4 +109,4 @@
       }
     }
   }
-</script>
+</script>

src/routes/_store/computations/instanceComputations.js

@@ -1,3 +1,5 @@
+import { DEFAULT_THEME } from '../../_utils/themeEngine'
+
 function computeForInstance (store, computedKey, key, defaultValue) {
   store.compute(computedKey,
     [key, 'currentInstance'],
@@ -5,7 +7,7 @@ function computeForInstance (store, computedKey, key, defaultValue) {
 }
 
 export function instanceComputations (store) {
-  computeForInstance(store, 'currentTheme', 'instanceThemes', 'default')
+  computeForInstance(store, 'currentTheme', 'instanceThemes', DEFAULT_THEME)
   computeForInstance(store, 'currentVerifyCredentials', 'verifyCredentials', null)
   computeForInstance(store, 'currentInstanceInfo', 'instanceInfos', null)
   computeForInstance(store, 'pinnedPage', 'pinnedPages', '/local')

src/routes/_utils/themeEngine.js

@@ -1,5 +1,10 @@
 let meta = process.browser && document.getElementById('theThemeColor')
 let offlineStyle = process.browser && document.getElementById('theOfflineStyle')
+let prefersDarkTheme = process.browser && window.matchMedia('(prefers-color-scheme: dark)').matches
+
+export const DEFAULT_LIGHT_THEME = 'default'
+export const DEFAULT_DARK_THEME = 'ozark'
+export const DEFAULT_THEME = prefersDarkTheme ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME
 
 function getExistingThemeLink () {
   return document.head.querySelector('link[rel=stylesheet][href^="/theme-"]')
@@ -30,10 +35,10 @@ function loadCSS (href) {
   document.head.insertBefore(link, offlineStyle)
 }
 
-export function switchToTheme (themeName = 'default') {
+export function switchToTheme (themeName = DEFAULT_THEME) {
   let themeColor = window.__themeColors[themeName]
-  meta.content = themeColor || window.__themeColors['default']
+  meta.content = themeColor || window.__themeColors[DEFAULT_THEME]
-  if (themeName !== 'default') {
+  if (themeName !== DEFAULT_LIGHT_THEME) {
     loadCSS(`/theme-${themeName}.css`)
   } else {
     resetExistingTheme()

src/scss/themes/_base.scss

@@ -97,4 +97,6 @@
   --compose-button-halo: #{rgba(255, 255, 255, 0.1)};
 
   --file-drop-mask: #{rgba(255, 255, 255, 0.8)};
+
+  --banner-fill: #{$main-theme-color};
 }

src/scss/themes/_dark.scss

@@ -37,4 +37,6 @@
   --settings-list-item-text-hover: #{$main-text-color};
   --settings-list-item-bg-active: #{lighten($main-bg-color, 7%)};
   --settings-list-item-bg-hover: #{lighten($main-bg-color, 3%)};
+
+  --banner-fill: #{lighten($main-theme-color, 10%)};
 }