/**
 * DARK MODE MIXIN
 * 
 * A little wrapper that lets you define your dark mode custom 
 * properties in a way that supports the theme toggle web component
 */
@mixin dark-mode() {
  @media (prefers-color-scheme: dark) {
    :root {
      --color-mode: 'dark';
    }

    :root:not([data-user-color-scheme]) {
      @content;
    }
  }

  [data-user-color-scheme='dark'] {
    @content;
  }
}