Kirby 3 Reference Dark Mode CSS

README.md

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.

Kirby Reference Dark Mode.user.css

/* ==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;
	}
}