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.

Unable to set default color mode

See original GitHub issue

🐛 Bug report

Unable to force color mode to dark using theme.

💥 Steps to reproduce

  1. Open this codesandbox
  2. See that the components are in light mode. Expected them to be in dark mode due to configuration of ColorModeScript and extendTheme

💻 Link to reproduction

Codesandbox reproduction

🧐 Expected behavior

Expect components to be in dark mode

🧭 Possible Solution

Not sure.

🌍 System information

Software Version(s)
Chakra UI 1.0.3
Browser Chrome Latest (Chromium: 87.0.4280.101)
Operating System Linux x64

📝 Additional information


Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

ljosberinncommented, Dec 22, 2020

In your sandbox youre not nesting the config property, but just adding useSystemColorMode etc to the top level, which doesn’t work.


Nesting it within config works as expected.

TimKolbergercommented, Dec 22, 2020

Can you share a link to the incorrect example? At is a valid example listed:

// 1. import `ChakraProvider` component and `extendTheme`
import { extendTheme, ChakraProvider } from "@chakra-ui/react"

// 2. declare your configuration, these are the defaults
const config = {
  useSystemColorMode: false,
  initialColorMode: "light",

// 3. extend the theme
const customTheme = extendTheme({ config })

function App() {
  return (
    // 4. pass to `ChakraProvider` as usual
    <ChakraProvider theme={customTheme}>

The extendTheme function allows adding properties to the theme. It extends the theme - so every property in the default theme should be present plus any additional values you want.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Not able to change default app mode (Settings
Hello, Try these steps: 1. Press Windows + R and put regedit in Run dialog box to open Registry Editor. ... 3. At...
Read more >
Photoshop 2022: Can't change default color profile for new ...
I want to change this to ensure that sRGB is default. Before you ask, I have changed the working space to sRGB. Here's...
Read more >
how to set default color mode in indesign?
For a Print document, the default is CMYK which is appropriate. For Web or Mobile document which is to be viewed on-screen, the...
Read more >
How to restore default Display Color settings in Windows 10
Your browser can't play this video. ... 1] Set Colour Management Settings to Default 2] Set Graphics Properties to Default 3] Use NVIDIA ......
Read more >
Windows 10: How to change default app mode to dark theme ...
SUBSCRIBE for more: How to change default app mode to dark theme color in Windows 10 ...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found