Dark mode issue with ReactJS app development (feat. Chakra-UI)

Here is the scenario with code-snippets. But before the problem statement:

  1. Have a ReactJS app that uses Chakra-UI components2
  2. Set the app to use “light” mode as opposed to dark mode or system mode
  3. Create a menu component on a page
  4. The menu does not display on the page properly.


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 {
} from "@chakra-ui/react";
import styled from "styled-components";
import { CiSettings } from "react-icons/ci";

function BookActionButtons({ book }) {
  return (
    <Wrapper className="book-action-buttons">
        sx={{ py: "0.25rem", px: "0.5rem", fontSize: "0.875rem" }}

      <Menu colorScheme="gray">
          aria-label="Additional options"
          icon={<CiSettings />}


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.

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 () => {
  }, []);

With the help of this additional code above, I can make my application work.

Thank you!

Actually my bad.

It seems the browser still injects the attributes. So my problem remains.

Chrome doesn’t have this issue. Just so you know


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.