alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

🐛 fix: improve dark mode and OS theme handling (#380)

Browse Source
This commit is contained in:
Óscar
2024-09-12 22:57:46 +02:00
committed by GitHub
parent 1b11f4b321
commit 35dcf55019
17 changed files with 360 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
sass/skins/blue.scss
View File

@@ -1,7 +1,22 @@
@mixin theme-variables($theme) {
@if $theme =='light' {
--primary-color: #3271E7; // Contrast ratio: 4.51:1
}
@else if $theme == 'dark' {
--primary-color: #6cacff; // Contrast ratio: 7.05:1
}
}
:root {
--primary-color: #3271E7; // Contrast ratio: 4.51:1
@include theme-variables('light');
}
[data-theme='dark'] {
--primary-color: #6cacff; // Contrast ratio: 7.05:1
@include theme-variables('dark');
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
@include theme-variables('dark');
}
}

27
sass/skins/evangelion.scss
View File

@@ -1,9 +1,24 @@
// Evangelion Unit-02.
:root {
--primary-color: #d12e36; // Contrast ratio: 5.05:1
@mixin theme-variables($theme) {
@if $theme =='light' {
// Evangelion Unit-02.
--primary-color: #d12e36; // Contrast ratio: 5.05:1
}
@else if $theme == 'dark' {
// Evangelion Unit-01.
--primary-color: #c09bd9; // Contrast ratio: 7.01:1
}
}
// Evangelion Unit-01.
[data-theme='dark'] {
--primary-color: #c09bd9; // Contrast
: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');
}
}

19
sass/skins/indigo_ingot.scss
View File

@@ -1,7 +1,22 @@
@mixin theme-variables($theme) {
@if $theme =='light' {
--primary-color: #1460bd; // Contrast ratio: 6.1:1
}
@else if $theme == 'dark' {
--primary-color: #e6c212; // Contrast ratio: 9.48:1
}
}
:root {
--primary-color: #1460bd; // Contrast ratio: 6.1:1
@include theme-variables('light');
}
[data-theme='dark'] {
--primary-color: #e6c212; // Contrast ratio: 9.48:1
@include theme-variables('dark');
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
@include theme-variables('dark');
}
}

19
sass/skins/lavender.scss
View File

@@ -1,7 +1,22 @@
@mixin theme-variables($theme) {
@if $theme =='light' {
--primary-color: #9055d8; // Contrast ratio: 4.69:1
}
@else if $theme == 'dark' {
--primary-color: #cba2e8; // Contrast ratio: 7.74:1
}
}
:root {
--primary-color: #9055d8; // Contrast ratio: 4.69:1
@include theme-variables('light');
}
[data-theme='dark'] {
--primary-color: #cba2e8; // Contrast ratio: 7.74:1
@include theme-variables('dark');
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
@include theme-variables('dark');
}
}

18
sass/skins/lowcontrast_orange.scss
View File

@@ -2,11 +2,25 @@
// 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: #f56a00; // Contrast ratio: 3.02:1. Not very accessible.
}
@else if $theme == 'dark' {
--primary-color: #ec984f; // Contrast ratio: 7.19:1. Accessible.
}
}
:root {
--primary-color: #f56a00; // Contrast ratio: 3.02:1. Not very accessible.
@include theme-variables('light');
}
[data-theme='dark'] {
--primary-color: #ec984f; // Contrast ratio: 7.19:1. Accessible.
@include theme-variables('dark');
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
@include theme-variables('dark');
}
}

18
sass/skins/lowcontrast_peach.scss
View File

@@ -2,11 +2,25 @@
// 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 {
--primary-color: #ffa057; // Contrast ratio: 2.01:1. Not very accessible.
@include theme-variables('light');
}
[data-theme='dark'] {
--primary-color: #ffab7f; // Contrast ratio: 8.93:1. Accessible.
@include theme-variables('dark');
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
@include theme-variables('dark');
}
}

18
sass/skins/lowcontrast_pink.scss
View File

@@ -2,11 +2,25 @@
// 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 {
--primary-color: #ee59d2; // Contrast ratio: 3:1. Not very accessible.
@include theme-variables('light');
}
[data-theme='dark'] {
--primary-color: #f49ee9; // Contrast ratio: 9.87:1. Accessible.
@include theme-variables('dark');
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
@include theme-variables('dark');
}
}

19
sass/skins/mint.scss
View File

@@ -1,7 +1,22 @@
@mixin theme-variables($theme) {
@if $theme =='light' {
--primary-color: #00804d; // Contrast ratio: 5:1
}
@else if $theme == 'dark' {
--primary-color: #00b86e; // Contrast ratio: 6.34:1
}
}
:root {
--primary-color: #00804d; // Contrast ratio: 5:1
@include theme-variables('light');
}
[data-theme='dark'] {
--primary-color: #00b86e; // Contrast ratio: 6.34:1
@include theme-variables('dark');
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
@include theme-variables('dark');
}
}

19
sass/skins/monochrome.scss
View File

@@ -1,7 +1,22 @@
@mixin theme-variables($theme) {
@if $theme =='light' {
--primary-color: #727272; // Contrast ratio: 4.81:1
}
@else if $theme == 'dark' {
--primary-color: #b3b3b3; // Contrast ratio: 7.86:1
}
}
:root {
--primary-color: #727272; // Contrast ratio: 4.81:1
@include theme-variables('light');
}
[data-theme='dark'] {
--primary-color: #b3b3b3; // Contrast ratio: 7.86:1
@include theme-variables('dark');
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
@include theme-variables('dark');
}
}

19
sass/skins/red.scss
View File

@@ -1,7 +1,22 @@
@mixin theme-variables($theme) {
@if $theme =='light' {
--primary-color: #ca4963; // Contrast ratio: 4.52:1.
}
@else if $theme == 'dark' {
--primary-color: #ea535f; // Contrast ratio: 4.63:1.
}
}
:root {
--primary-color: #ca4963; // Contrast ratio: 4.52:1.
@include theme-variables('light');
}
[data-theme='dark'] {
--primary-color: #ea535f; // Contrast ratio: 4.63:1.
@include theme-variables('dark');
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
@include theme-variables('dark');
}
}

19
sass/skins/sakura.scss
View File

@@ -1,7 +1,22 @@
@mixin theme-variables($theme) {
@if $theme =='light' {
--primary-color: #D33C5C; // Contrast ratio: 4.61:1
}
@else if $theme == 'dark' {
--primary-color: #fabed2; // Contrast ratio: 10.48:1
}
}
:root {
--primary-color: #D33C5C; // Contrast ratio: 4.61:1
@include theme-variables('light');
}
[data-theme='dark'] {
--primary-color: #fabed2; // Contrast ratio: 10.48:1
@include theme-variables('dark');
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
@include theme-variables('dark');
}
}

29
sass/skins/teal.scss
View File

@@ -1,12 +1,33 @@
// This file is never loaded; it's serves as reference for the default skin (in main.scss).
// When creating your own skin, you can use https://webaim.org/resources/contrastchecker/
// to verify the accessibility and readability of your colourscheme.
// The light background is #fff and the dark background is #1f1f1f.
// The default light background is #fff and the dark background is #1f1f1f.
// This defines theme-specific variables.
@mixin theme-variables($theme) {
@if $theme =='light' {
// Light theme colours.
--primary-color: #087e96; // Contrast ratio: 4.73:1
}
@else if $theme == 'dark' {
// Dark theme colours.
--primary-color: #91e0ee; // Contrast ratio: 11.06:1
}
}
// Apply light theme variables by default.
:root {
--primary-color: #087e96; // Contrast ratio: 4.73:1
@include theme-variables('light');
}
// Apply dark theme variables when dark theme is explicitly set.
[data-theme='dark'] {
--primary-color: #91e0ee; // Contrast ratio: 11.06:1
@include theme-variables('dark');
}
// Apply dark theme variables when user's system prefers dark mode
// and the theme is not explicitly set to light.
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
@include theme-variables('dark');
}
}