51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { createEffect } from "solid-js";
|
|
|
|
import { useState } from "@revolt/state";
|
|
|
|
import {
|
|
createMaterialColourVariables,
|
|
createMduiColourTriplets,
|
|
createStoatWebVariables,
|
|
} from ".";
|
|
import { Masks } from "./Masks";
|
|
import { FONTS, MONOSPACE_FONTS } from "./fonts";
|
|
import { legacyThemeUnsetShim } from "./legacyThemeGeneratorCode";
|
|
|
|
/**
|
|
* Component for loading theme variables into root
|
|
*/
|
|
export function LoadTheme() {
|
|
const state = useState();
|
|
|
|
createEffect(() => {
|
|
const activeTheme = state.theme.activeTheme;
|
|
|
|
// load fonts
|
|
FONTS[state.theme.interfaceFont].load();
|
|
MONOSPACE_FONTS[state.theme.monospaceFont].load();
|
|
|
|
for (const [key, value] of Object.entries({
|
|
// create unset variables to indicate where colours need replacing
|
|
...Object.keys(legacyThemeUnsetShim().colours).reduce(
|
|
(d, k) => ({
|
|
...d,
|
|
[`--colours-${k}`]: k.includes("background")
|
|
? "var(--unset-bg)"
|
|
: "var(--unset-fg)",
|
|
}),
|
|
{},
|
|
),
|
|
// mount Stoat for Web variables
|
|
...createStoatWebVariables(activeTheme),
|
|
// mount --md-sys-color variables
|
|
...createMaterialColourVariables(activeTheme, "--md-sys-color-"),
|
|
// mount --mdui-color triplet variables
|
|
...createMduiColourTriplets(activeTheme, "--mdui-color-"),
|
|
})) {
|
|
document.body.style.setProperty(key, value);
|
|
}
|
|
});
|
|
|
|
return <Masks />;
|
|
}
|