@ulu/frontend/lib/scss/base/_themes.demo.html

A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules op

<!-- @ulu-demo
  title: Theme Switching
  description: Using the `theme-light` and `theme-dark` classes to change the visual context of a section.
-->
<div>
  <button class="button" data-ulu-theme-toggle='{ "target": "#theme-demo-box" }'>Toggle Theme</button>
  
  <div id="theme-demo-box" class="demo-theme-box theme-light padding">
    <h3 class="h3">Themed Content</h3>
    <p>This section changes its colors based on the applied theme class.</p>
    <button class="button">Themed Button</button>
  </div>
</div>

<!-- @ulu-demo
  title: Theme Inversion
  description: The `theme-inverse` utility automatically applies the opposite theme (e.g., dark inside light) based on the current context.
-->
<div class="demo-theme-box theme-light">
  <h3 class="h3">Light Context</h3>
  <div class="demo-theme-box theme-inverse padding margin-top">
    <p>This box is automatically inverted to the dark theme because its parent is light.</p>
    <button class="button">Inverted Button</button>
  </div>
</div>