Here is the scenario with code-snippets. But before the problem statement:
- Have a ReactJS app that uses Chakra-UI components2
- Set the app to use “light” mode as opposed to dark mode or system mode
- Create a menu component on a page
- The menu does not display on the page properly.
Output:
The app is configured properly. Here is some code snippets:
theme.jsx, config object:
const theme = extendTheme({
config: {
initialColorMode: "light", // 'dark' | 'light'
useSystemColorMode: false,
},
}
The component that displays the menu button
import {
Button,
IconButton,
Menu,
MenuButton,
MenuItem,
MenuList,
} from "@chakra-ui/react";
import styled from "styled-components";
import { CiSettings } from "react-icons/ci";
function BookActionButtons({ book }) {
return (
<Wrapper className="book-action-buttons">
<Button
colorScheme="blue"
sx={{ py: "0.25rem", px: "0.5rem", fontSize: "0.875rem" }}
height={"2rem"}
>
<span>View</span>
</Button>
<Menu colorScheme="gray">
<MenuButton
as={IconButton}
aria-label="Additional options"
icon={<CiSettings />}
></MenuButton>
<MenuList>
<MenuItem>Archive</MenuItem>
<MenuItem>Delete</MenuItem>
</MenuList>
</Menu>
</Wrapper>
);
}
const Wrapper = styled.div`
display: flex;
flex-direction: row;
justify-content: flex-end;
`;
export default BookActionButtons;
The root cause of the problem was this injection by Brave (Well I suppose it is from Brave browser). The browser injects this to the main html file:
<html lang="en" data-theme="dark" style="color-scheme: dark;">
This is because my Brave browser has color mode adjusted to my MacOS settings.
Solution:
I have to remove the injected code within React with this useEffect()
useEffect(() => {
// Remove dark-related features when the component mounts
document.documentElement.setAttribute("data-theme", "light");
// Clean up the attribute when the component unmounts (optional)
return () => {
document.documentElement.removeAttribute("data-theme");
};
}, []);
With the help of this additional code above, I can make my application work.
Thank you!