dc
504a3136b7
The docs site only offered Material's light scheme. This adds the dark scheme and makes it the default. - palette: two entries, slate first, each with a toggle. Material takes the first entry as the default, so the site opens dark and a sun icon in the header switches to light (and a moon switches back). - dc-brand.css: the dark scheme's greys are derived from a hue variable, so it is pointed at the brand slate (206deg) rather than Material's neutral 225deg, which gives the whole scheme the same cast as the header. - dc-brand.css: the brand slate is unreadable on a dark background, so the dark scheme uses a light tint of it (#9fb5c6) for body links. Green stays the accent, which keeps link hover visible in both schemes. Contrast, over the dark background rgb(30, 36, 41): body text 8.8:1, body links 7.4:1, inline code 7.2:1, accent green 5.6:1, header text 10.2:1. The light scheme is unchanged.
46 lines
1.5 KiB
CSS
46 lines
1.5 KiB
CSS
/*
|
|
* Data Controller brand overrides for the Material theme.
|
|
*
|
|
* The values below mirror the marketing site (https://datacontroller.io): the
|
|
* slate used for its navbar and hero, and the green used for its logo accent.
|
|
* They are wired up through the `custom` palette in mkdocs.yml, which leaves
|
|
* these CSS variables for us to define.
|
|
*/
|
|
|
|
/* Primary - the brand slate, used for the header, the mobile drawer title and body links. */
|
|
:root,
|
|
[data-md-color-primary='custom'] {
|
|
--md-primary-fg-color: #314351;
|
|
--md-primary-fg-color--light: #3d5468;
|
|
--md-primary-fg-color--dark: #263542;
|
|
--md-primary-bg-color: #fff;
|
|
--md-primary-bg-color--light: #ffffffb3;
|
|
--md-typeset-a-color: #314351;
|
|
}
|
|
|
|
/* Accent - the brand green, used for link hover, focus rings and the active search hit. */
|
|
[data-md-color-accent='custom'] {
|
|
--md-accent-fg-color: #79a843;
|
|
--md-accent-fg-color--transparent: #79a8431a;
|
|
--md-accent-bg-color: #fff;
|
|
--md-accent-bg-color--light: #ffffffb3;
|
|
}
|
|
|
|
/*
|
|
* Dark scheme. Material derives its dark greys from a hue variable, so pointing
|
|
* that at the brand slate (206deg) gives the whole scheme the same cast as the
|
|
* header instead of Material's neutral default.
|
|
*/
|
|
[data-md-color-scheme='slate'] {
|
|
--md-hue: 206deg;
|
|
}
|
|
|
|
/*
|
|
* The brand slate is only readable on a light background, so the dark scheme
|
|
* uses a light tint of it for body links. Green stays the accent, which keeps
|
|
* link hover visible in both schemes.
|
|
*/
|
|
[data-md-color-scheme='slate'][data-md-color-primary='custom'] {
|
|
--md-typeset-a-color: #9fb5c6;
|
|
}
|