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.') toast.say('You seem to be offline. You can still read toots while offline.')
}, OFFLINE_DELAY) }, OFFLINE_DELAY)
let oldTheme
let meta = process.browser && document.querySelector('meta[name="theme-color"]')
const observe = online => { const observe = online => {
if (!localStorage.store_currentInstance) { if (!localStorage.store_currentInstance) {
return // only show notification for logged-in users return // only show notification for logged-in users
} }
document.body.classList.toggle('offline', !online) 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() notifyOffline()
} }
} }

14
routes/_utils/themeEngine.js
View file

@ -1,15 +1,19 @@
import { loadCSS } from 'fg-loadcss'; import { loadCSS } from 'fg-loadcss';
let meta = process.browser && document.querySelector('meta[name="theme-color"]')
export function switchToTheme(themeName) { export function switchToTheme(themeName) {
let CL = document.body.classList let clazzList = document.body.classList
for (let i = 0; i < CL.length; i++) { for (let i = 0; i < clazzList.length; i++) {
let clazz = CL.item(i) let clazz = clazzList.item(i)
if (clazz.startsWith('theme-')) { if (clazz.startsWith('theme-')) {
CL.remove(clazz) clazzList.remove(clazz)
} }
} }
let themeColor = window.__themeColors[themeName]
meta.content = themeColor || window.__themeColors['default']
if (themeName !== 'default') { if (themeName !== 'default') {
CL.add(`theme-${themeName}`) clazzList.add(`theme-${themeName}`)
loadCSS(`/theme-${themeName}.css`) 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%); $body-bg-color: lighten($main-theme-color, 70%);
$anchor-color: $main-theme-color; $anchor-color: $main-theme-color;
$main-text-color: #333; $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> <body>
<script> <script>
<!-- load theme on startup (handled outside of Sapper/Svelte) --> <!-- 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) { if (localStorage.store_currentInstance && localStorage.store_instanceThemes) {
let theme = JSON.parse(localStorage.store_instanceThemes)[JSON.parse(localStorage.store_currentInstance)] let theme = JSON.parse(localStorage.store_instanceThemes)[JSON.parse(localStorage.store_currentInstance)]
if (theme !== 'default') { if (theme !== 'default') {
@ -44,6 +54,9 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
link.rel = 'stylesheet' link.rel = 'stylesheet'
link.href = `/theme-${theme}.css` link.href = `/theme-${theme}.css`
document.head.appendChild(link) document.head.appendChild(link)
if (window.__themeColors[theme]) {
document.querySelector('meta[name="theme-color"]').content = window.__themeColors[theme]
}
} }
} }
</script> </script>