check out how it works visit [here](https://snippets.brian.style/?path=/story/example-header--switch-theme).

var.scss

this file will import in every scss file with vite config

```sass

@import './function';
@import './mixin';

```

function.scss

```sass
@use 'sass:math';
@use 'sass:color';

@function theme-selector($theme, $scope) {
  @if ($scope) {
    @return selector-nest($theme, $scope);
  } @else {
    @return $theme;
  }
}

@function rgb-string($color) {
  @return color.red($color), color.green($color), color.blue($color);
}

@function use-rgb($name: primary, $level: none) {
  @if $level != none {
    @return rgb(var(#{string.slice('#{$name}', 1, 1)}-#{$level}));
  }
  @return rgb(var(#{$name}));
}

@function use-rgba($name, $opacity) {
  @return rgba(var(#{$name}), $opacity);
}

```

function.scss

```sass
@use 'sass:math';
@use 'sass:color';

@function theme-selector($theme, $scope) {
  @if ($scope) {
    @return selector-nest($theme, $scope);
  } @else {
    @return $theme;
  }
}

@function rgb-string($color) {
  @return color.red($color), color.green($color), color.blue($color);
}

@function use-rgb($name: primary, $level: none) {
  @if $level != none {
    @return rgb(var(#{string.slice('#{$name}', 1, 1)}-#{$level}));
  }
  @return rgb(var(#{$name}));
}

@function use-rgba($name, $opacity) {
  @return rgba(var(#{$name}), $opacity);
}

```

theme.scss

this file will import in root page

```sass

@mixin dark-mode {
  color-scheme: dark;
  --color-n-1: #{rgb-string(#ffffff)};
  --color-n-2: #{rgb-string(#e8e8e8)};
  --color-n-3: #{rgb-string(#D9D9D9)};
  --color-n-4: #{rgb-string(#b9b9b9)};
  --color-n-5: #{rgb-string(#AAAAAA)};
  --color-n-6: #{rgb-string(#8b8b8b)};
  --color-n-7: #{rgb-string(#747474)};
  --color-n-8: #{rgb-string(#5d5d5d)};
  --color-n-9: #{rgb-string(#3C3C3C)};
  --color-n-10: #{rgb-string(#242424)};
  --color-n-11: #{rgb-string(#1C1C1C)};
  --color-n-12: #{rgb-string(#000000)};
}

@mixin light-mode {
  color-scheme: light;
  --color-n-1: #{rgb-string(#000000)};
  --color-n-2: #{rgb-string(#1C1C1C)};
  --color-n-3: #{rgb-string(#242424)};
  --color-n-4: #{rgb-string(#3C3C3C)};
  --color-n-5: #{rgb-string(#5d5d5d)};
  --color-n-6: #{rgb-string(#747474)};
  --color-n-7: #{rgb-string(#8b8b8b)};
  --color-n-8: #{rgb-string(#AAAAAA)};
  --color-n-9: #{rgb-string(#b9b9b9)};
  --color-n-10: #{rgb-string(#D9D9D9)};
  --color-n-11: #{rgb-string(#e8e8e8)};
  --color-n-12: #{rgb-string(#ffffff)};
}

@include theme-light {
  @include light-mode;
}

@include theme-dark {
  @include dark-mode;
}

html, body {
  color: var(--color-n-2);
}

```


Brian

Design Theme