diff options
| author | Benjamin Franzke <benjaminfranzke@googlemail.com> | 2022-05-17 10:38:07 +0200 |
|---|---|---|
| committer | Benjamin Franzke <benjaminfranzke@googlemail.com> | 2022-05-17 23:00:18 +0200 |
| commit | 9b266e4349826140c41e965216835bae745e3db1 (patch) | |
| tree | 725324bcff8c10877c7b35b8c9083b0e2a7a6bfd /docs/_includes/header.html | |
| parent | 62bbb96d0070ea3a2097ebc350ffadc9752eee55 (diff) | |
| download | systemd-9b266e4349826140c41e965216835bae745e3db1.tar.gz | |
docs: add dark mode
Respect the user agent property `prefers-color-scheme` by
rendering the documentation in dark mode, if requested.
Reorganise CSS to store the color palette into CSS variables
and reference these from another set of CSS variables that
are dynamically switched based on the prefers-color-scheme
media query.
Light mode variables stay they same as before,
but to ease color mixing, the current RGB values
have been transformed to HSL (using chrome devtools).
The current body background is now --sd-gray-extralight,
the current body color is now --sd-gray-extradark.
Other gray-variations, needed for dark-mode constrasts
are derived from these colors using HSL lightness shifting.
The systemd brand black color is used as dark mode background
and a matching extralight gray font color has been selected.
The link font-weight is reduced to 400 in dark mode,
as the green color on dark ground becomes to overwhelming
with a bold font.
The systemd logo color is dynamically swapped by using
the special fill value `currentColor` for dark/light-mode
depending parts – as per specification on brand.systemd.io
Diffstat (limited to 'docs/_includes/header.html')
| -rw-r--r-- | docs/_includes/header.html | 4 |
1 files changed, 3 insertions, 1 deletions
diff --git a/docs/_includes/header.html b/docs/_includes/header.html index 341971df70..4f2f73b142 100644 --- a/docs/_includes/header.html +++ b/docs/_includes/header.html @@ -5,7 +5,9 @@ <div class="wrapper"> <a class="page-logo" href="{{ site.baseurl }}/"> - <img src="/assets/page-logo.svg" alt="systemd"> + <svg width="202" height="26" viewBox="0 0 202 26"> + <use href="/assets/systemd-logo.svg#systemd-logo"/> + </svg> </a> </div> |