Better Light and Dark Theme Support and prefers-color-scheme

[mlaursen]

Background

There is currently some documentation about how to dynamically create your theme, but it would honestly be great if this was built into react-md as a feature flag especially since I started implementing it with #860.

I think there is some package that provides react hooks for this so I can look into that a bit and see if it'll tie into react-md. However, I did start a WIP branch for this feature as wip/support-theme-toggling.

Wanted Functionality

• allow the theme to automatically be determined by the prefers-color-scheme media query
• allow the theme to forcefully be set to light or dark (rmd-theme-light and rmd-theme-dark allow this, but also to create classes)
• maybe provide new hooks and components to change this behavior

Current Implementation for Prefers Color Scheme (untested)

This is a quick example of how you can implement the prefers-color-scheme version of the themes and still allowing the user to override that preference.

$rmd-theme-dark-class: 'prefers-color-scheme';

// generate all react-md styles with the custom theme
@import 'react-md/dist/styles';

@media (prefers-color-scheme: dark) {
  :root {
    @include rmd-theme-dark;
  }
}

.light-theme {
  @include rmd-theme-light;
}

.dark-theme {
  @include rmd-theme-light;
}