63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
import twColors from "tailwindcss/colors"
|
|
import {derived, readable} from "svelte/store"
|
|
import {hash} from "@welshman/lib"
|
|
import {synced} from "@welshman/store"
|
|
import {FL_THEME} from "@app/env"
|
|
import {kv} from "@app/storage"
|
|
|
|
const colors = [
|
|
twColors.amber[600],
|
|
twColors.blue[600],
|
|
twColors.cyan[600],
|
|
twColors.emerald[600],
|
|
twColors.fuchsia[600],
|
|
twColors.green[600],
|
|
twColors.indigo[600],
|
|
twColors.sky[600],
|
|
twColors.lime[600],
|
|
twColors.orange[600],
|
|
twColors.pink[600],
|
|
twColors.purple[600],
|
|
twColors.red[600],
|
|
twColors.rose[600],
|
|
twColors.sky[600],
|
|
twColors.teal[600],
|
|
twColors.violet[600],
|
|
twColors.yellow[600],
|
|
twColors.zinc[600],
|
|
]
|
|
|
|
export const colorFor = (value: string) => colors[hash(value) % colors.length]
|
|
|
|
// Every theme with token values in lib/components/theme.css
|
|
export const flThemes = ["clay", "flat", "navy"]
|
|
|
|
export const flTheme = synced({
|
|
key: "flTheme",
|
|
defaultValue: FL_THEME,
|
|
storage: kv,
|
|
})
|
|
|
|
export const theme = synced({
|
|
key: "theme",
|
|
defaultValue: "system",
|
|
storage: kv,
|
|
})
|
|
|
|
const prefersDark = readable(window.matchMedia("(prefers-color-scheme: dark)").matches, set => {
|
|
const query = window.matchMedia("(prefers-color-scheme: dark)")
|
|
const onChange = () => set(query.matches)
|
|
|
|
query.addEventListener("change", onChange)
|
|
|
|
return () => query.removeEventListener("change", onChange)
|
|
})
|
|
|
|
// What actually gets stamped on the document, since `theme` may defer to the os
|
|
export const activeTheme = derived([theme, prefersDark], ([$theme, $prefersDark]) => {
|
|
if ($theme === "system") {
|
|
return $prefersDark ? "dark" : "light"
|
|
}
|
|
|
|
return $theme
|
|
})
|