Skip to content

Instantly share code, notes, and snippets.

@calebgrove
Last active January 24, 2019 19:25
Show Gist options
  • Save calebgrove/f5f0dedc59b891abe0c39ee238af73f7 to your computer and use it in GitHub Desktop.
Save calebgrove/f5f0dedc59b891abe0c39ee238af73f7 to your computer and use it in GitHub Desktop.
Kirby 3 Reference Dark Mode CSS

Just some low-tech CSS to make the new Kirby 3 Reference nice and dark. Use with the browser plugin of your choice, I use Cascadea with Safari.

Screenshot

/* ==UserStyle==
@name Kirby Reference Dark Mode
@author Caleb Grove
@description Make the Kirby 3 reference guide nice and dark.
@version 1.1
@namespace cascadea-calebgrove
==/UserStyle== */
@-moz-document url-prefix("https://getkirby.com/docs/reference")
{
/* COLORS */
:root {
--almost-black: hsla(226, 6%, 7%, 1); /* Very dark gray */
--dark-gray: hsla(211, 6%, 11%, 1); /* Dark gray (primary background) */
--light-gray: hsla(0, 0%, 95%, .7); /* Light gray (primary text color) */
--light-gray-1: hsla(0, 0%, 95%, .4); /* Low contrast light gray */
--light-gray-2: hsla(0, 0%, 95%, .2); /* Lowest contrast light gray */
--highlight: hsla(214, 45%, 50%, 1); /* Pastel blue */
}
/* BACKGROUNDS & BORDERS */
/* Dark gray background */
.cheatsheet-panel, html {
background: var(--dark-gray);
}
/* Almost black background color */
.cheatsheet-header,
.text tr:nth-child(odd) td,
.cheatsheet-sections li a[aria-current],
.toc,
code,
.text .info {
background: var(--almost-black);
}
/* Highlight background color */
.cheatsheet-entries li a[aria-current]:after {
background: var(--highlight);
}
/* Low contrast border color */
.cheatsheet-section-entries a,
.docs-footer,
.text table,
.text td,
.text th {
border-color: var(--light-gray-1);
}
/* Ultra-low-contrast border color */
.cheatsheet-panel,
.cheatsheet-entries li {
border-color: var(--light-gray-2);
}
/* Light gray fill (for SVGs) */
button svg path {
fill: var(--light-gray);
}
/* TEXT COLORS */
/* Light gray text color */
.cheatsheet-panel,
button {
color: var(--light-gray);
}
/* Low contrast text color */
.intro {
color: var(--light-gray-1);
}
/* Highlight text color */
a:hover, a:active {
color: var(--highlight);
}
/* LAYOUT TWEAKS */
@media (min-width: 56em) {
.cheatsheet-sections {
flex-basis: calc(11rem + 1px);
}
.cheatsheet-header form {
flex-basis: calc(20% + 1px);
}
}
/* TYPOGRAPHY TWEAKS */
.cheatsheet-sections h2 {
text-transform: uppercase;
letter-spacing: .1em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment