CSS Styles

Colors

You can modify the colors either at the theme-root level or at any custom element level via any class you want to use staring with 'theme-' (e.g. 'theme-mod'). These are the CSS variables you can define, all other in-between colors will be derived from these.

custom-colors.css

.theme-root {
    --cAcc: color(display-p3 0 0.43 0.89);
    --cDark: color(display-p3 0.11 0.11 0.13);
    --cLight: color(display-p3 0.54 0.56 0.68);
    --cErr: color(display-p3 1 0 0.33);
}

Why is there only one accent color? I need more. – Because it's very easy to set this up by yourself. Just add a class, that overwrites the var(--cAcc) and make sure, it starts with 'theme-'.

custom-themes.css

.theme-error {
    --cAcc: color(display-p3 1 0.32 0.36);
}
.theme-warning {
    --cAcc: color(display-p3 1 0.95 0.32);
}

Sample Themes

/lib/ui/style.css

/* without styling */

Here are some recommended theming colors. Normally you would just drop this in you global stylesheet. In case you want variable theming, like here, I'd recommend to go the Svelte way and inject the style value in the root layout. I did this vanilla JS workaround here as I didn't want this small feature to affect the whole wiki's structure.

/lib/ui/ThemeSwitcher.svelte

<script lang="ts">
	import { CodeBlockFormatted } from '$docs';
	import { Radio } from '$lib';

	type Theme = {
		name: string;
		cAcc?: string;
		cDark?: string;
		cLight?: string;
	};
	const themes: Theme[] = [
		{ name: 'Blue' },
		{ name: 'Teal', cAcc: 'color(display-p3 0 0.75 0.48)' },
		{ name: 'Lime', cAcc: 'color(display-p3 .73 1 0)' },
		{ name: 'Yellow', cAcc: 'color(display-p3 1 0.85 0)' },
		{ name: 'Orange', cAcc: 'color(display-p3 1 0.47 0.1)' },
		{ name: 'Red', cAcc: 'color(display-p3 1 0 0.33)' },
		{ name: 'Violet', cAcc: 'color(display-p3 0.42 0 1)' },
	];
	let currTheme: Theme = $state(themes[0]!);
	let currStyle: string = $derived(
		Object.entries(currTheme)
			.filter(([key]) => key !== 'name')
			.map(([key, val]) => `    --${key}: ${val};`)
			.join('\n'),
	);
	let currRule: string = $derived(currStyle ? `.theme-root {\n${currStyle}\n}` : '');
	$effect(() => {
		const rootEl = document.querySelector<HTMLElement>('.theme-root');
		if (!rootEl) return console.warn('Can not theme! Theme root not found.');
		rootEl.style = currStyle;
	});
</script>

<div class="flex-hrz" style="align-items: stretch;">
	<fieldset class="ctrl-group vrt">
		{#each themes as theme}
			<Radio name="theme" value={theme} bind:group={currTheme} label={theme.name} />
		{/each}
	</fieldset>

	<CodeBlockFormatted
		name="/lib/ui/style.css"
		code={currRule || '/* without styling */'}
		lang="css"
		class="flex-1"
		nodent
	/>
</div>