ratty-blush•13mo ago

Dark Mode Constants?

Hi! I have some cards with custom background colors. I wanted to change them alongside a darkmode toggle; what's the easiest way I could go about this? i.e, is there background constants i can use?

6 Replies

kapa.ai•13mo ago

Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To implement a dark mode toggle in your application, you can use context to manage the theme state. This can be done by creating a context that holds the current theme state and a function to toggle it. Here's an example of how you can create such a context:

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>  
 );  
};

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>  
 );  
};

(Source: Refine Docs (https://refine.dev/docs/api-reference/mui/theming)) In your components, you can use the useContext hook to access the current theme and apply different styles based on the theme. For example, you can have different background colors for your cards based on the current theme. Unfortunately, the extracts do not provide specific information on background constants you can use. However, you can define these constants in your theme and use them in your components. Remember to wrap your application with the ColorModeContextProvider in your main component (usually App.tsx) to provide the context to all components in your application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

ratty-blush•13mo ago

@kapa.ai If i want to change the color of a component based on whether the app is in dark mode, how can I do that in Ant Design?

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To change the color of a component based on whether the app is in dark mode in Ant Design, you can use the ConfigProvider component to change the theme. You can also use RefineThemes provided by refine. Here's an example of how you can use ConfigProvider to customize the theme:

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2 } from "@refinedev/antd";  
import { ConfigProvider } from "antd";  
  
const App: React.FC = () => {  
 return (  
 <ConfigProvider  
 theme={{  
 components: {  
 Button: {  
 borderRadius: 0,  
 },  
 Typography: {  
 colorTextHeading: "#1890ff",  
 },  
 },  
 token: {  
 colorPrimary: "#f0f",  
 },  
 }}  
 >  
 <Refine  
 /* ... */  
 >  
 <ThemedLayoutV2>{/* ... */}</ThemedLayoutV2>  
 </Refine>  
 </ConfigProvider>  
 );  
};

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2 } from "@refinedev/antd";  
import { ConfigProvider } from "antd";  
  
const App: React.FC = () => {  
 return (  
 <ConfigProvider  
 theme={{  
 components: {  
 Button: {  
 borderRadius: 0,  
 },  
 Typography: {  
 colorTextHeading: "#1890ff",  
 },  
 },  
 token: {  
 colorPrimary: "#f0f",  
 },  
 }}  
 >  
 <Refine  
 /* ... */  
 >  
 <ThemedLayoutV2>{/* ... */}</ThemedLayoutV2>  
 </Refine>  
 </ConfigProvider>  
 );  
};

(Source: Refine Docs (https://refine.dev/docs/api-reference/antd/theming)) In this example, the ConfigProvider component is used to customize the theme. The theme prop is an object that defines the styles for different components and tokens. You can customize this object to change the styles based on whether the app is in dark mode. You can also use predefined themes from RefineThemes:

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, RefineThemes } from "@refinedev/antd";  
import { ConfigProvider } from "antd";  
  
const App: React.FC = () => {  
 return (  
 <ConfigProvider theme={RefineThemes.Blue}>  
 <Refine  
 /* ... */  
 >  
 <ThemedLayoutV2>{/* ... */}</ThemedLayoutV2>  
 </Refine>  
 </ConfigProvider>  
 );  
};

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, RefineThemes } from "@refinedev/antd";  
import { ConfigProvider } from "antd";  
  
const App: React.FC = () => {  
 return (  
 <ConfigProvider theme={RefineThemes.Blue}>  
 <Refine  
 /* ... */  
 >  
 <ThemedLayoutV2>{/* ... */}</ThemedLayoutV2>  
 </Refine>  
 </ConfigProvider>  
 );  
};

(Source: Refine Docs (https://refine.dev/docs/api-reference/antd/theming)) In this example, the Blue theme from RefineThemes is used. You can switch between different themes from RefineThemes based on whether the app is in dark mode. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

ratty-blush•13mo ago

it was the react hook useContext(ColorModeContext).