Skip to content

Instantly share code, notes, and snippets.

@calebgrove
Last active October 18, 2021 18:35
Show Gist options
  • Save calebgrove/0bc43489da61676e85c924b794bda980 to your computer and use it in GitHub Desktop.
Save calebgrove/0bc43489da61676e85c924b794bda980 to your computer and use it in GitHub Desktop.
Kirby 3 Docs Dark Mode
/* ==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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment