data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

set meta theme color correctly

Browse source
This commit is contained in:
Nolan Lawson 2018-01-21 15:20:50 -08:00
parent 6183a9787a
commit d627348d19
4 changed files with 33 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
routes/_utils/offlineNotification.js
View file

@ -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()
}
}

14
routes/_utils/themeEngine.js
View file

@ -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`)
}
}

2
scss/themes/gecko.scss
View file

@ -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;

13
templates/2xx.html
View file

@ -36,6 +36,16 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
<body>
<script>
<!-- load theme on startup (handled outside of Sapper/Svelte) -->
window.__themeColors = {
'default': "royalblue",
scarlet: "#e04e41",
seafoam: "teal",
hotpants: "hotpink",
oaken: "saddlebrown",
majesty: "blueviolet",
gecko: "#126c12",
offline: "#999999"
}
if (localStorage.store_currentInstance && localStorage.store_instanceThemes) {
let theme = JSON.parse(localStorage.store_instanceThemes)[JSON.parse(localStorage.store_currentInstance)]
if (theme !== 'default') {
@ -44,6 +54,9 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
link.rel = 'stylesheet'
link.href = `/theme-${theme}.css`
document.head.appendChild(link)
if (window.__themeColors[theme]) {
document.querySelector('meta[name="theme-color"]').content = window.__themeColors[theme]
}
}
}
</script>