mirror of
https://github.com/systemd/systemd.git
synced 2025-01-03 05:18:09 +03:00
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
This commit is contained in:
Benjamin Franzke
parent
62bbb96d00
commit
9b266e4349
@ -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>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="202" height="26">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="202" height="26" viewBox="0 0 202 26" id="systemd-logo">
|
||||
<!-- SPDX-License-Identifier: LGPL-2.1-or-later -->
|
||||
<path d="M0 0v26h10v-4H4V4h6V0zm76 0v4h6v18h-6v4h10V0z" color="#000" fill="#201a26"/>
|
||||
<path d="M113.498 14.926q-4.5-.96-4.5-3.878 0-1.079.609-1.981.621-.902 1.781-1.441 1.16-.54 2.707-.54 1.63 0 2.848.528 1.219.516 1.875 1.453.656.926.656 2.121h-3.539q0-.762-.457-1.183-.457-.434-1.394-.434-.774 0-1.243.363-.457.364-.457.938 0 .55.516.89.527.34 1.781.575 1.5.28 2.543.738 1.043.445 1.653 1.242.62.797.62 2.027 0 1.114-.667 2.004-.657.88-1.887 1.383-1.219.504-2.836.504-1.711 0-2.965-.621-1.242-.633-1.898-1.617-.645-.985-.645-2.051h3.34q.036.914.656 1.36.621.433 1.594.433.902 0 1.383-.34.492-.351.492-.937 0-.364-.223-.61-.21-.258-.773-.48-.55-.223-1.57-.446zm19.384-7.606l-5.086 14.58q-.293.831-.726 1.523-.434.703-1.266 1.195-.832.504-2.098.504-.457 0-.75-.048-.281-.046-.785-.176v-2.672q.176.02.527.02.95 0 1.418-.293.47-.293.715-.961l.352-.926-4.43-12.738h3.797l2.262 7.687 2.285-7.687zm5.884 7.606q-4.5-.96-4.5-3.878 0-1.079.61-1.981.62-.902 1.781-1.441 1.16-.54 2.707-.54 1.629 0 2.848.528 1.218.516 1.875 1.453.656.926.656 2.121h-3.539q0-.762-.457-1.183-.457-.434-1.395-.434-.773 0-1.242.363-.457.364-.457.938 0 .55.516.89.527.34 1.781.575 1.5.28 2.543.738 1.043.445 1.652 1.242.621.797.621 2.027 0 1.114-.668 2.004-.656.88-1.886 1.383-1.219.504-2.836.504-1.711 0-2.965-.621-1.242-.633-1.899-1.617-.644-.985-.644-2.051h3.34q.036.914.656 1.36.621.433 1.594.433.902 0 1.383-.34.492-.351.492-.937 0-.364-.223-.61-.21-.258-.773-.48-.551-.223-1.57-.446zm13.983 2.403q.574 0 .984-.082v2.66q-.914.328-2.086.328-3.727 0-3.727-3.797V9.899h-1.793V7.321h1.793v-3.14h3.54v3.14h2.132v2.578h-2.133v6.129q0 .75.293 1.031.293.27.997.27zm14.228-2.519h-8.016q.2 1.183.985 1.886.785.691 2.015.691.914 0 1.688-.34.785-.351 1.336-1.042l1.699 1.957q-.668.96-1.957 1.617-1.278.656-3 .656-1.946 0-3.387-.82-1.43-.82-2.203-2.227-.762-1.406-.762-3.105v-.446q0-1.898.715-3.386.715-1.489 2.063-2.32 1.347-.844 3.187-.844 1.793 0 3.059.761 1.265.762 1.922 2.168.656 1.395.656 3.293zm-3.469-2.65q-.024-1.03-.574-1.628-.54-.598-1.617-.598-1.008 0-1.582.668-.563.668-.739 1.84h4.512zm19.923-5.073q1.934 0 2.989 1.148 1.054 1.148 1.054 3.727v8.039h-3.539V11.95q0-.797-.21-1.23-.212-.446-.61-.61-.387-.164-.984-.164-.715 0-1.219.352-.504.34-.797.972.02.082.02.27V20h-3.54v-8.015q0-.797-.21-1.242-.211-.445-.61-.621-.386-.176-.996-.176-.68 0-1.183.304-.492.293-.797.844V20h-3.539V7.32h3.316l.118 1.419q.633-.797 1.547-1.22.926-.433 2.086-.433 1.172 0 2.016.48.855.47 1.312 1.442.633-.926 1.582-1.418.961-.504 2.203-.504zM201.398 2v18h-3.187l-.176-1.359q-1.243 1.594-3.212 1.594-1.535 0-2.66-.82-1.113-.832-1.699-2.285-.574-1.454-.574-3.317v-.246q0-1.934.574-3.398.586-1.465 1.7-2.274 1.124-.808 2.683-.808 1.805 0 3.012 1.37V2.001zm-5.672 15.376q1.488 0 2.133-1.266v-4.898q-.61-1.266-2.11-1.266-1.207 0-1.77.984-.55.985-.55 2.637v.246q0 1.629.54 2.602.55.96 1.757.96z" fill="#201a26"/>
|
||||
<path d="M0 0v26h10v-4H4V4h6V0zm76 0v4h6v18h-6v4h10V0z" fill="currentColor"/>
|
||||
<path d="M113.498 14.926q-4.5-.96-4.5-3.878 0-1.079.609-1.981.621-.902 1.781-1.441 1.16-.54 2.707-.54 1.63 0 2.848.528 1.219.516 1.875 1.453.656.926.656 2.121h-3.539q0-.762-.457-1.183-.457-.434-1.394-.434-.774 0-1.243.363-.457.364-.457.938 0 .55.516.89.527.34 1.781.575 1.5.28 2.543.738 1.043.445 1.653 1.242.62.797.62 2.027 0 1.114-.667 2.004-.657.88-1.887 1.383-1.219.504-2.836.504-1.711 0-2.965-.621-1.242-.633-1.898-1.617-.645-.985-.645-2.051h3.34q.036.914.656 1.36.621.433 1.594.433.902 0 1.383-.34.492-.351.492-.937 0-.364-.223-.61-.21-.258-.773-.48-.55-.223-1.57-.446zm19.384-7.606l-5.086 14.58q-.293.831-.726 1.523-.434.703-1.266 1.195-.832.504-2.098.504-.457 0-.75-.048-.281-.046-.785-.176v-2.672q.176.02.527.02.95 0 1.418-.293.47-.293.715-.961l.352-.926-4.43-12.738h3.797l2.262 7.687 2.285-7.687zm5.884 7.606q-4.5-.96-4.5-3.878 0-1.079.61-1.981.62-.902 1.781-1.441 1.16-.54 2.707-.54 1.629 0 2.848.528 1.218.516 1.875 1.453.656.926.656 2.121h-3.539q0-.762-.457-1.183-.457-.434-1.395-.434-.773 0-1.242.363-.457.364-.457.938 0 .55.516.89.527.34 1.781.575 1.5.28 2.543.738 1.043.445 1.652 1.242.621.797.621 2.027 0 1.114-.668 2.004-.656.88-1.886 1.383-1.219.504-2.836.504-1.711 0-2.965-.621-1.242-.633-1.899-1.617-.644-.985-.644-2.051h3.34q.036.914.656 1.36.621.433 1.594.433.902 0 1.383-.34.492-.351.492-.937 0-.364-.223-.61-.21-.258-.773-.48-.551-.223-1.57-.446zm13.983 2.403q.574 0 .984-.082v2.66q-.914.328-2.086.328-3.727 0-3.727-3.797V9.899h-1.793V7.321h1.793v-3.14h3.54v3.14h2.132v2.578h-2.133v6.129q0 .75.293 1.031.293.27.997.27zm14.228-2.519h-8.016q.2 1.183.985 1.886.785.691 2.015.691.914 0 1.688-.34.785-.351 1.336-1.042l1.699 1.957q-.668.96-1.957 1.617-1.278.656-3 .656-1.946 0-3.387-.82-1.43-.82-2.203-2.227-.762-1.406-.762-3.105v-.446q0-1.898.715-3.386.715-1.489 2.063-2.32 1.347-.844 3.187-.844 1.793 0 3.059.761 1.265.762 1.922 2.168.656 1.395.656 3.293zm-3.469-2.65q-.024-1.03-.574-1.628-.54-.598-1.617-.598-1.008 0-1.582.668-.563.668-.739 1.84h4.512zm19.923-5.073q1.934 0 2.989 1.148 1.054 1.148 1.054 3.727v8.039h-3.539V11.95q0-.797-.21-1.23-.212-.446-.61-.61-.387-.164-.984-.164-.715 0-1.219.352-.504.34-.797.972.02.082.02.27V20h-3.54v-8.015q0-.797-.21-1.242-.211-.445-.61-.621-.386-.176-.996-.176-.68 0-1.183.304-.492.293-.797.844V20h-3.539V7.32h3.316l.118 1.419q.633-.797 1.547-1.22.926-.433 2.086-.433 1.172 0 2.016.48.855.47 1.312 1.442.633-.926 1.582-1.418.961-.504 2.203-.504zM201.398 2v18h-3.187l-.176-1.359q-1.243 1.594-3.212 1.594-1.535 0-2.66-.82-1.113-.832-1.699-2.285-.574-1.454-.574-3.317v-.246q0-1.934.574-3.398.586-1.465 1.7-2.274 1.124-.808 2.683-.808 1.805 0 3.012 1.37V2.001zm-5.672 15.376q1.488 0 2.133-1.266v-4.898q-.61-1.266-2.11-1.266-1.207 0-1.77.984-.55.985-.55 2.637v.246q0 1.629.54 2.602.55.96 1.757.96z" fill="currentColor"/>
|
||||
<path d="M45 13L63 3v20z" fill="#30d475"/>
|
||||
<circle cx="30" cy="13" r="9" fill="#30d475"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.1 KiB |
160
docs/style.css
160
docs/style.css
@ -12,6 +12,52 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Variables */
|
||||
:root {
|
||||
--sd-brand-black: hsl(270, 19%, 13%); /* #201A26; */
|
||||
--sd-brand-green: hsl(145, 66%, 51%); /* #30D475; */
|
||||
--sd-brand-white: #fff;
|
||||
|
||||
--sd-green: hsl(145, 66%, 43%); /* #26b763 */
|
||||
--sd-gray-extralight: hsl(30, 10%, 96%); /* #f6f5f4 */
|
||||
--sd-gray-light: hsl(30, 10%, 92%);
|
||||
--sd-gray: hsl(30, 10%, 85%);
|
||||
--sd-gray-dark: hsl(257, 23%, 20%);
|
||||
--sd-gray-extradark: hsl(257, 23%, 16%); /* #241f31 */
|
||||
|
||||
--sd-highlight-bg-light: rgba(255, 255, 255, 1);
|
||||
--sd-highlight-bg-dark: rgba(0, 0, 0, .6);
|
||||
--sd-highlight-inline-bg-light: rgba(0, 0, 0, 0.07);
|
||||
--sd-highlight-inline-bg-dark: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--sd-font-weight-normal: 400;
|
||||
--sd-font-weight-bold: 600;
|
||||
|
||||
/* Light mode variables */
|
||||
--sd-foreground-color: var(--sd-gray-extradark);
|
||||
--sd-background-color: var(--sd-gray-extralight);
|
||||
--sd-logo-color: var(--sd-brand-black);
|
||||
--sd-link-color: var(--sd-green);
|
||||
--sd-small-color: var(--sd-gray-dark);
|
||||
--sd-highlight-bg: var(--sd-highlight-bg-light);
|
||||
--sd-highlight-inline-bg: var(--sd-highlight-inline-bg-light);
|
||||
--sd-link-font-weight: var(--sd-font-weight-bold);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--sd-foreground-color: var(--sd-gray);
|
||||
--sd-background-color: var(--sd-brand-black);
|
||||
--sd-logo-color: var(--sd-brand-white);
|
||||
--sd-link-color: var(--sd-brand-green);
|
||||
--sd-small-color: var(--sd-gray);
|
||||
--sd-highlight-bg: var(--sd-highlight-bg-dark);
|
||||
--sd-highlight-inline-bg: var(--sd-highlight-inline-bg-dark);
|
||||
--sd-link-font-weight: var(--sd-font-weight-normal);
|
||||
}
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
@ -27,8 +73,8 @@ html, body {
|
||||
line-height: 1.6;
|
||||
}
|
||||
body {
|
||||
color: #241f31;
|
||||
background-color: #f6f5f4;
|
||||
color: var(--sd-foreground-color);
|
||||
background-color: var(--sd-background-color);
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 1rem 0 0.625rem;
|
||||
@ -57,9 +103,9 @@ h3 {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
a {
|
||||
font-weight: 600;
|
||||
font-weight: var(--sd-link-font-weight);
|
||||
text-decoration: none;
|
||||
color: #26b763;
|
||||
color: var(--sd-link-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
a:hover {
|
||||
@ -69,7 +115,7 @@ b {
|
||||
font-weight: 600;
|
||||
}
|
||||
small {
|
||||
color: #777;
|
||||
color: var(--sd-small-color);
|
||||
}
|
||||
hr {
|
||||
margin: 3rem auto 4rem;
|
||||
@ -89,8 +135,9 @@ hr {
|
||||
.page-logo {
|
||||
display: block;
|
||||
padding: 5rem 0 3rem;
|
||||
color: var(--sd-logo-color);
|
||||
}
|
||||
.page-logo > img {
|
||||
.page-logo > svg {
|
||||
display: block;
|
||||
width: 12.625em;
|
||||
height: auto;
|
||||
@ -98,16 +145,16 @@ hr {
|
||||
}
|
||||
|
||||
.brand-white {
|
||||
background-color: #fff;
|
||||
background-color: var(--sd-brand-white);
|
||||
}
|
||||
|
||||
.brand-green {
|
||||
background-color: #30D475;
|
||||
background-color: var(--sd-brand-green);
|
||||
}
|
||||
|
||||
.brand-black {
|
||||
background-color: #201A26;
|
||||
color: white;
|
||||
background-color: var(--sd-brand-black);
|
||||
color: var(--sd-white);
|
||||
}
|
||||
|
||||
.page-link::after {
|
||||
@ -132,6 +179,8 @@ tbody td {
|
||||
/* Generated with: rougify style github | sed '/background-color: #f8f8f8/d' */
|
||||
.highlight table td { padding: 5px; }
|
||||
.highlight table pre { margin: 0; }
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.highlight .cm {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
@ -340,13 +389,96 @@ tbody td {
|
||||
.highlight .w {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* rouge "base16.dark" code highlight */
|
||||
/* generated with: rougify style base16.dark | sed '/background-color: #151515/d' */
|
||||
.highlight, .highlight .w {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
.highlight .err {
|
||||
color: #151515;
|
||||
background-color: #ac4142;
|
||||
}
|
||||
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs {
|
||||
color: #505050;
|
||||
}
|
||||
.highlight .cp {
|
||||
color: #f4bf75;
|
||||
}
|
||||
.highlight .nt {
|
||||
color: #f4bf75;
|
||||
}
|
||||
.highlight .o, .highlight .ow {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
.highlight .p, .highlight .pi {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
.highlight .gi {
|
||||
color: #90a959;
|
||||
}
|
||||
.highlight .gd {
|
||||
color: #ac4142;
|
||||
}
|
||||
.highlight .gh {
|
||||
color: #6a9fb5;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
|
||||
color: #aa759f;
|
||||
}
|
||||
.highlight .kc {
|
||||
color: #d28445;
|
||||
}
|
||||
.highlight .kt {
|
||||
color: #d28445;
|
||||
}
|
||||
.highlight .kd {
|
||||
color: #d28445;
|
||||
}
|
||||
.highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
|
||||
color: #90a959;
|
||||
}
|
||||
.highlight .sa {
|
||||
color: #aa759f;
|
||||
}
|
||||
.highlight .sr {
|
||||
color: #75b5aa;
|
||||
}
|
||||
.highlight .si {
|
||||
color: #8f5536;
|
||||
}
|
||||
.highlight .se {
|
||||
color: #8f5536;
|
||||
}
|
||||
.highlight .nn {
|
||||
color: #f4bf75;
|
||||
}
|
||||
.highlight .nc {
|
||||
color: #f4bf75;
|
||||
}
|
||||
.highlight .no {
|
||||
color: #f4bf75;
|
||||
}
|
||||
.highlight .na {
|
||||
color: #6a9fb5;
|
||||
}
|
||||
.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
|
||||
color: #90a959;
|
||||
}
|
||||
.highlight .ss {
|
||||
color: #90a959;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code Blocks */
|
||||
.highlighter-rouge {
|
||||
padding: 2px 1rem;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
color: var(--sd-foreground-color);
|
||||
background-color: var(--sd-highlight-bg);
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
@ -358,5 +490,9 @@ tbody td {
|
||||
/* Inline Code */
|
||||
code.highlighter-rouge {
|
||||
padding: 2px 6px;
|
||||
background-color: rgba(0,0,0, 0.07);
|
||||
background-color: var(--sd-highlight-inline-bg);
|
||||
}
|
||||
|
||||
a code.highlighter-rouge {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user