conscious-sapphire•6mo ago

Dark mode

Hello devs, hope you all have great day. i have read the documents about switching dark theme but i could not make that button work . and the document is somehow confusing.

2 Replies

kapa.ai•6mo ago

Hi @PartialTruss. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hello! I hope you're having a great day too. Let's walk through how to implement a dark mode toggle in your application using Refine with Material-UI. Step-by-Step Guide to Implement Dark Mode Toggle 1. Create a Context for Color Mode: First, you need to create a context to manage the color mode state. Here is the code for ColorModeContext:

   // src/contexts/index.tsx
   import React, { PropsWithChildren, createContext, useEffect, useState } from "react";
   import { ThemeProvider } from "@mui/material";
   import { RefineThemes } from "@refinedev/mui";

   type ColorModeContextType = {
     mode: string;
     setMode: () => void;
   };

   export const ColorModeContext = createContext<ColorModeContextType>(
     {} as ColorModeContextType,
   );

   export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({ children }) => {
     const colorModeFromLocalStorage = localStorage.getItem("colorMode");
     const isSystemPreferenceDark = window?.matchMedia(
       "(prefers-color-scheme: dark)",
     ).matches;

     const systemPreference = isSystemPreferenceDark ? "dark" : "light";
     const [mode, setMode] = useState(
       colorModeFromLocalStorage || systemPreference,
     );

     useEffect(() => {
       window.localStorage.setItem("colorMode", mode);
     }, [mode]);

     const setColorMode = () => {
       if (mode === "light") {
         setMode("dark");
       } else {
         setMode("light");
       }
     };

     return (
       <ColorModeContext.Provider
         value={{
           setMode: setColorMode,
           mode,
         }}
       >
         <ThemeProvider
           theme={mode === "light" ? RefineThemes.Blue : RefineThemes.BlueDark}
         >
           {children}
         </ThemeProvider>
       </ColorModeContext.Provider>
     );
   };

   // src/contexts/index.tsx
   import React, { PropsWithChildren, createContext, useEffect, useState } from "react";
   import { ThemeProvider } from "@mui/material";
   import { RefineThemes } from "@refinedev/mui";

   type ColorModeContextType = {
     mode: string;
     setMode: () => void;
   };

   export const ColorModeContext = createContext<ColorModeContextType>(
     {} as ColorModeContextType,
   );

   export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({ children }) => {
     const colorModeFromLocalStorage = localStorage.getItem("colorMode");
     const isSystemPreferenceDark = window?.matchMedia(
       "(prefers-color-scheme: dark)",
     ).matches;

     const systemPreference = isSystemPreferenceDark ? "dark" : "light";
     const [mode, setMode] = useState(
       colorModeFromLocalStorage || systemPreference,
     );

     useEffect(() => {
       window.localStorage.setItem("colorMode", mode);
     }, [mode]);

     const setColorMode = () => {
       if (mode === "light") {
         setMode("dark");
       } else {
         setMode("light");
       }
     };

     return (
       <ColorModeContext.Provider
         value={{
           setMode: setColorMode,
           mode,
         }}
       >
         <ThemeProvider
           theme={mode === "light" ? RefineThemes.Blue : RefineThemes.BlueDark}
         >
           {children}
         </ThemeProvider>
       </ColorModeContext.Provider>
     );
   };

2. Create the Header Component with Toggle Button: Next, create a header component that includes a button to toggle the dark mode: ```tsx // src/App.tsx import { Refine } from "@refinedev/core"; import { ThemedLayoutV2, ErrorComponent, RefineSnackbarProvider, useNotificationProvider } from "@refinedev/mui"; import { CssBaseline, AppBar, IconButton, Box, Stack } from "@mui/material"; import dataProvider from "@refinedev/simple-rest"; import routerProvider from "@refinedev/react-router-v6"; import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom"; import { LightModeOutlined, DarkModeOutlined } from "@mui/icons-material"; import { SampleList, SampleCreate, SampleEdit, SampleShow } from "pages/samples"; import { ColorModeContextProvider, ColorModeContext } from "./contexts"; import { useContext } from "react"; const Header = () => { const { mode, setMode } = useContext(ColorModeContext); return ( <AppBar color="default" position="sticky"> <Stack width="100%" direction="row" justifyContent="end"> <Box marginRight="20px"> <IconButton onClick={() => { setMode(); }} > {mode === "dark" ? <LightModeOutlined /> : <DarkModeOutlined />} </IconButton> </Box> </Stack> </AppBar> ); }; const App: ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@1133657808076808223> kapa.ai is still learning and improving, please let us know how it did by reacting below

Dark mode

Did you find this page helpful?