Skip to content

Commit

Permalink
🐛 fix: improve dark mode and OS theme handling (welpo#380)
Browse files Browse the repository at this point in the history
  • Loading branch information
@welpo
welpo authored Sep 12, 2024
1 parent 1b11f4b commit 35dcf55
Show file tree
Hide file tree
Showing 17 changed files with 353 additions and 168 deletions.
27 changes: 24 additions & 3 deletions content/blog/customise-tabi/index.ca.md
View file
Original file line number Diff line number Diff line change
@@ -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]
Expand Down Expand Up @@ -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');
}
}
```

Expand Down
28 changes: 25 additions & 3 deletions content/blog/customise-tabi/index.es.md
View file
Original file line number Diff line number Diff line change
@@ -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]
Expand Down Expand Up @@ -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');
}
}
```

Expand Down
28 changes: 25 additions & 3 deletions content/blog/customise-tabi/index.md
View file
Original file line number Diff line number Diff line change
@@ -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]
Expand Down Expand Up @@ -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');
}
}
```

Expand Down
187 changes: 57 additions & 130 deletions sass/parts/_admonitions.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -73,7 +48,7 @@
--admonition-danger-code: #fcc1c5;
}

[data-theme='dark'] {
@mixin dark-theme-variables {
/* Note */
--admonition-note-border: #d0d1d4;
--admonition-note-bg: #3d3e40;
Expand All @@ -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");
}
Expand All @@ -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 changes: 11 additions & 1 deletion sass/parts/_footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ footer nav {
}
}

[data-theme="dark"] {
@mixin dark-theme-social {
.social {
&:hover {
& > img {
Expand All @@ -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;
}
}
Loading

0 comments on commit 35dcf55

Please sign in to comment.