Skip to content

Raising Dark Mode Elevation
Compare
Choose a tag to compare
@mlaursen mlaursen released this 12 Jul 01:26
v2.1.0
f7581c6

Raising Dark Mode Elevation

This release is targeted towards creating a better dark mode theme by implementing the full dark theme specs from material design. Just in case this page disappears in the future, basically the idea is to use a base dark background color (#121212) and apply a white overlay with specific opacities depending on the current elevation.

To ensure backwards compatibility, the new dark theme will need to be opted-in by setting the new variable $rmd-theme-dark-elevation: true;. You can also check out the all elevations demo with the dark theme enabled on the documentation site to see how this all works.

Current Dark Theme

home_dark_theme
menu_dark_theme

Improved Dark Theme with Elevation

home_elevated_dark_theme
menu_elevated_dark_theme

Bug Fixes

  • AppBar text color now defaults to rmd-theme-var(text-primary-on-background) (2c3ea5e)
  • Booleans in dist/scssVariables (f6d43a3)
  • ListItem disabled states (7b37292)
  • Scroll active element into view while focusing (a9a0902)
  • Tree focused index after expanding all with asterisk (8547629)
  • Tree keyboard movement for child items that are expanded (fadddc7)
  • Tree scrolling elements into view (eef48dc)

Features

  • Added new mixin for optional css-modules (28ba828)
  • Exported the useAutoComplete hook (cac5cd1)
  • Improved Dark Mode using Raising Elevation (547877c), closes #860
  • Render non-searchable items in AutoComplete (e7a82ac)
Assets 2
Loading