From a9f6c23dca8c38e93fc39c10225e7b9caef8c6f1 Mon Sep 17 00:00:00 2001 From: welpo Date: Thu, 12 Sep 2024 22:55:34 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20improve=20dark=20mode=20a?= =?UTF-8?q?nd=20OS=20theme=20handling?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Ensure dark theme applies when explicitly set or by OS preference. - Fixes issues with admonition styling, skins, and social icons (footer). Resolves #379. --- content/blog/customise-tabi/index.ca.md | 27 +++- content/blog/customise-tabi/index.es.md | 28 +++- content/blog/customise-tabi/index.md | 28 +++- sass/parts/_admonitions.scss | 187 ++++++++---------------- sass/parts/_footer.scss | 12 +- sass/skins/blue.scss | 19 ++- sass/skins/evangelion.scss | 23 ++- sass/skins/indigo_ingot.scss | 19 ++- sass/skins/lavender.scss | 19 ++- sass/skins/lowcontrast_orange.scss | 18 ++- sass/skins/lowcontrast_peach.scss | 18 ++- sass/skins/lowcontrast_pink.scss | 18 ++- sass/skins/mint.scss | 19 ++- sass/skins/monochrome.scss | 19 ++- sass/skins/red.scss | 19 ++- sass/skins/sakura.scss | 19 ++- sass/skins/teal.scss | 29 +++- 17 files changed, 353 insertions(+), 168 deletions(-) diff --git a/content/blog/customise-tabi/index.ca.md b/content/blog/customise-tabi/index.ca.md index af666a5d1..f17d30ab7 100644 --- a/content/blog/customise-tabi/index.ca.md +++ b/content/blog/customise-tabi/index.ca.md @@ -1,7 +1,7 @@ +++ title = "Personalitza el color de tabi i el tema per defecte" date = 2023-08-09 -updated = 2023-11-24 +updated = 2024-09-12 description = "Aprèn a personalitzar tabi fent servir skins i establint un tema per defecte, aconseguint un aspecte únic." [taxonomies] @@ -169,12 +169,33 @@ Pots guardar la teva nova skin en qualsevol d'aquests dos directoris: Crea un nou arxiu `.scss` (per exemple, `la_teva_skin.scss`) a la ubicació que prefereixis. Aquest arxiu ha de contenir aquestes dues variables (aquesta és la skin predeterminada, "teal"): ```scss +// 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; + @include theme-variables('light'); } [data-theme='dark'] { - --primary-color: #91e0ee; + @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'); + } } ``` diff --git a/content/blog/customise-tabi/index.es.md b/content/blog/customise-tabi/index.es.md index 3a52766b7..8f5ff3a7e 100644 --- a/content/blog/customise-tabi/index.es.md +++ b/content/blog/customise-tabi/index.es.md @@ -1,7 +1,7 @@ +++ title = "Personaliza el color de tabi y el tema predeterminado" date = 2023-08-09 -updated = 2023-11-24 +updated = 2024-09-12 description = "Aprende a personalizar tabi usando skins y estableciendo un tema predeterminado, haciendo que tu sitio sea único." [taxonomies] @@ -171,12 +171,34 @@ Puedes guardar tu nueva skin en cualquiera de estos dos directorios: Crea un nuevo archivo `.scss` (por ejemplo, `tu_skin.scss`) en la ubicación que prefieras. Este archivo debe contener estas dos variables (esta es la skin predeterminada, "teal"): ```scss +// 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; + @include theme-variables('light'); } +// Apply dark theme variables when dark theme is explicitly set. [data-theme='dark'] { - --primary-color: #91e0ee; + @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'); + } } ``` diff --git a/content/blog/customise-tabi/index.md b/content/blog/customise-tabi/index.md index aa62812a5..488e6583e 100644 --- a/content/blog/customise-tabi/index.md +++ b/content/blog/customise-tabi/index.md @@ -1,7 +1,7 @@ +++ title = "Customise tabi with skins and a default theme" date = 2023-08-09 -updated = 2023-11-24 +updated = 2024-09-12 description = "Learn how to customise tabi using skins and setting a default theme, making your site uniquely yours." [taxonomies] @@ -180,12 +180,34 @@ You can save your new skin it in either of these two directories: Create a new `.scss` file (for example, `your_skin.scss`) in your preferred location. This file needs to have these two variables (this is the default skin, "teal"): ```scss +// 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; + @include theme-variables('light'); } +// Apply dark theme variables when dark theme is explicitly set. [data-theme='dark'] { - --primary-color: #91e0ee; + @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'); + } } ``` diff --git a/sass/parts/_admonitions.scss b/sass/parts/_admonitions.scss index 92947798a..276c6ff2d 100644 --- a/sass/parts/_admonitions.scss +++ b/sass/parts/_admonitions.scss @@ -1,51 +1,26 @@ -.admonition { - display: flex; - align-items: flex-start; - margin: 1em 0; - border-left: 6px solid; - border-radius: 10px; - padding: 0.8rem; - color: var(--text-color-high-contrast); - font-family: var(--sans-serif-font); +@mixin admonition-type($type) { + border-color: var(--admonition-#{$type}-border); + background-color: var(--admonition-#{$type}-bg); - p { - margin-bottom: 0; - margin-left: -1.75rem; - font-family: inherit; + code { + background-color: var(--admonition-#{$type}-code); } - a:hover { - color: var(--hover-color) !important; + a { + border-bottom: 1px solid var(--admonition-#{$type}-border); + color: var(--admonition-#{$type}-border); - code { - color: var(--text-color-high-contrast) !important; + &:hover { + background-color: var(--admonition-#{$type}-border); + color: var(--hover-color); } } -} -.admonition-content { - flex: 1; - strong { - font-weight: 580; + .admonition-icon { + background-color: var(--admonition-#{$type}-border); } } -.admonition-icon { - display: flex; - align-items: center; - margin: 0.3rem; - background-size: contain; - background-repeat: no-repeat; - aspect-ratio: 1/1; - width: 1.5rem; -} - -.admonition-title { - opacity: 0.92; - font-weight: bold; - font-size: 0.82rem; -} - :root { /* Note */ --admonition-note-border: #5b6167; @@ -73,7 +48,7 @@ --admonition-danger-code: #fcc1c5; } -[data-theme='dark'] { +@mixin dark-theme-variables { /* Note */ --admonition-note-border: #d0d1d4; --admonition-note-bg: #3d3e40; @@ -100,96 +75,63 @@ --admonition-danger-code: #8c2e00; } -.admonition.note { - border-color: var(--admonition-note-border); - background-color: var(--admonition-note-bg); - - code { - background-color: var(--admonition-note-code) !important; - } - - a { - border-bottom: 1px solid var(--admonition-note-border); - color: var(--admonition-note-border); - - &:hover { - background-color: var(--admonition-note-border); - } - } +[data-theme='dark'] { + @include dark-theme-variables; } -.admonition.tip { - border-color: var(--admonition-tip-border); - background-color: var(--admonition-tip-bg); - - code { - background-color: var(--admonition-tip-code) !important; - } - - a { - border-bottom: 1px solid var(--admonition-tip-border); - color: var(--admonition-tip-border); - - &:hover { - background-color: var(--admonition-tip-border); - } +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include dark-theme-variables; } } -.admonition.info { - border-color: var(--admonition-info-border); - background-color: var(--admonition-info-bg); +.admonition { + display: flex; + align-items: flex-start; + margin: 1em 0; + border-left: 6px solid; + border-radius: 10px; + padding: 0.8rem; + color: var(--text-color-high-contrast); + font-family: var(--sans-serif-font); - code { - background-color: var(--admonition-info-code) !important; + p { + margin-bottom: 0; + margin-left: -1.75rem; + font-family: inherit; } a { - border-bottom: 1px solid var(--admonition-info-border); - color: var(--admonition-info-border); - - &:hover { - background-color: var(--admonition-info-border); + code { + color: inherit; } } } -.admonition.warning { - border-color: var(--admonition-warning-border); - background-color: var(--admonition-warning-bg); - - code { - background-color: var(--admonition-warning-code) !important; - } - - a { - border-bottom: 1px solid var(--admonition-warning-border); - color: var(--admonition-warning-border); - - &:hover { - background-color: var(--admonition-warning-border); - } +.admonition-content { + flex: 1; + strong { + font-weight: 580; } } -.admonition.danger { - border-color: var(--admonition-danger-border); - background-color: var(--admonition-danger-bg); - - code { - background-color: var(--admonition-danger-code) !important; - } - - a { - border-bottom: 1px solid var(--admonition-danger-border); - color: var(--admonition-danger-border); +.admonition-icon { + display: flex; + align-items: center; + margin: 0.3rem; + background-size: contain; + background-repeat: no-repeat; + aspect-ratio: 1/1; + width: 1.5rem; +} - &:hover { - background-color: var(--admonition-danger-border); - } - } +.admonition-title { + opacity: 0.92; + font-weight: bold; + font-size: 0.82rem; } + .admonition-icon-note { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E"); } @@ -210,23 +152,8 @@ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M239.256-400q0 58.091 27.975 108.995t76.13 81.237q-5.616-8.513-8.487-18.398-2.872-9.885-2.872-19.167 1.333-26.436 12.153-50.307 10.821-23.872 31.41-43.461L480-443.921l105.819 102.82q18.923 19.311 29.885 43.321 10.961 24.011 12.294 50.447 0 9.282-2.872 19.167-2.871 9.885-7.82 18.398 47.488-30.333 75.796-81.237Q721.41-341.909 721.41-400q0-47.622-19.258-93.169-19.259-45.547-53.998-82.549-19.951 13.41-42.202 19.859Q583.7-549.41 561-549.41q-62.448 0-105.108-38.039-42.661-38.038-51.225-98.628v-9.744q-39.385 31.949-69.898 67.68-30.513 35.73-51.987 74.166t-32.5 77.464Q239.256-437.483 239.256-400ZM480-349.539l-57.436 56.436q-12.154 11.821-17.731 26.029-5.577 14.208-5.577 29.074 0 32.769 23.498 55.757 23.497 22.987 57.246 22.987 33.432 0 57.421-22.906 23.989-22.906 23.989-55.561 0-16.162-6.116-30.162-6.116-13.999-17.454-25.154l-57.84-56.5Zm-11.002-469.022V-708q0 38.637 26.832 64.819 26.831 26.183 65.17 26.183 15.609 0 30.818-5.923 15.208-5.923 28.131-17.718l22.615-24.102q67.564 44.128 106.999 114.917 39.435 70.79 39.435 150.156 0 128.206-89.846 218.103Q609.307-91.668 480-91.668q-129.027 0-218.68-89.652-89.652-89.653-89.652-218.68 0-119.178 79.371-232.447t217.959-186.114Z'/%3E%3C/svg%3E"); } -/* Admonition type styles */ -.admonition.note .admonition-icon { - background-color: var(--admonition-note-border); -} - -.admonition.tip .admonition-icon { - background-color: var(--admonition-tip-border); -} - -.admonition.info .admonition-icon { - background-color: var(--admonition-info-border); -} - -.admonition.warning .admonition-icon { - background-color: var(--admonition-warning-border); -} - -.admonition.danger .admonition-icon { - background-color: var(--admonition-danger-border); -} +.admonition.note { @include admonition-type('note'); } +.admonition.tip { @include admonition-type('tip'); } +.admonition.info { @include admonition-type('info'); } +.admonition.warning { @include admonition-type('warning'); } +.admonition.danger { @include admonition-type('danger'); } diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss index 920cd2de8..200206ce8 100644 --- a/sass/parts/_footer.scss +++ b/sass/parts/_footer.scss @@ -66,7 +66,7 @@ footer nav { } } -[data-theme="dark"] { +@mixin dark-theme-social { .social { &:hover { & > img { @@ -79,3 +79,13 @@ footer nav { } } } + +[data-theme="dark"] { + @include dark-theme-social; +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + @include dark-theme-social; + } +} diff --git a/sass/skins/blue.scss b/sass/skins/blue.scss index 8b3225b13..d135219e3 100644 --- a/sass/skins/blue.scss +++ b/sass/skins/blue.scss @@ -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'); + } } diff --git a/sass/skins/evangelion.scss b/sass/skins/evangelion.scss index d2506fbe8..d0350a59b 100644 --- a/sass/skins/evangelion.scss +++ b/sass/skins/evangelion.scss @@ -1,9 +1,24 @@ -// Evangelion Unit-02. +@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 + } +} + :root { - --primary-color: #d12e36; // Contrast ratio: 5.05:1 + @include theme-variables('light'); } -// Evangelion Unit-01. [data-theme='dark'] { - --primary-color: #c09bd9; // Contrast + @include theme-variables('dark'); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include theme-variables('dark'); + } } diff --git a/sass/skins/indigo_ingot.scss b/sass/skins/indigo_ingot.scss index 5ffb58881..11a63702d 100644 --- a/sass/skins/indigo_ingot.scss +++ b/sass/skins/indigo_ingot.scss @@ -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'); + } } diff --git a/sass/skins/lavender.scss b/sass/skins/lavender.scss index b772953d9..97a40dff1 100644 --- a/sass/skins/lavender.scss +++ b/sass/skins/lavender.scss @@ -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'); + } } diff --git a/sass/skins/lowcontrast_orange.scss b/sass/skins/lowcontrast_orange.scss index c374ddd3c..ad84bf402 100644 --- a/sass/skins/lowcontrast_orange.scss +++ b/sass/skins/lowcontrast_orange.scss @@ -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'); + } } diff --git a/sass/skins/lowcontrast_peach.scss b/sass/skins/lowcontrast_peach.scss index 5b9a51c5f..328a4dad9 100644 --- a/sass/skins/lowcontrast_peach.scss +++ b/sass/skins/lowcontrast_peach.scss @@ -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'); + } } diff --git a/sass/skins/lowcontrast_pink.scss b/sass/skins/lowcontrast_pink.scss index b6b737859..3f96d1d32 100644 --- a/sass/skins/lowcontrast_pink.scss +++ b/sass/skins/lowcontrast_pink.scss @@ -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'); + } } diff --git a/sass/skins/mint.scss b/sass/skins/mint.scss index 692872fd8..e598c2498 100644 --- a/sass/skins/mint.scss +++ b/sass/skins/mint.scss @@ -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'); + } } diff --git a/sass/skins/monochrome.scss b/sass/skins/monochrome.scss index a61669591..976e12e13 100644 --- a/sass/skins/monochrome.scss +++ b/sass/skins/monochrome.scss @@ -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'); + } } diff --git a/sass/skins/red.scss b/sass/skins/red.scss index 844f8b44d..169340f54 100644 --- a/sass/skins/red.scss +++ b/sass/skins/red.scss @@ -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'); + } } diff --git a/sass/skins/sakura.scss b/sass/skins/sakura.scss index db0086150..4e418eb5a 100644 --- a/sass/skins/sakura.scss +++ b/sass/skins/sakura.scss @@ -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'); + } } diff --git a/sass/skins/teal.scss b/sass/skins/teal.scss index 7ecdc0c8b..3a1fbcd16 100644 --- a/sass/skins/teal.scss +++ b/sass/skins/teal.scss @@ -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'); + } }