zotero/scss/themes/_light.scss

@use 'sass:color';
@use "sass:map";

$-colors: (
    accent-azure: #66adff,
    accent-blue: #4072e5,
    accent-blue10: #4072e51a,
    accent-blue30: #4072e54d,
    accent-blue50: #4072e580,
    accent-gold: #cc9200,
    accent-green: #39bf68,
    accent-orange: #ff794c,
    accent-red: #db2c3a,
    accent-teal: #59adc4,
    accent-white: #fff,
    accent-wood-dark: #996b6f,
    accent-wood: #cc7a52,
    accent-yellow: #faa700,
    accent-highlight: #ffea0080,
    fill-primary: #000000d9,
    fill-secondary: #00000080,
    fill-tertiary: #00000040,
    fill-quarternary: #0000001a,
    fill-quinary: #0000000d,
    fill-senary: #00000005,
    color-background: #fff,
    color-background50: #ffffff80,
    color-background70: #ffffffb2,
    color-border: #00000026,
    color-border50: #00000014,
    color-button: #fff,
    color-control: #fff,
    color-menu: #f6f6f6b8,
    color-panedivider: #dadada,
    color-sidepane: #f2f2f2,
    color-tabbar: #f2f2f2,
    color-toolbar: #f9f9f9,
    color-scrollbar: rgb(194, 194, 194),
    color-scrollbar-hover: rgb(125, 125, 125),
    color-scrollbar-background: transparent,
    color-stripe: #0000000a,
    tag-blue: #2ea8e5,
    tag-gray: #aaa,
    tag-green: #5fb236,
    tag-indigo: #576dd9,
    tag-magenta: #e56eee,
    tag-orange: #f19837,
    tag-plum: #a6507b,
    tag-purple: #a28ae5,
    tag-red: #ff6666,
    tag-teal: #009980,
    tag-yellow: #ffd400,
);

@media (prefers-color-scheme: light) {
    :root {
        @each $name, $color in $-colors {
            --#{$name}: #{$color};
        }
        
        // composite (opaque) colors
        --color-quinary-on-background: #{color.mix(
            map.get($-colors, "color-background"), color.change(map.get($-colors, "fill-quinary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quinary")))
        )};
        --color-quarternary-on-background: #{color.mix(
            map.get($-colors, "color-background"), color.change(map.get($-colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quarternary")))
        )};
        --color-quinary-on-sidepane: #{color.mix(
            map.get($-colors, "color-sidepane"), color.change(map.get($-colors, "fill-quinary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quinary")))
        )};
        --color-quarternary-on-sidepane: #{color.mix(
            map.get($-colors, "color-sidepane"), color.change(map.get($-colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quarternary")))
        )};
        --color-stripe-on-background: #{color.mix(
            map.get($-colors, "color-background"), color.change(map.get($-colors, "color-stripe"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "color-stripe")))
        )};

        // background materials
        --material-background: var(--color-background);
        --material-background50: var(--color-background50);
        --material-background70: var(--color-background70);
        --material-button: var(--color-button);
        --material-control: var(--color-control);
        --material-menu: var(--color-menu);
        --material-sidepane: var(--color-sidepane);
        --material-tabbar: var(--color-tabbar);
        --material-toolbar: var(--color-toolbar);
        --material-mix-quinary: var(--color-quinary-on-background);
        --material-mix-quarternary: var(--color-quarternary-on-background);
        --material-stripe: var(--color-stripe-on-background);

        // border materials
        --material-border-transparent: 1px solid transparent;
        --material-border: 1px solid var(--color-border);
        --material-border50: 1px solid var(--color-border50);
        --material-panedivider: 1px solid var(--color-panedivider);
        --material-border-quinary: 1px solid var(--fill-quinary);
        --material-border-quarternary: 1px solid var(--fill-quarternary);
    }
}