نوٹ: یہ ٹیوٹوریل CSS-in-JS اسٹائلنگ اپروچ استعمال کرنے والے ڈویلپرز کے لیے متعلقہ ہے، جیسے Emotion.js، Material UI، وغیرہ۔
مرحلہ 1: فی الحال منتخب کردہ تھیم کے نام کے لیے Recoil ایٹم کا استعمال کریں۔
import { PaletteMode } from "@mui/material";
import { atom } from "recoil"; export const ThemeName = atom<PaletteMode>({ key: "ThemeName", effects: []
});
مرحلہ 2: فی الحال منتخب کردہ تھیم آبجیکٹ کے لیے Recoil سلیکٹر استعمال کریں۔
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
ٹاپ لیول ری ایکٹ جزو تک
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 ری ایکٹ سٹارٹر کٹ
وسائل
- SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
- پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
- ماخذ: https://www.codementor.io/koistya/how-to-implement-ui-theme-switching-dark-mode-with-react-and-recoil-1vvjynmi1e
سے زیادہ Codementor React Fact
میرے ملٹی کرایہ دار "boardengine.io" پر 6 جاب بورڈز چل رہے ہیں
ماخذ نوڈ: 1782299
ٹائم اسٹیمپ: جولائی 25، 2022
میں نے React اور Rust کا استعمال کرتے ہوئے فوکس ایپ کیسے بنائی
ماخذ نوڈ: 2033925
ٹائم اسٹیمپ: مارچ 27، 2023
React Hooks اور ہیڈ لیس CMS کا استعمال کرتے ہوئے ڈیٹا کو تلاش اور فلٹر کریں۔
ماخذ نوڈ: 1780725
ٹائم اسٹیمپ: اگست 4، 2022
کیوں ڈویلپرز کو خود کو ایک ہی فریم ورک کے لیے وقف نہیں کرنا چاہیے۔
ماخذ نوڈ: 1867236
ٹائم اسٹیمپ: جنوری 4، 2023
یادداشت کے ساتھ رد عمل کی کارکردگی کو بڑھانا: ایک سادہ مثال | کوڈ مینٹر
ماخذ نوڈ: 2157121
ٹائم اسٹیمپ: جولائی 3، 2023