mlaursen/react-md

Dark theme elevation feature overrides custom background colors

Closed this issue · 2 comments

rafaelbrier commented

The SASS variable of some components are being overridden when using dark Theme.
image

  1. Look, the image shows a style ".dark-theme .rmd-toast" where the variable "--rmd-theme-background" are being set again for some reason.

  2. Below at the class ".dark-theme" i globally defined that variable.

  3. The code that i use for theme switch:

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

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

// Class for global theme change
.dark-theme {
    @include rmd-theme-dark;
}

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

What is the expected behavior?

The variable should not be overridden in the dark theme.

A little about versions:
Windows
Chrome
"react-md": "^2.5.3"

mlaursen commented

Whoops, this was an unintended side-effect of using @mixin rmd-theme-dark-elevation-styles and @mixin rmd-theme-dark-elevation to implement the dark elevation styles. I'll introduce new SCSS variables to help solve this as well as reduce the specificity for the dark elevation styles.

This bug current affects:

  • @react-md/alert
  • @react-md/card
  • @react-md/dialog
  • @react-md/form (temporary Listbox only)
  • @react-md/menu
  • @react-md/sheet
rafaelbrier commented

Thank you for the clarification! I'll disable the dark elevation for now.