mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Merge branch 'next' of https://github.com/shoelace-style/shoelace into next

pull/593/head
Cory LaViska 2021-11-19 16:18:13 -05:00
rodzic 37425db04d 357909401d
commit f214f0f033
1 zmienionych plików z 2 dodań i 2 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

4
docs/getting-started/themes.md
Wyświetl plik

@ -108,9 +108,9 @@ You will, however, need to maintain your theme more carefully, as new versions o
## Dark Theme
The built-in dark theme uses an inverted + shifted color scale so, if you're using design tokens as intended, you'll get dark mode for free. While this isn't the same as a professionally curated dark theme, it provides an excellent baseline for one and you're encouraged to customize it depending on your needs.
The built-in dark theme uses an inverted color scale so, if you're using design tokens as intended, you'll get dark mode for free. While this isn't the same as a professionally curated dark theme, it provides an excellent baseline for one and you're encouraged to customize it depending on your needs.
This was achieved by taking the light theme's [color tokens](/tokens/color) and "flipping" the scale so 100 becomes 900, 200 becomes 800, 300 becomes 700, etc. Next, the luminance of each primitive was increased slightly to avoid true black, a color that is typically undesirable in dark themes. The result is a custom palette that complements the light theme well and makes it easy to offer light and dark variations with minimal effort.
This was achieved by taking the light theme's [color tokens](/tokens/color) and "flipping" the scale so 100 becomes 900, 200 becomes 800, 300 becomes 700, etc. Next, the luminance of each primitive was fine-tuned to avoid true black, which often undesirable in dark themes, and provide a richer experience. The result is a custom dark theme palette that complements the light theme well and makes it easy to offer light and dark variations with minimal effort.
To install the dark theme, add the following to the `<head>` section of your page.