// Allows CSS to be scoped to a specific color mode
@mixin color-mode($mode) {
  @if $mode == light {
    :root,
    [data-color-mode="light"] {
      @content;
    }

    [data-color-mode="auto"] {
      @media (prefers-color-scheme: light) {
        @content;
      }
    }
  }
  @else if $mode == dark {
    [data-color-mode="dark"] {
      @content;
    }

    [data-color-mode="auto"] {
      @media (prefers-color-scheme: dark) {
        @content;
      }
    }
  }
}

// Allows CSS to be scoped to a specific color mode
@mixin color-mode($mode) {
  @if $mode == light {
    :root,
    [data-color-mode="light"] {
      @content;
    }

    [data-color-mode="auto"] {
      @media (prefers-color-scheme: light) {
        @content;
      }
    }
  }
  @else if $mode == dark {
    [data-color-mode="dark"] {
      @content;
    }

    [data-color-mode="auto"] {
      @media (prefers-color-scheme: dark) {
        @content;
      }
    }
  }
}

@mixin color-mode-var($name, $light, $dark) {
  @include color-mode(light) {
    --color-#{$name}: #{$light};
  }

  @include color-mode(dark) {
    --color-#{$name}: #{$dark};
  }
}

Add mixin for defining CSS variables with color mode coverage
Add mixin for defining CSS variables with color mode coverage
