Dark Mode not working

Dark Mode not working when changing the theme color of the layout ?

2 Replies

Hi @George Mohsen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- If you're using Ant Design with Refine and your dark mode isn't working properly, it could be due to the migration from CSS to CSS-in-JS that occurred in Ant Design v4. This means you can't use CSS in Ant Design anymore. You can read more about this in the migration guide (https://refine.dev/docs/api-reference/antd/migration-guide/v4-to-v5/#updating-the-packages). To use dark mode with Ant Design, you can follow the instructions provided in the theming documentation (https://refine.dev/docs/api-reference/antd/theming/#use-preset-algorithms). If you're using Chakra UI, you can implement dark mode by using the useColorMode hook and useColorModeValue function. Here's an example of how to use them:

import {  
 Box,  
 Button,  
 Text,  
 useColorMode,  
 useColorModeValue,  
} from "@chakra-ui/react";  
  
export const DarkModeToggleComp = () => {  
 const { colorMode, toggleColorMode } = useColorMode();  
  
 const bgValue = useColorModeValue("brand.green100", "brand.dark100");  
 const colorValue = useColorModeValue("brand.dark100", "brand.green100");  
  
 return (  
 <Box mt="5rem">  
 <Text p="2rem" bg={bgValue} fontSize="2rem" color={colorValue}>  
 6. Dark Mode Toggle Component  
 </Text>  
 <Box p="2rem" bg={bgValue}>  
 <Text color={colorValue}>Change my color please :)</Text>  
 </Box>  
 <Button  
 mt="1rem"  
 fontSize="1.5rem"  
 py="1.8rem"  
 bg={bgValue}  
 color={colorValue}  
 onClick={toggleColorMode}  
 >  
 Toggle {colorMode === "light" ? "Dark" : "Light"}  
 </Button>  
 </Box>  
 );  
};

import {  
 Box,  
 Button,  
 Text,  
 useColorMode,  
 useColorModeValue,  
} from "@chakra-ui/react";  
  
export const DarkModeToggleComp = () => {  
 const { colorMode, toggleColorMode } = useColorMode();  
  
 const bgValue = useColorModeValue("brand.green100", "brand.dark100");  
 const colorValue = useColorModeValue("brand.dark100", "brand.green100");  
  
 return (  
 <Box mt="5rem">  
 <Text p="2rem" bg={bgValue} fontSize="2rem" color={colorValue}>  
 6. Dark Mode Toggle Component  
 </Text>  
 <Box p="2rem" bg={bgValue}>  
 <Text color={colorValue}>Change my color please :)</Text>  
 </Box>  
 <Button  
 mt="1rem"  
 fontSize="1.5rem"  
 py="1.8rem"  
 bg={bgValue}  
 color={colorValue}  
 onClick={toggleColorMode}  
 >  
 Toggle {colorMode === "light" ? "Dark" : "Light"}  
 </Button>  
 </Box>  
 );  
};

This code creates a component that toggles between light and dark mode when clicked. The useColorMode hook is used to get the current color mode and a function to toggle it. The useColorModeValue function is used to set different values for different color modes. If you're using Mantine, you can refer to the Mantine dark theme documentation (https://mantine.dev/guides/dark-theme) for more information on how to implement dark mode. If none of these solutions work, it might be a good idea to ask for help in the Refine Discord server (https://discord.com/channels/837692625737613362/1161028269395673198) or open an issue in the Refine GitHub repository (https://github.com/refinedev/refine/issues). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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