Käyttötarkoitus
Käytä useMode-hookia KDS:n komponenttien ulkoasuteeman tilan (tumma/vaalea) tunnistamiseen ja vaihtamiseen.
Ominaisuudet
Oletuksena hook antaa tumman tilan CSS-luokan sovelluksen root-elementille (document.documentElement). Luokan voi halutessa asettaa toiseen elementtiin element-propin avulla. Käytetyn elementin tulee olla sama, jolle on annettu KDS-teeman CCS-luokka.
Mikäli sovellus tarvitsee tummaa tilaa varten myös oman räätälöidyn luokan, esimerkiksi käytössä olevaa laajennusta varten, voidaan sellainen asettaa additionalClassName-propin avulla.
Valitun tilan arvon tallentaminen onnistuu storeFn-funktion avulla.
Esimerkki
const modeDisplayName = {
dark: "tumma",
light: "vaalea",
system: "järjestelmän valinta",
};
const UseModeExample = () => {
const storedMode = localStorage.getItem("KDS_MODE");
const { mode, functionalMode, setMode } = useMode({
defaultMode: storedMode ?? "system",
storeFn: (currentMode) => localStorage.setItem("KDS_MODE", currentMode),
additionalClassName: "dark", // Tailwind dark mode css class
});
const currentSystemMode = window.matchMedia(`(prefers-color-scheme: dark)`).matches ? "dark" : "light";
return (
<>
<div className="kds-mb-4">
<div>Sovelluksen tila: {modeDisplayName[mode]}</div>
<div>Järjestelmän tila: {modeDisplayName[currentSystemMode]}</div>
</div>
<Button onClick={() => setMode("light")} disabled={mode === "light"}>
Aseta vaalea tila
</Button>
<br />
<Button onClick={() => setMode("dark")} className="kds-mt-2" disabled={mode === "dark"}>
Aseta tumma tila
</Button>
<br />
<Button onClick={() => setMode("system")} className="kds-mt-2" disabled={mode === "system"}>
Käytä järjestelmän tilaa
</Button>
</>
);
};
render(<UseModeExample />);