diff options
Diffstat (limited to 'sysret.org/themes/tabi-lean/sass/skins/lowcontrast_peach.scss')
| -rw-r--r-- | sysret.org/themes/tabi-lean/sass/skins/lowcontrast_peach.scss | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/sysret.org/themes/tabi-lean/sass/skins/lowcontrast_peach.scss b/sysret.org/themes/tabi-lean/sass/skins/lowcontrast_peach.scss new file mode 100644 index 0000000..328a4da --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/skins/lowcontrast_peach.scss @@ -0,0 +1,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: #ffa057; // Contrast ratio: 2.01:1. Not very accessible. + } + @else if $theme == 'dark' { + --primary-color: #ffab7f; // Contrast ratio: 8.93: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'); + } +} |
