deepState/tabi-lean
3
0
Fork 0
forked from deepStateMirrors/tabi
Code Issues 1 Pull requests 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
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');
}
}
```