Kirby 3 Docs Dark Mode

README.md

Find on Userstyles

Kirby 3 Docs Dark Mode.user.css

/* ==UserStyle==
@name			Kirby 3 Docs Dark Mode
@author			Caleb Grove
@version		1.0.0
@namespace		cascadea-cg
@preprocessor	default
==/UserStyle== */

@-moz-document url-prefix("https://getkirby.com/docs/")
{
	/* COLORS */
	
	:root {
		--color-backdrop: rgba(0, 0, 0, .6);
		--color-black: #EBEBEB;
		--color-light: var(--color-gray-200);
		--color-white: #1A1A1A;
		--color-gray-900: #f7f7f7;
		--color-gray-800: #efefef;
		--color-gray-700: #ddd;
		--color-gray-600: #ccc;
		--color-gray-500: #999;
		--color-gray-400: #777;
		--color-gray-300: #595959;
		--color-gray-200: #3e3e3e;
		--color-gray-100: #292929;
	
		--prose-code-bg: hsla(0, 0, 0, 1);
		--prose-pre-bg: var(--color-white);
		--prose-color-text: var(--color-gray-600);
		--prose-color-highlight: var(--color-black);
		
		--color-aqua-900: #effafb;
		--color-aqua-800: #def5f7;
		--color-aqua-700: #c2edf0;
		--color-aqua-600: #a1e4e8;
		--color-aqua-500: #52d9e0;
		--color-aqua-400: #00c4ce;
		--color-aqua-300: #00aab2;
		--color-aqua-200: #088b91;
		--color-aqua-100: #006266;
		--color-blue-900: #f0f7ff;
		--color-blue-800: #e5f1ff;
		--color-blue-700: #cce3ff;
		--color-blue-600: #b3d4ff;
		--color-blue-500: #75b1ff;
		--color-blue-400: #4093ff;
		--color-blue-300: #1371ec;
		--color-blue-200: #0f5abd;
		--color-blue-100: #004299;
		--color-green-900: #f7fae5;
		--color-green-800: #eef5c7;
		--color-green-700: #e8f1b1;
		--color-green-600: #dae981;
		--color-green-500: #cfe25a;
		--color-green-400: #b9d700;
		--color-green-300: #9bb500;
		--color-green-200: #7e9108;
		--color-green-100: #586600;
		--color-orange-900: #fff5eb;
		--color-orange-800: #ffe6cc;
		--color-orange-700: #ffd9b3;
		--color-orange-600: #ffc48a;
		--color-orange-500: #ffab57;
		--color-orange-400: #ff9326;
		--color-orange-300: #e57300;
		--color-orange-200: #c2660a;
		--color-orange-100: #804000;
		--color-pink-900: #ffeefa;
		--color-pink-800: #ffddf6;
		--color-pink-700: #febeed;
		--color-pink-600: #fe98e2;
		--color-pink-500: #ff71d7;
		--color-pink-400: #ff4ccd;
		--color-pink-300: #ec17b1;
		--color-pink-200: #bd0f8c;
		--color-pink-100: #8e0067;
		--color-purple-900: #f8f0ff;
		--color-purple-800: #f4e5ff;
		--color-purple-700: #e8ccff;
		--color-purple-600: #ddb3ff;
		--color-purple-500: #c070ff;
		--color-purple-400: #a93cff;
		--color-purple-300: #8d0df2;
		--color-purple-200: #710ac2;
		--color-purple-100: #509;
		--color-red-900: #fff0f0;
		--color-red-800: #ffe5e6;
		--color-red-700: #fcc;
		--color-red-600: #ffb3b3;
		--color-red-500: #ff8080;
		--color-red-400: #fe4c4c;
		--color-red-300: #e51a1a;
		--color-red-200: #b81414;
		--color-red-100: maroon;
		--color-yellow-900: #fef8e2;
		--color-yellow-800: #fcefc0;
		--color-yellow-700: #fbe9a8;
		--color-yellow-600: #f9e086;
		--color-yellow-500: #f6d355;
		--color-yellow-400: #fdc500;
		--color-yellow-300: #e5b300;
		--color-yellow-200: #c29a0a;
		--color-yellow-100: #806400;
		--color-dark: #313740
	}
	
	/* RULES */
	
	html {
		background: var(--color-gray-100) !important;
		color: var(--color-gray-700);
	}
	
	.search-input input {
		color: var(--color-black);
	}
	
	figure.image img {
		filter: brightness(85%);
	}
	
	svg *[stroke*="#"] {
		stroke: #fff;
	}
	
	svg *[fill*="#"] {
		fill: #fff;
	}
}