function to detect light mode

Viewed 20

If I am using the following mixins to set elements' styles for light and dark modes:

@mixin light() {
  @media (prefers-color-scheme: light) {
    @at-root #{selector-nest(':root:not([data-theme=light]):not([data-theme=dark])', &)} {
      @content;
    }
  }
  @at-root #{selector-nest(':root[data-theme=light]', &)} {
    @content;
  }
}

@mixin dark() {
  @media (prefers-color-scheme: dark) {
    @at-root #{selector-nest(':root:not([data-theme=light]):not([data-theme=dark])', &)} {
      @content;
    }
  }
  @at-root #{selector-nest(':root[data-theme=dark]', &)} {
    @content;
  }
}

Is there a @function is-light-mode() that I can use within an if statement? (this is mainly because I want to set palette colors in the :root itself).

0 Answers
Related