// Color modes

@import “../support/mixins/color-modes.scss”;

@import “@primer/primitives/dist/scss/colors/_light.scss”; @import “@primer/primitives/dist/scss/colors/_dark.scss”; @import “@primer/primitives/dist/scss/colors/_dark_dimmed.scss”;

// Outputs the CSS variables // Use :root (html element) to define a default

@include color-mode-theme(light, true) {

@include primer-colors-light;

}

@include color-mode-theme(dark) {

@include primer-colors-dark;

}

@include color-mode-theme(dark_dimmed) {

@include primer-colors-dark_dimmed;

}

// Color mode boundaries // Enables nesting of different color modes

data-color-mode

{

color: var(--color-text-primary);
background-color: var(--color-bg-canvas);

}

// color-scheme // Enables color modes for native elements

@include color-mode(light) { color-scheme: light; } @include color-mode(dark) { color-scheme: dark; }