question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dark mode not set by default

See original GitHub issue

Description

Dark mode not set by default

Link to Reproduction

localhost

Steps to reproduce

Default - light. Why?

import {
  ChakraProvider,
  ColorModeScript,
  extendTheme,
  type ThemeConfig,
} from "@chakra-ui/react";

const configChakra: ThemeConfig = {
  useSystemColorMode: false,
  initialColorMode: "dark",
};

const theme = extendTheme(configChakra);

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
        <ChakraProvider theme={theme}>
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <App />
        </ChakraProvider>
  </React.StrictMode>
);

But toggle nice work to dark in App.tsx

const { colorMode, toggleColorMode } = useColorMode();

<Button onClick={toggleColorMode}>
  Toggle {colorMode === "light" ? "Dark" : "Light"}
</Button>

https://user-images.githubusercontent.com/98721968/186196498-cd966e4e-b603-44e9-ae02-442a32038a2f.mov

Chakra UI Version

2.2.3

Browser

Version 1.42.97 Chromium: 104.0.5112.102 (Official Build) (arm64)

Operating System

  • macOS
  • Windows
  • Linux

Additional Information

No response

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

7reactions
remiroyccommented, Sep 7, 2022

Same issue here

0reactions
anubra266commented, Sep 19, 2022

@alexbakers I can’t reproduce this. If issue persists, please feel free to reopen with a codesandbox reproduction

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why is dark mode not the default option? : r/UI_Design - Reddit
Dark mode is good for apps which are being used most frequently by users. For example, Reddit. It gives both the modes: dark...
Read more >
Sometimes I ask myself why dark theme isn't the default ...
Sometimes I ask myself why dark theme isn't the default setting on apps. I mean, light theme WRECKS YOUR EYES!!! How can the...
Read more >
Blackout: How to Enable Dark Mode on Your Browser | PCMag
Open the app and tap the three-dot menu, then select Settings > Theme. You can then choose Dark or System default, if dark...
Read more >
95% of People Prefer Dark over Light Mode - Hacker News
I personally like dark mode during night time, but almost always prefer light mode by default. There's just something about dark mode that ......
Read more >
Browse in Dark mode or Dark theme - Google Chrome Help
System Default if you want to use Chrome in Dark theme when Battery Saver mode is turned on or your mobile device is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found