diff --git a/routes/_utils/offlineNotification.js b/routes/_utils/offlineNotification.js index ee8db78..8795d04 100644 --- a/routes/_utils/offlineNotification.js +++ b/routes/_utils/offlineNotification.js @@ -7,12 +7,21 @@ const notifyOffline = debounce(() => { toast.say('You seem to be offline. You can still read toots while offline.') }, OFFLINE_DELAY) +let oldTheme +let meta = process.browser && document.querySelector('meta[name="theme-color"]') + const observe = online => { if (!localStorage.store_currentInstance) { return // only show notification for logged-in users } document.body.classList.toggle('offline', !online) - if (!online) { + if (online) { + meta.content = oldTheme || window.__themeColors['default'] + } else { + let offlineThemeColor = window.__themeColors.offline + if (meta.content !== offlineThemeColor) + oldTheme = meta.content + meta.content = offlineThemeColor notifyOffline() } } diff --git a/routes/_utils/themeEngine.js b/routes/_utils/themeEngine.js index 6d0b2be..0788135 100644 --- a/routes/_utils/themeEngine.js +++ b/routes/_utils/themeEngine.js @@ -1,15 +1,19 @@ import { loadCSS } from 'fg-loadcss'; +let meta = process.browser && document.querySelector('meta[name="theme-color"]') + export function switchToTheme(themeName) { - let CL = document.body.classList - for (let i = 0; i < CL.length; i++) { - let clazz = CL.item(i) + let clazzList = document.body.classList + for (let i = 0; i < clazzList.length; i++) { + let clazz = clazzList.item(i) if (clazz.startsWith('theme-')) { - CL.remove(clazz) + clazzList.remove(clazz) } } + let themeColor = window.__themeColors[themeName] + meta.content = themeColor || window.__themeColors['default'] if (themeName !== 'default') { - CL.add(`theme-${themeName}`) + clazzList.add(`theme-${themeName}`) loadCSS(`/theme-${themeName}.css`) } } \ No newline at end of file diff --git a/scss/themes/gecko.scss b/scss/themes/gecko.scss index b998503..ed7dfe3 100644 --- a/scss/themes/gecko.scss +++ b/scss/themes/gecko.scss @@ -1,4 +1,4 @@ -$main-theme-color: darken(#41e041, 32%); +$main-theme-color: #126c12; $body-bg-color: lighten($main-theme-color, 70%); $anchor-color: $main-theme-color; $main-text-color: #333; diff --git a/templates/2xx.html b/templates/2xx.html index 1953489..843e28b 100644 --- a/templates/2xx.html +++ b/templates/2xx.html @@ -36,6 +36,16 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o