Custom scheme with light theme inside dark theme, doesn't work.

[woelfners-miracles]

Hello,

unfortunately I found an issue, with nested custom color schemes in combination with themes.

Here is the HTML sample code:

<div class="mdui-custom-color-scheme-4278215076-0 mdui-theme-dark">
  <mdui-button>Dark</mdui-button>
  <div class="mdui-custom-color-scheme-4282746117-1 mdui-theme-light">
    <!-- 
    This container and button are supposed to have the light theme,
    but the dark theme is applied.
    -->
    <mdui-button>Light</mdui-button>
  </div>

  <div class="mdui-theme-light">
    <div class="mdui-custom-color-scheme-4282746117-2">
        <!-- Same problem occurs with a custom color scheme inside a light theme container -->
       <mdui-button>Light</mdui-button>
    </div>
  </div>
</div>

The reason I found:

<style id="mdui-custom-color-scheme-4282746117-1">
  .mdui-custom-color-scheme-4282746117-1 {
    // light theme styles
  }
  
  .mdui-theme-dark .mdui-custom-color-scheme-4282746117-1,
  .mdui-theme-dark.mdui-custom-color-scheme-4282746117-1 {
     // dark theme styles
     // the first selector is more specific, hence the styles are applied to the container,
     // even though it has the "mdui-theme-light" class.
  }
</style>

Do you need any more information or a sample project to reproduce the behavior?

I'm looking forward to hear from you!
And keep up the great work! The MDUI library is awesome and helps me a lot!

[swagliquido]

Hello, as a work around I think you can use the setTheme function:
www.mdui.org/en/docs/2/functions/setTheme

[woelfners-miracles]

Thanks for the fast reply, but I got the problem when using setTheme.

Here is a Stackblitz:
https://stackblitz.com/edit/vitejs-vite-chiah8ls?file=index.html