sysret.org/themes/tabi-lean/sass/skins/lowcontrast_pink.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// WARNING! This skin, in light theme, may not provide optimal contrast for readability
// and might not be suitable for users with certain types of visual impairment.
// Furthermore, low contrast will affect your Google Lighthouse rating.
// For more information on web accessibility: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
@mixin theme-variables($theme) {
    @if $theme =='light' {
        --primary-color: #ee59d2; // Contrast ratio: 3:1. Not very accessible.
    }
    @else if $theme == 'dark' {
        --primary-color: #f49ee9; // Contrast ratio: 9.87:1. Accessible.
    }
}

:root {
    @include theme-variables('light');
}

[data-theme='dark'] {
    @include theme-variables('dark');
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        @include theme-variables('dark');
    }
}