Mentioning dark theme in the docs

[alfawal]

Feature request

New tab in the docs to mention .bp3-dark.

[adidahiya]

Right now there is a section under Typography which talks about dark theme, a theme switcher near the top of the navigation, and a few search results in the docs search. But I suppose it makes sense to add a dark theme section to the Colors page.

[evansjohnson]

I searched for why my Dialog was not receiving dark theme styling like other components and didn't find anything in the docs. A team member pointed out that the Classes.DARK class needs to be added to the Dialog separately because it is rendered in a portal (at least by default).

It looks like the Popover components detect and add the class by default, perhaps the same behavior should happen for the rest of the overlay components! Without that, a simple page linked under the theme toggle explaining some of the intricacies of using dark mode with various components would be helpful! 😄

[adidahiya]

The dialog dark theme inheritance question has come up a few times. I filed this FR: https://github.com/palantir/blueprint/issues/4802

[jgresham]

My related comment on another PR: https://github.com/palantir/blueprint/issues/3066#issuecomment-978021947

I'd really like to use the dark theme, but I am confused on how to get it done. I think this works. Could there be straightforward steps added to the docs https://blueprintjs.com/docs/#core/typography.dark-theme ? Something like:

App.js

import { Classes } from "@blueprintjs/core";
...
<div className={"App "+ Classes.DARK}>
    <child-elements-given-dark-theme></child-elements-given-dark-theme>
</div>

index.scss

...
@import "~@blueprintjs/core/src/common/variables";

$dark-content-background-color: $dark-gray4;

.App {
	&.#{$ns}-dark {
		background-color: $dark-content-background-color;
	}
}
...