_base_themes.scss

@import 'settings';

@mixin vf-theme-light {
  --vf-theme-light: var(--vf-FLAG-ON);
  --vf-theme-dark: var(--vf-FLAG-OFF);
  @include vf-theme-light--colors;
}

@mixin vf-theme-dark {
  --vf-theme-light: var(--vf-FLAG-OFF);
  --vf-theme-dark: var(--vf-FLAG-ON);
  @include vf-theme-dark--colors;
}

@mixin vf-theme-paper {
  // we treat the paper theme as a light theme
  --vf-theme-light: var(--vf-FLAG-ON);
  --vf-theme-dark: var(--vf-FLAG-OFF);
  @include vf-theme-paper--colors;
}

// Color themes
@mixin vf-b-themes {
  @at-root {
    :root {
      // based on:
      // https://lea.verou.me/blog/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/
      --vf-FLAG-ON: initial;
      --vf-FLAG-OFF: ;
    }

    :root,
    .is-light {
      @include vf-theme-light;
    }

    .is-dark {
      @include vf-theme-dark;
    }

    .is-paper {
      @include vf-theme-paper;
    }
  }
}

// based on:
// https://lea.verou.me/blog/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/
// https://lea.verou.me/blog/2021/10/custom-properties-with-defaults/
@mixin vf-themed-property($property, $light-value, $dark-value) {
  #{$property}: var(--vf-theme-light, #{$light-value}) var(--vf-theme-dark, #{$dark-value});
}