summaryrefslogtreecommitdiff
path: root/sysret.org/themes/tabi-lean/sass/skins/lowcontrast_peach.scss
diff options
context:
space:
mode:
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.scss26
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');
+ }
+}