$-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: #0000008c, 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 { @include derive-colors($-colors); } }