alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 2 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 360 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
content/blog/customise-tabi/index.ca.md
View File

@ -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');
}
}
```

30
content/blog/customise-tabi/index.es.md
View File

@ -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
:root {
--primary-color: #087e96;
// 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 {
@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');
}
}
```

30
content/blog/customise-tabi/index.md
View File

@ -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
:root {
--primary-color: #087e96;
// 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 {
@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');
}
}
```

193
sass/parts/_admonitions.scss
View File

@ -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,95 +75,62 @@
--admonition-danger-code: #8c2e00;
}
.admonition.note {
border-color: var(--admonition-note-border);
background-color: var(--admonition-note-bg);
[data-theme='dark'] {
@include dark-theme-variables;
}
code {
background-color: var(--admonition-note-code) !important;
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
@include dark-theme-variables;
}
}
.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);
p {
margin-bottom: 0;
margin-left: -1.75rem;
font-family: inherit;
}
a {
border-bottom: 1px solid var(--admonition-note-border);
color: var(--admonition-note-border);
&:hover {
background-color: var(--admonition-note-border);
code {
color: inherit;
}
}
}
.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);
}
.admonition-content {
flex: 1;
strong {
font-weight: 580;
}
}
.admonition.info {
border-color: var(--admonition-info-border);
background-color: var(--admonition-info-bg);
code {
background-color: var(--admonition-info-code) !important;
}
a {
border-bottom: 1px solid var(--admonition-info-border);
color: var(--admonition-info-border);
&:hover {
background-color: var(--admonition-info-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.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-title {
opacity: 0.92;
font-weight: bold;
font-size: 0.82rem;
}
.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);
&:hover {
background-color: var(--admonition-danger-border);
}
}
}
.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'); }

12
sass/parts/_footer.scss
View File

@ -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;
}
}

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');
}
}