4

I am writing an application in react and need a way to switch between dark mode and light mode. I could not find any document within blueprintjs docs which mentions how to change theme of all child components with some parent prop configuration.

Ajeet Shah
  • 18,551
  • 8
  • 57
  • 87
ajaykumar
  • 646
  • 7
  • 17
  • You can manage multiple themes using "CSS Variables". I have published a ReactJS template [cra-template-rich](https://github.com/ajeetshah/cra-template-rich#cra-template-rich). It has "dark / light" theming based on CSS variables. You can check that for example code of "how to do that". (PS: this comment has nothing to do with [tag:blueprintjs]). – Ajeet Shah Mar 17 '21 at 08:40

1 Answers1

1

Use class name .bp3-dark in your root container like below.

Blueprint provides two UI color themes: light and dark. The light theme is active by default. The dark theme can be applied by adding the class bp3-dark to a container element to theme all nested elements.

import React from 'react';

import {Navigation} from "./Navigation";
import Main from "./Main";

const App = () => (
    <div className="bp3-dark">
      <Navigation />
      <Main />
    </div>
  );

export default App;
Mohsin Raza
  • 488
  • 1
  • 6
  • 12
  • Isn't there some `auto` option omg? I don't want to set this by js client-side, this will lead to flickering. This classname should be set by either server, from user preferences, and automatically determined from css for new users WITHOUT JS, – to get away from flickering. Github Primer CSS has this feature, how come Blueprint doesn't have this? – Jerry Green Dec 28 '22 at 19:12
  • You can use browser cookies and can save this in user settings in the database as well and load it from the server side once the react app loads first time. – Mohsin Raza Dec 30 '22 at 11:34
  • It’s not about user settings, it’s about any common user. Think, non signed-in – Jerry Green Dec 31 '22 at 14:05