fix: separate "inline theme" from "default theme" (#1216)
This commit is contained in:
parent
d92bd2e94b
commit
692e8b57c3
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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()
|
||||||
|
|
Loading…
Reference in a new issue