Allow using media queries for dark theme

mohsen1 commented 4 years ago

Environment

Package version(s): 3.28.1
Browser and OS versions: Chrome

Feature request

Using class names on body is an easy way of switching between themes but it is not compatible with web standards. Specially in server rendered apps.

I'm suggesting taking out all of the .bp3-dark *** css rules into a separate CSS file so it is easier to override using media queries. benefit of this is that the dark CSS works without a flash unlike when using localStorage.

Examples

 <link href="@blueprintjs/core/lib/css/blueprint.css" rel="stylesheet" />
 <link href="@blueprintjs/core/lib/css/blueprint-dark.css"
       media="screen and (prefers-color-scheme: dark)"
       rel="stylesheet" />

barkermn01 commented 4 years ago

I'm curious what makes you say "but it is not compatible with web standards" because you allow classes and multiple class values for the class Attribute in HTML, and as such was explicitly supported in HTML5 with the addition of classList support. should not matter if it's a server-side.

mohsen1 commented 4 years ago

What I mean is that the server has no idea if client prefers dark mode or not when it is invoking JavaScript to render the HTML response string

palantir / blueprint