26 lines
850 B
SCSS
26 lines
850 B
SCSS
// 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');
|
|
}
|
|
}
|