Anki/sass/_vars.scss

/* Copyright: Ankitects Pty Ltd and contributors
 * License: GNU AGPL, version 3 or later, http://www.gnu.org/licenses/agpl.html */

@use "colors" as *;

@function get($map, $keys...) {
    @each $key in $keys {
        $map: map-get($map, $key);
    }
    @return $map;
}

$vars: (
    props: (
        border-radius-default: 5px,
    ),
    themes: (
        light: (
            text-fg: get($color, gray, 9),
            window-bg: get($color, gray, 1),
            frame-bg: get($color, gray, 0),
            border: get($color, gray, 3),
            faint-border: get($color, gray, 2),
            link: get($color, blue, 9),
            review-count: #0a0,
            new-count: get($color, blue, 9),
            learn-count: get($color, orange, 7),
            zero-count: get($color, gray, 2),
            slightly-grey-text: get($color, gray, 7),
            highlight-bg: get($color, cyan, 2),
            highlight-fg: black,
            disabled: get($color, gray, 5),
            card-view-bg: get($color, blue, 5),
            note-view-bg: get($color, green, 5),
            flag1-fg: get($color, red, 6),
            flag2-fg: get($color, orange, 5),
            flag3-fg: get($color, green, 5),
            flag4-fg: get($color, blue, 5),
            flag5-fg: get($color, fuchsia, 4),
            flag6-fg: get($color, teal, 5),
            flag7-fg: get($color, purple, 6),
            flag1-bg: get($color, red, 5),
            flag2-bg: get($color, orange, 3),
            flag3-bg: get($color, green, 3),
            flag4-bg: get($color, blue, 3),
            flag5-bg: get($color, fuchsia, 2),
            flag6-bg: get($color, teal, 4),
            flag7-bg: get($color, purple, 4),
            buried-fg: get($color, amber, 5),
            suspended-fg: get($color, yellow, 4),
            suspended-bg: get($color, yellow, 1),
            marked-bg: get($color, indigo, 2),
            tooltip-bg: get($color, gray, 0),
            focus-border: get($color, indigo, 6),
        ),
        dark: (
            text-fg: get($color, gray, 0),
            window-bg: get($color, gray, 6),
            frame-bg: get($color, gray, 7),
            border: get($color, gray, 5),
            faint-border: get($color, gray, 8),
            link: get($color, blue, 2),
            review-count: get($color, green, 4),
            new-count: get($color, blue, 2),
            learn-count: get($color, red, 4),
            zero-count: get($color, gray, 7),
            slightly-grey-text: get($color, gray, 4),
            highlight-bg: get($color, cyan, 2),
            highlight-fg: white,
            disabled: get($color, gray, 6),
            card-view-bg: get($color, blue, 4),
            note-view-bg: get($color, green, 4),
            flag1-fg: get($color, red, 4),
            flag2-fg: get($color, orange, 4),
            flag3-fg: get($color, green, 4),
            flag4-fg: get($color, blue, 4),
            flag5-fg: get($color, fuchsia, 3),
            flag6-fg: get($color, teal, 4),
            flag7-fg: get($color, purple, 5),
            flag1-bg: get($color, red, 6),
            flag2-bg: get($color, orange, 5),
            flag3-bg: get($color, green, 5),
            flag4-bg: get($color, blue, 5),
            flag5-bg: get($color, fuchsia, 5),
            flag6-bg: get($color, teal, 5),
            flag7-bg: get($color, purple, 7),
            buried-fg: get($color, amber, 8),
            suspended-fg: get($color, yellow, 1),
            suspended-bg: get($color, yellow, 5),
            marked-bg: get($color, purple, 5),
            tooltip-bg: get($color, gray, 8),
            focus-border: get($color, indigo, 5),
        ),
    ),
);

:root {
    @each $name, $value in get($vars, themes, light) {
        --#{$name}: #{$value};
    }
    &.night-mode {
        @each $name, $value in get($vars, themes, dark) {
            --#{$name}: #{$value};
        }
        color-scheme: dark;
    }
}

/* separate rule for cleaner dev tools appearance */
:root {
    @each $name, $value in get($vars, props) {
        --#{$name}: #{$value};
    }
}