Πώς να εφαρμόσετε την εναλλαγή θεμάτων διεπαφής χρήστη (σκοτεινή λειτουργία) με το React και το Recoil

ΣΗΜΕΙΩΣΗ: Αυτό το σεμινάριο είναι σχετικό με προγραμματιστές που χρησιμοποιούν μια προσέγγιση στυλ CSS-in-JS, π.χ. Emotion.js, Material UI, κ.λπ.

Βήμα 1: Χρησιμοποιήστε το άτομο ανάκρουσης για το όνομα του τρέχοντος επιλεγμένου θέματος

import { PaletteMode } from "@mui/material";
import { atom } from "recoil"; export const ThemeName = atom<PaletteMode>({ key: "ThemeName", effects: []
});

Βήμα 2: Χρησιμοποιήστε τον επιλογέα ανάκρουσης για το τρέχον επιλεγμένο αντικείμενο θέματος

import { createTheme } from "@mui/material";
import { selector } from "recoil"; export const Theme = selector({ key: "Theme", dangerouslyAllowMutability: true, get(ctx) { const name = ctx.get(ThemeName); return createTheme(); },
});

Βήμα 3: Προσθήκη useTheme(), useToggleTheme() Αντιδράστε τα άγκιστρα

import { useRecoilValue, useRecoilCallback } from "recoil"; export function useTheme() { return useRecoilValue(Theme);
} export function useToggleTheme() { return useRecoilCallback( (ctx) => () => { ctx.set(ThemeName, (prev) => (prev === "dark" ? "light" : "dark")); }, [] );
}

Βήμα 4: Αποθήκευση/επαναφορά του τρέχοντος επιλεγμένου ονόματος θέματος σε/από localStorage

export const ThemeName = atom<PaletteMode>({ key: "ThemeName", effects: [ (ctx) => { const storageKey = "theme"; if (ctx.trigger === "get") { const name: PaletteMode = localStorage?.getItem(storageKey) === "dark" ? "dark" : localStorage?.getItem(storageKey) === "light" ? "light" : matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"; ctx.setSelf(name); } ctx.onSet((value) => { localStorage?.setItem(storageKey, value); }); }, ],
});

Βήμα 5: Προσθήκη ThemeProvider στο στοιχείο React ανώτατου επιπέδου

import { ThemeProvider } from "@mui/material";
import { useTheme } from "../theme/index.js"; function App(): JSX.Element { const theme = useTheme(); return ( <ThemeProvider theme={theme}> {/* ... */} </Theme> );
}

Βλέπω app/theme/index.ts in React Starter Kit

Υποστηρικτικό υλικό