1
Fork 0

Create the context and setup for theming.

This commit is contained in:
Bauke 2022-01-13 20:44:37 +01:00
parent 09656ee76c
commit 521de9ec70
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
3 changed files with 28 additions and 5 deletions

View File

@ -1,4 +1,3 @@
body,
.love-dark { .love-dark {
--border-radius: 8px; --border-radius: 8px;
--foreground-1: #f2efff; --foreground-1: #f2efff;

View File

@ -9,14 +9,23 @@ import {Router} from 'preact-router';
import HomePage from './pages/home.js'; import HomePage from './pages/home.js';
import NotFoundPage from './pages/not-found.js'; import NotFoundPage from './pages/not-found.js';
import ReleasePage from './pages/release.js'; import ReleasePage from './pages/release.js';
import {themeContext, themes} from './utilities/themes.js';
const savedTheme = window.localStorage.getItem('theme');
const activeTheme =
themes.find((theme) => theme.cssClass === savedTheme) ?? themes[0];
document.body.classList.value = activeTheme.cssClass;
render( render(
html` html`
<${themeContext.Provider} value=${activeTheme}>
<${Router}> <${Router}>
<${HomePage} path="/" /> <${HomePage} path="/" />
<${ReleasePage} path="/release/:mbid" /> <${ReleasePage} path="/release/:mbid" />
<${NotFoundPage} default /> <${NotFoundPage} default />
<//> <//>
<//>
`, `,
document.body, document.body,
); );

View File

@ -0,0 +1,15 @@
import {createContext} from 'preact';
type Theme = {
cssClass: string;
name: string;
};
export const themes: Theme[] = [
{
cssClass: 'love-dark',
name: 'Love Dark',
},
];
export const themeContext = createContext<Theme>(themes[0]);