fix: separate "inline theme" from "default theme" (#1216)
This commit is contained in:
		
							parent
							
								
									d92bd2e94b
								
							
						
					
					
						commit
						692e8b57c3
					
				
					 2 changed files with 6 additions and 5 deletions
				
			
		| 
						 | 
				
			
			@ -4,7 +4,7 @@
 | 
			
		|||
// the build process and write it to checksum.js.
 | 
			
		||||
 | 
			
		||||
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 { onUserIsLoggedOut } from '../routes/_actions/onUserIsLoggedOut'
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -30,7 +30,7 @@ let theme = (currentInstance &&
 | 
			
		|||
  localStorage.store_instanceThemes &&
 | 
			
		||||
  safeParse(localStorage.store_instanceThemes)[safeParse(localStorage.store_currentInstance)]) ||
 | 
			
		||||
  DEFAULT_THEME
 | 
			
		||||
if (theme !== DEFAULT_LIGHT_THEME) {
 | 
			
		||||
if (theme !== INLINE_THEME) {
 | 
			
		||||
  // switch theme ASAP to minimize flash of default theme
 | 
			
		||||
  switchToTheme(theme)
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -2,8 +2,9 @@ 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 INLINE_THEME = 'default' // theme that does not require external CSS
 | 
			
		||||
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
 | 
			
		||||
 | 
			
		||||
function getExistingThemeLink () {
 | 
			
		||||
| 
						 | 
				
			
			@ -38,7 +39,7 @@ function loadCSS (href) {
 | 
			
		|||
export function switchToTheme (themeName = DEFAULT_THEME) {
 | 
			
		||||
  let themeColor = window.__themeColors[themeName]
 | 
			
		||||
  meta.content = themeColor || window.__themeColors[DEFAULT_THEME]
 | 
			
		||||
  if (themeName !== DEFAULT_LIGHT_THEME) {
 | 
			
		||||
  if (themeName !== INLINE_THEME) {
 | 
			
		||||
    loadCSS(`/theme-${themeName}.css`)
 | 
			
		||||
  } else {
 | 
			
		||||
    resetExistingTheme()
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		
		Reference in a new issue