fix: separate "inline theme" from "default theme" (#1216)

This commit is contained in:
Nolan Lawson 2019-05-25 08:19:11 -07:00 committed by GitHub
parent d92bd2e94b
commit 692e8b57c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 5 deletions

View File

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

View File

@ -2,8 +2,9 @@ let meta = process.browser && document.getElementById('theThemeColor')
let offlineStyle = process.browser && document.getElementById('theOfflineStyle') let offlineStyle = process.browser && document.getElementById('theOfflineStyle')
let prefersDarkTheme = process.browser && window.matchMedia('(prefers-color-scheme: dark)').matches let prefersDarkTheme = process.browser && window.matchMedia('(prefers-color-scheme: dark)').matches
export const DEFAULT_LIGHT_THEME = 'default' export const INLINE_THEME = 'default' // theme that does not require external CSS
export const DEFAULT_DARK_THEME = 'ozark' export const DEFAULT_LIGHT_THEME = 'default' // theme that is shown by default
export const DEFAULT_DARK_THEME = 'ozark' // theme that is shown for prefers-color-scheme:dark
export const DEFAULT_THEME = prefersDarkTheme ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME export const DEFAULT_THEME = prefersDarkTheme ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME
function getExistingThemeLink () { function getExistingThemeLink () {
@ -38,7 +39,7 @@ function loadCSS (href) {
export function switchToTheme (themeName = DEFAULT_THEME) { export function switchToTheme (themeName = DEFAULT_THEME) {
let themeColor = window.__themeColors[themeName] let themeColor = window.__themeColors[themeName]
meta.content = themeColor || window.__themeColors[DEFAULT_THEME] meta.content = themeColor || window.__themeColors[DEFAULT_THEME]
if (themeName !== DEFAULT_LIGHT_THEME) { if (themeName !== INLINE_THEME) {
loadCSS(`/theme-${themeName}.css`) loadCSS(`/theme-${themeName}.css`)
} else { } else {
resetExistingTheme() resetExistingTheme()