Dark mode not set by default
See original GitHub issueDescription
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>
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:
- Created a year ago
- Comments:5 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Same issue here
@alexbakers I can’t reproduce this. If issue persists, please feel free to reopen with a codesandbox reproduction