Difference between revisions of "User:Maxcodes/common.css"

Explain xkcd: It's 'cause you're dumb.
Jump to: navigation, search
(Storing variables in here, styles in the skin css)
(all vars and macchiato dark)
 
Line 8: Line 8:
  
 
:root {
 
:root {
−
   --ctp-rosewater: #dc8a78;
+
   --ctp-rosewater: var(--ctp-latte-rosewater);
−
   --ctp-flamingo: #dd7878;
+
  --ctp-flamingo: var(--ctp-latte-flamingo);
−
   --ctp-pink: #ea76cb;
+
  --ctp-pink: var(--ctp-latte-pink);
−
   --ctp-mauve: #8839ef;
+
  --ctp-mauve: var(--ctp-latte-mauve);
−
   --ctp-red: #d20f39;
+
  --ctp-red: var(--ctp-latte-red);
−
   --ctp-maroon: #e64553;
+
  --ctp-maroon: var(--ctp-latte-maroon);
−
   --ctp-peach: #fe640b;
+
  --ctp-peach: var(--ctp-latte-peach);
−
   --ctp-yellow: #df8e1d;
+
  --ctp-yellow: var(--ctp-latte-yellow);
−
   --ctp-green: #40a02b;
+
  --ctp-green: var(--ctp-latte-green);
−
   --ctp-teal: #179299;
+
  --ctp-teal: var(--ctp-latte-teal);
−
   --ctp-sky: #04a5e5;
+
  --ctp-sky: var(--ctp-latte-sky);
−
   --ctp-sapphire: #209fb5;
+
  --ctp-sapphire: var(--ctp-latte-sapphire);
−
   --ctp-blue: #1e66f5;
+
  --ctp-blue: var(--ctp-latte-blue);
−
   --ctp-lavender: #7287fd;
+
  --ctp-lavender: var(--ctp-latte-lavender);
−
   --ctp-text: #4c4f69;
+
  --ctp-text: var(--ctp-latte-text);
−
   --ctp-subtext-1: #5c5f77;
+
  --ctp-subtext-1: var(--ctp-latte-subtext1);
−
   --ctp-subtext-0: #6c6f85;
+
  --ctp-subtext-0: var(--ctp-latte-subtext0);
−
   --ctp-overlay-2: #7c7f93;
+
  --ctp-overlay-2: var(--ctp-latte-overlay2);
−
   --ctp-overlay-1: #8c8fa1;
+
  --ctp-overlay-1: var(--ctp-latte-overlay1);
−
   --ctp-overlay-0: #9ca0b0;
+
  --ctp-overlay-0: var(--ctp-latte-overlay0);
−
   --ctp-surface-2: #acb0be;
+
  --ctp-surface-2: var(--ctp-latte-surface2);
−
   --ctp-surface-1: #bcc0cc;
+
  --ctp-surface-1: var(--ctp-latte-surface1);
−
   --ctp-surface-0: #ccd0da;
+
  --ctp-surface-0: var(--ctp-latte-surface0);
−
   --ctp-base: #eff1f5;
+
  --ctp-base: var(--ctp-latte-base);
−
   --ctp-mantle: #e6e9ef;
+
  --ctp-mantle: var(--ctp-latte-mantle);
−
   --ctp-crust: #dce0e8;
+
  --ctp-crust: var(--ctp-latte-crust);
 +
}
 +
 
 +
@media (prefers-color-scheme: dark) {
 +
  :root {
 +
    --ctp-rosewater: var(--ctp-macchiato-rosewater);
 +
    --ctp-flamingo: var(--ctp-macchiato-flamingo);
 +
    --ctp-pink: var(--ctp-macchiato-pink);
 +
    --ctp-mauve: var(--ctp-macchiato-mauve);
 +
    --ctp-red: var(--ctp-macchiato-red);
 +
    --ctp-maroon: var(--ctp-macchiato-maroon);
 +
    --ctp-peach: var(--ctp-macchiato-peach);
 +
    --ctp-yellow: var(--ctp-macchiato-yellow);
 +
    --ctp-green: var(--ctp-macchiato-green);
 +
    --ctp-teal: var(--ctp-macchiato-teal);
 +
    --ctp-sky: var(--ctp-macchiato-sky);
 +
    --ctp-sapphire: var(--ctp-macchiato-sapphire);
 +
    --ctp-blue: var(--ctp-macchiato-blue);
 +
    --ctp-lavender: var(--ctp-macchiato-lavender);
 +
    --ctp-text: var(--ctp-macchiato-text);
 +
    --ctp-subtext-1: var(--ctp-macchiato-subtext1);
 +
    --ctp-subtext-0: var(--ctp-macchiato-subtext0);
 +
    --ctp-overlay-2: var(--ctp-macchiato-overlay2);
 +
    --ctp-overlay-1: var(--ctp-macchiato-overlay1);
 +
    --ctp-overlay-0: var(--ctp-macchiato-overlay0);
 +
    --ctp-surface-2: var(--ctp-macchiato-surface2);
 +
    --ctp-surface-1: var(--ctp-macchiato-surface1);
 +
    --ctp-surface-0: var(--ctp-macchiato-surface0);
 +
    --ctp-base: var(--ctp-macchiato-base);
 +
    --ctp-mantle: var(--ctp-macchiato-mantle);
 +
    --ctp-crust: var(--ctp-macchiato-crust);
 +
  }
 +
}
 +
 
 +
:root {
 +
  --ctp-latte-rosewater: #dc8a78;
 +
   --ctp-latte-rosewater-rgb: 220 138 120;
 +
  --ctp-latte-rosewater-hsl: 10.8 58.824% 66.667%;
 +
  --ctp-latte-flamingo: #dd7878;
 +
   --ctp-latte-flamingo-rgb: 221 120 120;
 +
  --ctp-latte-flamingo-hsl: 0 59.763% 66.863%;
 +
  --ctp-latte-pink: #ea76cb;
 +
   --ctp-latte-pink-rgb: 234 118 203;
 +
  --ctp-latte-pink-hsl: 316.034 73.418% 69.02%;
 +
  --ctp-latte-mauve: #8839ef;
 +
   --ctp-latte-mauve-rgb: 136 57 239;
 +
  --ctp-latte-mauve-hsl: 266.044 85.047% 58.039%;
 +
  --ctp-latte-red: #d20f39;
 +
   --ctp-latte-red-rgb: 210 15 57;
 +
  --ctp-latte-red-hsl: 347.077 86.667% 44.118%;
 +
  --ctp-latte-maroon: #e64553;
 +
   --ctp-latte-maroon-rgb: 230 69 83;
 +
  --ctp-latte-maroon-hsl: 354.783 76.303% 58.627%;
 +
  --ctp-latte-peach: #fe640b;
 +
   --ctp-latte-peach-rgb: 254 100 11;
 +
  --ctp-latte-peach-hsl: 21.975 99.184% 51.961%;
 +
  --ctp-latte-yellow: #df8e1d;
 +
   --ctp-latte-yellow-rgb: 223 142 29;
 +
  --ctp-latte-yellow-hsl: 34.948 76.984% 49.412%;
 +
  --ctp-latte-green: #40a02b;
 +
   --ctp-latte-green-rgb: 64 160 43;
 +
  --ctp-latte-green-hsl: 109.231 57.635% 39.804%;
 +
  --ctp-latte-teal: #179299;
 +
   --ctp-latte-teal-rgb: 23 146 153;
 +
  --ctp-latte-teal-hsl: 183.231 73.864% 34.51%;
 +
  --ctp-latte-sky: #04a5e5;
 +
   --ctp-latte-sky-rgb: 4 165 229;
 +
  --ctp-latte-sky-hsl: 197.067 96.567% 45.686%;
 +
  --ctp-latte-sapphire: #209fb5;
 +
   --ctp-latte-sapphire-rgb: 32 159 181;
 +
  --ctp-latte-sapphire-hsl: 188.859 69.953% 41.765%;
 +
  --ctp-latte-blue: #1e66f5;
 +
   --ctp-latte-blue-rgb: 30 102 245;
 +
  --ctp-latte-blue-hsl: 219.907 91.489% 53.922%;
 +
  --ctp-latte-lavender: #7287fd;
 +
   --ctp-latte-lavender-rgb: 114 135 253;
 +
  --ctp-latte-lavender-hsl: 230.935 97.203% 71.961%;
 +
  --ctp-latte-text: #4c4f69;
 +
   --ctp-latte-text-rgb: 76 79 105;
 +
  --ctp-latte-text-hsl: 233.793 16.022% 35.49%;
 +
  --ctp-latte-subtext1: #5c5f77;
 +
   --ctp-latte-subtext1-rgb: 92 95 119;
 +
  --ctp-latte-subtext1-hsl: 233.333 12.796% 41.373%;
 +
  --ctp-latte-subtext0: #6c6f85;
 +
   --ctp-latte-subtext0-rgb: 108 111 133;
 +
  --ctp-latte-subtext0-hsl: 232.8 10.373% 47.255%;
 +
  --ctp-latte-overlay2: #7c7f93;
 +
   --ctp-latte-overlay2-rgb: 124 127 147;
 +
  --ctp-latte-overlay2-hsl: 232.174 9.623% 53.137%;
 +
  --ctp-latte-overlay1: #8c8fa1;
 +
   --ctp-latte-overlay1-rgb: 140 143 161;
 +
  --ctp-latte-overlay1-hsl: 231.429 10.048% 59.02%;
 +
  --ctp-latte-overlay0: #9ca0b0;
 +
   --ctp-latte-overlay0-rgb: 156 160 176;
 +
  --ctp-latte-overlay0-hsl: 228 11.236% 65.098%;
 +
  --ctp-latte-surface2: #acb0be;
 +
   --ctp-latte-surface2-rgb: 172 176 190;
 +
  --ctp-latte-surface2-hsl: 226.667 12.162% 70.98%;
 +
  --ctp-latte-surface1: #bcc0cc;
 +
   --ctp-latte-surface1-rgb: 188 192 204;
 +
  --ctp-latte-surface1-hsl: 225 13.559% 76.863%;
 +
  --ctp-latte-surface0: #ccd0da;
 +
   --ctp-latte-surface0-rgb: 204 208 218;
 +
  --ctp-latte-surface0-hsl: 222.857 15.909% 82.745%;
 +
  --ctp-latte-base: #eff1f5;
 +
   --ctp-latte-base-rgb: 239 241 245;
 +
  --ctp-latte-base-hsl: 220 23.077% 94.902%;
 +
  --ctp-latte-mantle: #e6e9ef;
 +
   --ctp-latte-mantle-rgb: 230 233 239;
 +
  --ctp-latte-mantle-hsl: 220 21.951% 91.961%;
 +
  --ctp-latte-crust: #dce0e8;
 +
  --ctp-latte-crust-rgb: 220 224 232;
 +
  --ctp-latte-crust-hsl: 220 20.69% 88.627%;
 +
}
 +
 
 +
:root {
 +
  --ctp-frappe-rosewater: #f2d5cf;
 +
  --ctp-frappe-rosewater-rgb: 242 213 207;
 +
  --ctp-frappe-rosewater-hsl: 10.286 57.377% 88.039%;
 +
  --ctp-frappe-flamingo: #eebebe;
 +
  --ctp-frappe-flamingo-rgb: 238 190 190;
 +
  --ctp-frappe-flamingo-hsl: 0 58.537% 83.922%;
 +
  --ctp-frappe-pink: #f4b8e4;
 +
  --ctp-frappe-pink-rgb: 244 184 228;
 +
  --ctp-frappe-pink-hsl: 316 73.171% 83.922%;
 +
  --ctp-frappe-mauve: #ca9ee6;
 +
  --ctp-frappe-mauve-rgb: 202 158 230;
 +
  --ctp-frappe-mauve-hsl: 276.667 59.016% 76.078%;
 +
  --ctp-frappe-red: #e78284;
 +
  --ctp-frappe-red-rgb: 231 130 132;
 +
  --ctp-frappe-red-hsl: 358.812 67.785% 70.784%;
 +
  --ctp-frappe-maroon: #ea999c;
 +
  --ctp-frappe-maroon-rgb: 234 153 156;
 +
  --ctp-frappe-maroon-hsl: 357.778 65.854% 75.882%;
 +
  --ctp-frappe-peach: #ef9f76;
 +
  --ctp-frappe-peach-rgb: 239 159 118;
 +
  --ctp-frappe-peach-hsl: 20.331 79.085% 70%;
 +
  --ctp-frappe-yellow: #e5c890;
 +
  --ctp-frappe-yellow-rgb: 229 200 144;
 +
  --ctp-frappe-yellow-hsl: 39.529 62.044% 73.137%;
 +
  --ctp-frappe-green: #a6d189;
 +
  --ctp-frappe-green-rgb: 166 209 137;
 +
  --ctp-frappe-green-hsl: 95.833 43.902% 67.843%;
 +
  --ctp-frappe-teal: #81c8be;
 +
  --ctp-frappe-teal-rgb: 129 200 190;
 +
  --ctp-frappe-teal-hsl: 171.549 39.227% 64.51%;
 +
  --ctp-frappe-sky: #99d1db;
 +
  --ctp-frappe-sky-rgb: 153 209 219;
 +
  --ctp-frappe-sky-hsl: 189.091 47.826% 72.941%;
 +
  --ctp-frappe-sapphire: #85c1dc;
 +
  --ctp-frappe-sapphire-rgb: 133 193 220;
 +
  --ctp-frappe-sapphire-hsl: 198.621 55.414% 69.216%;
 +
  --ctp-frappe-blue: #8caaee;
 +
  --ctp-frappe-blue-rgb: 140 170 238;
 +
  --ctp-frappe-blue-hsl: 221.633 74.242% 74.118%;
 +
  --ctp-frappe-lavender: #babbf1;
 +
  --ctp-frappe-lavender-rgb: 186 187 241;
 +
  --ctp-frappe-lavender-hsl: 238.909 66.265% 83.725%;
 +
  --ctp-frappe-text: #c6d0f5;
 +
  --ctp-frappe-text-rgb: 198 208 245;
 +
  --ctp-frappe-text-hsl: 227.234 70.149% 86.863%;
 +
  --ctp-frappe-subtext1: #b5bfe2;
 +
  --ctp-frappe-subtext1-rgb: 181 191 226;
 +
  --ctp-frappe-subtext1-hsl: 226.667 43.689% 79.804%;
 +
  --ctp-frappe-subtext0: #a5adce;
 +
  --ctp-frappe-subtext0-rgb: 165 173 206;
 +
  --ctp-frappe-subtext0-hsl: 228.293 29.496% 72.745%;
 +
  --ctp-frappe-overlay2: #949cbb;
 +
  --ctp-frappe-overlay2-rgb: 148 156 187;
 +
  --ctp-frappe-overlay2-hsl: 227.692 22.286% 65.686%;
 +
  --ctp-frappe-overlay1: #838ba7;
 +
  --ctp-frappe-overlay1-rgb: 131 139 167;
 +
  --ctp-frappe-overlay1-hsl: 226.667 16.981% 58.431%;
 +
  --ctp-frappe-overlay0: #737994;
 +
  --ctp-frappe-overlay0-rgb: 115 121 148;
 +
  --ctp-frappe-overlay0-hsl: 229.091 13.36% 51.569%;
 +
  --ctp-frappe-surface2: #626880;
 +
  --ctp-frappe-surface2-rgb: 98 104 128;
 +
  --ctp-frappe-surface2-hsl: 228 13.274% 44.314%;
 +
  --ctp-frappe-surface1: #51576d;
 +
  --ctp-frappe-surface1-rgb: 81 87 109;
 +
  --ctp-frappe-surface1-hsl: 227.143 14.737% 37.255%;
 +
  --ctp-frappe-surface0: #414559;
 +
  --ctp-frappe-surface0-rgb: 65 69 89;
 +
  --ctp-frappe-surface0-hsl: 230 15.584% 30.196%;
 +
  --ctp-frappe-base: #303446;
 +
  --ctp-frappe-base-rgb: 48 52 70;
 +
  --ctp-frappe-base-hsl: 229.091 18.644% 23.137%;
 +
  --ctp-frappe-mantle: #292c3c;
 +
  --ctp-frappe-mantle-rgb: 41 44 60;
 +
  --ctp-frappe-mantle-hsl: 230.526 18.812% 19.804%;
 +
  --ctp-frappe-crust: #232634;
 +
  --ctp-frappe-crust-rgb: 35 38 52;
 +
  --ctp-frappe-crust-hsl: 229.412 19.54% 17.059%;
 +
}
 +
 
 +
:root {
 +
  --ctp-macchiato-rosewater: #f4dbd6;
 +
  --ctp-macchiato-rosewater-rgb: 244 219 214;
 +
  --ctp-macchiato-rosewater-hsl: 10 57.692% 89.804%;
 +
  --ctp-macchiato-flamingo: #f0c6c6;
 +
  --ctp-macchiato-flamingo-rgb: 240 198 198;
 +
  --ctp-macchiato-flamingo-hsl: 0 58.333% 85.882%;
 +
  --ctp-macchiato-pink: #f5bde6;
 +
  --ctp-macchiato-pink-rgb: 245 189 230;
 +
  --ctp-macchiato-pink-hsl: 316.071 73.684% 85.098%;
 +
  --ctp-macchiato-mauve: #c6a0f6;
 +
  --ctp-macchiato-mauve-rgb: 198 160 246;
 +
  --ctp-macchiato-mauve-hsl: 266.512 82.692% 79.608%;
 +
  --ctp-macchiato-red: #ed8796;
 +
  --ctp-macchiato-red-rgb: 237 135 150;
 +
  --ctp-macchiato-red-hsl: 351.176 73.913% 72.941%;
 +
  --ctp-macchiato-maroon: #ee99a0;
 +
  --ctp-macchiato-maroon-rgb: 238 153 160;
 +
  --ctp-macchiato-maroon-hsl: 355.059 71.429% 76.667%;
 +
  --ctp-macchiato-peach: #f5a97f;
 +
  --ctp-macchiato-peach-rgb: 245 169 127;
 +
  --ctp-macchiato-peach-hsl: 21.356 85.507% 72.941%;
 +
  --ctp-macchiato-yellow: #eed49f;
 +
  --ctp-macchiato-yellow-rgb: 238 212 159;
 +
  --ctp-macchiato-yellow-hsl: 40.253 69.912% 77.843%;
 +
  --ctp-macchiato-green: #a6da95;
 +
  --ctp-macchiato-green-rgb: 166 218 149;
 +
  --ctp-macchiato-green-hsl: 105.217 48.252% 71.961%;
 +
  --ctp-macchiato-teal: #8bd5ca;
 +
  --ctp-macchiato-teal-rgb: 139 213 202;
 +
  --ctp-macchiato-teal-hsl: 171.081 46.835% 69.02%;
 +
  --ctp-macchiato-sky: #91d7e3;
 +
  --ctp-macchiato-sky-rgb: 145 215 227;
 +
  --ctp-macchiato-sky-hsl: 188.78 59.42% 72.941%;
 +
  --ctp-macchiato-sapphire: #7dc4e4;
 +
  --ctp-macchiato-sapphire-rgb: 125 196 228;
 +
  --ctp-macchiato-sapphire-hsl: 198.641 65.605% 69.216%;
 +
  --ctp-macchiato-blue: #8aadf4;
 +
  --ctp-macchiato-blue-rgb: 138 173 244;
 +
  --ctp-macchiato-blue-hsl: 220.189 82.813% 74.902%;
 +
  --ctp-macchiato-lavender: #b7bdf8;
 +
  --ctp-macchiato-lavender-rgb: 183 189 248;
 +
  --ctp-macchiato-lavender-hsl: 234.462 82.278% 84.51%;
 +
  --ctp-macchiato-text: #cad3f5;
 +
  --ctp-macchiato-text-rgb: 202 211 245;
 +
  --ctp-macchiato-text-hsl: 227.442 68.254% 87.647%;
 +
  --ctp-macchiato-subtext1: #b8c0e0;
 +
  --ctp-macchiato-subtext1-rgb: 184 192 224;
 +
  --ctp-macchiato-subtext1-hsl: 228 39.216% 80%;
 +
  --ctp-macchiato-subtext0: #a5adcb;
 +
  --ctp-macchiato-subtext0-rgb: 165 173 203;
 +
  --ctp-macchiato-subtext0-hsl: 227.368 26.761% 72.157%;
 +
  --ctp-macchiato-overlay2: #939ab7;
 +
  --ctp-macchiato-overlay2-rgb: 147 154 183;
 +
  --ctp-macchiato-overlay2-hsl: 228.333 20% 64.706%;
 +
  --ctp-macchiato-overlay1: #8087a2;
 +
  --ctp-macchiato-overlay1-rgb: 128 135 162;
 +
  --ctp-macchiato-overlay1-hsl: 227.647 15.455% 56.863%;
 +
  --ctp-macchiato-overlay0: #6e738d;
 +
  --ctp-macchiato-overlay0-rgb: 110 115 141;
 +
  --ctp-macchiato-overlay0-hsl: 230.323 12.351% 49.216%;
 +
  --ctp-macchiato-surface2: #5b6078;
 +
  --ctp-macchiato-surface2-rgb: 91 96 120;
 +
  --ctp-macchiato-surface2-hsl: 229.655 13.744% 41.373%;
 +
  --ctp-macchiato-surface1: #494d64;
 +
  --ctp-macchiato-surface1-rgb: 73 77 100;
 +
  --ctp-macchiato-surface1-hsl: 231.111 15.607% 33.922%;
 +
  --ctp-macchiato-surface0: #363a4f;
 +
  --ctp-macchiato-surface0-rgb: 54 58 79;
 +
  --ctp-macchiato-surface0-hsl: 230.4 18.797% 26.078%;
 +
  --ctp-macchiato-base: #24273a;
 +
  --ctp-macchiato-base-rgb: 36 39 58;
 +
  --ctp-macchiato-base-hsl: 231.818 23.404% 18.431%;
 +
  --ctp-macchiato-mantle: #1e2030;
 +
  --ctp-macchiato-mantle-rgb: 30 32 48;
 +
  --ctp-macchiato-mantle-hsl: 233.333 23.077% 15.294%;
 +
  --ctp-macchiato-crust: #181926;
 +
  --ctp-macchiato-crust-rgb: 24 25 38;
 +
  --ctp-macchiato-crust-hsl: 235.714 22.581% 12.157%;
 +
}
 +
 
 +
:root {
 +
  --ctp-mocha-rosewater: #f5e0dc;
 +
  --ctp-mocha-rosewater-rgb: 245 224 220;
 +
  --ctp-mocha-rosewater-hsl: 9.6 55.556% 91.176%;
 +
  --ctp-mocha-flamingo: #f2cdcd;
 +
  --ctp-mocha-flamingo-rgb: 242 205 205;
 +
  --ctp-mocha-flamingo-hsl: 0 58.73% 87.647%;
 +
  --ctp-mocha-pink: #f5c2e7;
 +
  --ctp-mocha-pink-rgb: 245 194 231;
 +
  --ctp-mocha-pink-hsl: 316.471 71.831% 86.078%;
 +
  --ctp-mocha-mauve: #cba6f7;
 +
  --ctp-mocha-mauve-rgb: 203 166 247;
 +
  --ctp-mocha-mauve-hsl: 267.407 83.505% 80.98%;
 +
  --ctp-mocha-red: #f38ba8;
 +
  --ctp-mocha-red-rgb: 243 139 168;
 +
  --ctp-mocha-red-hsl: 343.269 81.25% 74.902%;
 +
  --ctp-mocha-maroon: #eba0ac;
 +
  --ctp-mocha-maroon-rgb: 235 160 172;
 +
  --ctp-mocha-maroon-hsl: 350.4 65.217% 77.451%;
 +
  --ctp-mocha-peach: #fab387;
 +
  --ctp-mocha-peach-rgb: 250 179 135;
 +
  --ctp-mocha-peach-hsl: 22.957 92% 75.49%;
 +
  --ctp-mocha-yellow: #f9e2af;
 +
  --ctp-mocha-yellow-rgb: 249 226 175;
 +
  --ctp-mocha-yellow-hsl: 41.351 86.047% 83.137%;
 +
  --ctp-mocha-green: #a6e3a1;
 +
  --ctp-mocha-green-rgb: 166 227 161;
 +
  --ctp-mocha-green-hsl: 115.455 54.098% 76.078%;
 +
  --ctp-mocha-teal: #94e2d5;
 +
  --ctp-mocha-teal-rgb: 148 226 213;
 +
  --ctp-mocha-teal-hsl: 170 57.353% 73.333%;
 +
  --ctp-mocha-sky: #89dceb;
 +
  --ctp-mocha-sky-rgb: 137 220 235;
 +
  --ctp-mocha-sky-hsl: 189.184 71.014% 72.941%;
 +
  --ctp-mocha-sapphire: #74c7ec;
 +
  --ctp-mocha-sapphire-rgb: 116 199 236;
 +
  --ctp-mocha-sapphire-hsl: 198.5 75.949% 69.02%;
 +
  --ctp-mocha-blue: #89b4fa;
 +
  --ctp-mocha-blue-rgb: 137 180 250;
 +
  --ctp-mocha-blue-hsl: 217.168 91.87% 75.882%;
 +
  --ctp-mocha-lavender: #b4befe;
 +
  --ctp-mocha-lavender-rgb: 180 190 254;
 +
  --ctp-mocha-lavender-hsl: 231.892 97.368% 85.098%;
 +
  --ctp-mocha-text: #cdd6f4;
 +
  --ctp-mocha-text-rgb: 205 214 244;
 +
  --ctp-mocha-text-hsl: 226.154 63.934% 88.039%;
 +
  --ctp-mocha-subtext1: #bac2de;
 +
  --ctp-mocha-subtext1-rgb: 186 194 222;
 +
  --ctp-mocha-subtext1-hsl: 226.667 35.294% 80%;
 +
  --ctp-mocha-subtext0: #a6adc8;
 +
  --ctp-mocha-subtext0-rgb: 166 173 200;
 +
  --ctp-mocha-subtext0-hsl: 227.647 23.611% 71.765%;
 +
  --ctp-mocha-overlay2: #9399b2;
 +
  --ctp-mocha-overlay2-rgb: 147 153 178;
 +
  --ctp-mocha-overlay2-hsl: 228.387 16.757% 63.725%;
 +
  --ctp-mocha-overlay1: #7f849c;
 +
  --ctp-mocha-overlay1-rgb: 127 132 156;
 +
  --ctp-mocha-overlay1-hsl: 229.655 12.775% 55.49%;
 +
  --ctp-mocha-overlay0: #6c7086;
 +
  --ctp-mocha-overlay0-rgb: 108 112 134;
 +
  --ctp-mocha-overlay0-hsl: 230.769 10.744% 47.451%;
 +
  --ctp-mocha-surface2: #585b70;
 +
  --ctp-mocha-surface2-rgb: 88 91 112;
 +
  --ctp-mocha-surface2-hsl: 232.5 12% 39.216%;
 +
  --ctp-mocha-surface1: #45475a;
 +
  --ctp-mocha-surface1-rgb: 69 71 90;
 +
  --ctp-mocha-surface1-hsl: 234.286 13.208% 31.176%;
 +
  --ctp-mocha-surface0: #313244;
 +
  --ctp-mocha-surface0-rgb: 49 50 68;
 +
  --ctp-mocha-surface0-hsl: 236.842 16.239% 22.941%;
 +
  --ctp-mocha-base: #1e1e2e;
 +
  --ctp-mocha-base-rgb: 30 30 46;
 +
  --ctp-mocha-base-hsl: 240 21.053% 14.902%;
 +
  --ctp-mocha-mantle: #181825;
 +
  --ctp-mocha-mantle-rgb: 24 24 37;
 +
  --ctp-mocha-mantle-hsl: 240 21.311% 11.961%;
 +
  --ctp-mocha-crust: #11111b;
 +
  --ctp-mocha-crust-rgb: 17 17 27;
 +
  --ctp-mocha-crust-hsl: 240 22.727% 8.627%;
 
}
 
}

Latest revision as of 04:16, 23 February 2026

/*
Styles adapted from Catppuccin @catpuccin.com
Style guidelines here: github.com/catppuccin/catppuccin/blob/main/docs/style-guide.md

Light theme used: Latte
Dark theme used: Macchiato
*/

:root {
  --ctp-rosewater: var(--ctp-latte-rosewater);
  --ctp-flamingo: var(--ctp-latte-flamingo);
  --ctp-pink: var(--ctp-latte-pink);
  --ctp-mauve: var(--ctp-latte-mauve);
  --ctp-red: var(--ctp-latte-red);
  --ctp-maroon: var(--ctp-latte-maroon);
  --ctp-peach: var(--ctp-latte-peach);
  --ctp-yellow: var(--ctp-latte-yellow);
  --ctp-green: var(--ctp-latte-green);
  --ctp-teal: var(--ctp-latte-teal);
  --ctp-sky: var(--ctp-latte-sky);
  --ctp-sapphire: var(--ctp-latte-sapphire);
  --ctp-blue: var(--ctp-latte-blue);
  --ctp-lavender: var(--ctp-latte-lavender);
  --ctp-text: var(--ctp-latte-text);
  --ctp-subtext-1: var(--ctp-latte-subtext1);
  --ctp-subtext-0: var(--ctp-latte-subtext0);
  --ctp-overlay-2: var(--ctp-latte-overlay2);
  --ctp-overlay-1: var(--ctp-latte-overlay1);
  --ctp-overlay-0: var(--ctp-latte-overlay0);
  --ctp-surface-2: var(--ctp-latte-surface2);
  --ctp-surface-1: var(--ctp-latte-surface1);
  --ctp-surface-0: var(--ctp-latte-surface0);
  --ctp-base: var(--ctp-latte-base);
  --ctp-mantle: var(--ctp-latte-mantle);
  --ctp-crust: var(--ctp-latte-crust);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ctp-rosewater: var(--ctp-macchiato-rosewater);
    --ctp-flamingo: var(--ctp-macchiato-flamingo);
    --ctp-pink: var(--ctp-macchiato-pink);
    --ctp-mauve: var(--ctp-macchiato-mauve);
    --ctp-red: var(--ctp-macchiato-red);
    --ctp-maroon: var(--ctp-macchiato-maroon);
    --ctp-peach: var(--ctp-macchiato-peach);
    --ctp-yellow: var(--ctp-macchiato-yellow);
    --ctp-green: var(--ctp-macchiato-green);
    --ctp-teal: var(--ctp-macchiato-teal);
    --ctp-sky: var(--ctp-macchiato-sky);
    --ctp-sapphire: var(--ctp-macchiato-sapphire);
    --ctp-blue: var(--ctp-macchiato-blue);
    --ctp-lavender: var(--ctp-macchiato-lavender);
    --ctp-text: var(--ctp-macchiato-text);
    --ctp-subtext-1: var(--ctp-macchiato-subtext1);
    --ctp-subtext-0: var(--ctp-macchiato-subtext0);
    --ctp-overlay-2: var(--ctp-macchiato-overlay2);
    --ctp-overlay-1: var(--ctp-macchiato-overlay1);
    --ctp-overlay-0: var(--ctp-macchiato-overlay0);
    --ctp-surface-2: var(--ctp-macchiato-surface2);
    --ctp-surface-1: var(--ctp-macchiato-surface1);
    --ctp-surface-0: var(--ctp-macchiato-surface0);
    --ctp-base: var(--ctp-macchiato-base);
    --ctp-mantle: var(--ctp-macchiato-mantle);
    --ctp-crust: var(--ctp-macchiato-crust);
  }
}

:root {
  --ctp-latte-rosewater: #dc8a78;
  --ctp-latte-rosewater-rgb: 220 138 120;
  --ctp-latte-rosewater-hsl: 10.8 58.824% 66.667%;
  --ctp-latte-flamingo: #dd7878;
  --ctp-latte-flamingo-rgb: 221 120 120;
  --ctp-latte-flamingo-hsl: 0 59.763% 66.863%;
  --ctp-latte-pink: #ea76cb;
  --ctp-latte-pink-rgb: 234 118 203;
  --ctp-latte-pink-hsl: 316.034 73.418% 69.02%;
  --ctp-latte-mauve: #8839ef;
  --ctp-latte-mauve-rgb: 136 57 239;
  --ctp-latte-mauve-hsl: 266.044 85.047% 58.039%;
  --ctp-latte-red: #d20f39;
  --ctp-latte-red-rgb: 210 15 57;
  --ctp-latte-red-hsl: 347.077 86.667% 44.118%;
  --ctp-latte-maroon: #e64553;
  --ctp-latte-maroon-rgb: 230 69 83;
  --ctp-latte-maroon-hsl: 354.783 76.303% 58.627%;
  --ctp-latte-peach: #fe640b;
  --ctp-latte-peach-rgb: 254 100 11;
  --ctp-latte-peach-hsl: 21.975 99.184% 51.961%;
  --ctp-latte-yellow: #df8e1d;
  --ctp-latte-yellow-rgb: 223 142 29;
  --ctp-latte-yellow-hsl: 34.948 76.984% 49.412%;
  --ctp-latte-green: #40a02b;
  --ctp-latte-green-rgb: 64 160 43;
  --ctp-latte-green-hsl: 109.231 57.635% 39.804%;
  --ctp-latte-teal: #179299;
  --ctp-latte-teal-rgb: 23 146 153;
  --ctp-latte-teal-hsl: 183.231 73.864% 34.51%;
  --ctp-latte-sky: #04a5e5;
  --ctp-latte-sky-rgb: 4 165 229;
  --ctp-latte-sky-hsl: 197.067 96.567% 45.686%;
  --ctp-latte-sapphire: #209fb5;
  --ctp-latte-sapphire-rgb: 32 159 181;
  --ctp-latte-sapphire-hsl: 188.859 69.953% 41.765%;
  --ctp-latte-blue: #1e66f5;
  --ctp-latte-blue-rgb: 30 102 245;
  --ctp-latte-blue-hsl: 219.907 91.489% 53.922%;
  --ctp-latte-lavender: #7287fd;
  --ctp-latte-lavender-rgb: 114 135 253;
  --ctp-latte-lavender-hsl: 230.935 97.203% 71.961%;
  --ctp-latte-text: #4c4f69;
  --ctp-latte-text-rgb: 76 79 105;
  --ctp-latte-text-hsl: 233.793 16.022% 35.49%;
  --ctp-latte-subtext1: #5c5f77;
  --ctp-latte-subtext1-rgb: 92 95 119;
  --ctp-latte-subtext1-hsl: 233.333 12.796% 41.373%;
  --ctp-latte-subtext0: #6c6f85;
  --ctp-latte-subtext0-rgb: 108 111 133;
  --ctp-latte-subtext0-hsl: 232.8 10.373% 47.255%;
  --ctp-latte-overlay2: #7c7f93;
  --ctp-latte-overlay2-rgb: 124 127 147;
  --ctp-latte-overlay2-hsl: 232.174 9.623% 53.137%;
  --ctp-latte-overlay1: #8c8fa1;
  --ctp-latte-overlay1-rgb: 140 143 161;
  --ctp-latte-overlay1-hsl: 231.429 10.048% 59.02%;
  --ctp-latte-overlay0: #9ca0b0;
  --ctp-latte-overlay0-rgb: 156 160 176;
  --ctp-latte-overlay0-hsl: 228 11.236% 65.098%;
  --ctp-latte-surface2: #acb0be;
  --ctp-latte-surface2-rgb: 172 176 190;
  --ctp-latte-surface2-hsl: 226.667 12.162% 70.98%;
  --ctp-latte-surface1: #bcc0cc;
  --ctp-latte-surface1-rgb: 188 192 204;
  --ctp-latte-surface1-hsl: 225 13.559% 76.863%;
  --ctp-latte-surface0: #ccd0da;
  --ctp-latte-surface0-rgb: 204 208 218;
  --ctp-latte-surface0-hsl: 222.857 15.909% 82.745%;
  --ctp-latte-base: #eff1f5;
  --ctp-latte-base-rgb: 239 241 245;
  --ctp-latte-base-hsl: 220 23.077% 94.902%;
  --ctp-latte-mantle: #e6e9ef;
  --ctp-latte-mantle-rgb: 230 233 239;
  --ctp-latte-mantle-hsl: 220 21.951% 91.961%;
  --ctp-latte-crust: #dce0e8;
  --ctp-latte-crust-rgb: 220 224 232;
  --ctp-latte-crust-hsl: 220 20.69% 88.627%;
}

:root {
  --ctp-frappe-rosewater: #f2d5cf;
  --ctp-frappe-rosewater-rgb: 242 213 207;
  --ctp-frappe-rosewater-hsl: 10.286 57.377% 88.039%;
  --ctp-frappe-flamingo: #eebebe;
  --ctp-frappe-flamingo-rgb: 238 190 190;
  --ctp-frappe-flamingo-hsl: 0 58.537% 83.922%;
  --ctp-frappe-pink: #f4b8e4;
  --ctp-frappe-pink-rgb: 244 184 228;
  --ctp-frappe-pink-hsl: 316 73.171% 83.922%;
  --ctp-frappe-mauve: #ca9ee6;
  --ctp-frappe-mauve-rgb: 202 158 230;
  --ctp-frappe-mauve-hsl: 276.667 59.016% 76.078%;
  --ctp-frappe-red: #e78284;
  --ctp-frappe-red-rgb: 231 130 132;
  --ctp-frappe-red-hsl: 358.812 67.785% 70.784%;
  --ctp-frappe-maroon: #ea999c;
  --ctp-frappe-maroon-rgb: 234 153 156;
  --ctp-frappe-maroon-hsl: 357.778 65.854% 75.882%;
  --ctp-frappe-peach: #ef9f76;
  --ctp-frappe-peach-rgb: 239 159 118;
  --ctp-frappe-peach-hsl: 20.331 79.085% 70%;
  --ctp-frappe-yellow: #e5c890;
  --ctp-frappe-yellow-rgb: 229 200 144;
  --ctp-frappe-yellow-hsl: 39.529 62.044% 73.137%;
  --ctp-frappe-green: #a6d189;
  --ctp-frappe-green-rgb: 166 209 137;
  --ctp-frappe-green-hsl: 95.833 43.902% 67.843%;
  --ctp-frappe-teal: #81c8be;
  --ctp-frappe-teal-rgb: 129 200 190;
  --ctp-frappe-teal-hsl: 171.549 39.227% 64.51%;
  --ctp-frappe-sky: #99d1db;
  --ctp-frappe-sky-rgb: 153 209 219;
  --ctp-frappe-sky-hsl: 189.091 47.826% 72.941%;
  --ctp-frappe-sapphire: #85c1dc;
  --ctp-frappe-sapphire-rgb: 133 193 220;
  --ctp-frappe-sapphire-hsl: 198.621 55.414% 69.216%;
  --ctp-frappe-blue: #8caaee;
  --ctp-frappe-blue-rgb: 140 170 238;
  --ctp-frappe-blue-hsl: 221.633 74.242% 74.118%;
  --ctp-frappe-lavender: #babbf1;
  --ctp-frappe-lavender-rgb: 186 187 241;
  --ctp-frappe-lavender-hsl: 238.909 66.265% 83.725%;
  --ctp-frappe-text: #c6d0f5;
  --ctp-frappe-text-rgb: 198 208 245;
  --ctp-frappe-text-hsl: 227.234 70.149% 86.863%;
  --ctp-frappe-subtext1: #b5bfe2;
  --ctp-frappe-subtext1-rgb: 181 191 226;
  --ctp-frappe-subtext1-hsl: 226.667 43.689% 79.804%;
  --ctp-frappe-subtext0: #a5adce;
  --ctp-frappe-subtext0-rgb: 165 173 206;
  --ctp-frappe-subtext0-hsl: 228.293 29.496% 72.745%;
  --ctp-frappe-overlay2: #949cbb;
  --ctp-frappe-overlay2-rgb: 148 156 187;
  --ctp-frappe-overlay2-hsl: 227.692 22.286% 65.686%;
  --ctp-frappe-overlay1: #838ba7;
  --ctp-frappe-overlay1-rgb: 131 139 167;
  --ctp-frappe-overlay1-hsl: 226.667 16.981% 58.431%;
  --ctp-frappe-overlay0: #737994;
  --ctp-frappe-overlay0-rgb: 115 121 148;
  --ctp-frappe-overlay0-hsl: 229.091 13.36% 51.569%;
  --ctp-frappe-surface2: #626880;
  --ctp-frappe-surface2-rgb: 98 104 128;
  --ctp-frappe-surface2-hsl: 228 13.274% 44.314%;
  --ctp-frappe-surface1: #51576d;
  --ctp-frappe-surface1-rgb: 81 87 109;
  --ctp-frappe-surface1-hsl: 227.143 14.737% 37.255%;
  --ctp-frappe-surface0: #414559;
  --ctp-frappe-surface0-rgb: 65 69 89;
  --ctp-frappe-surface0-hsl: 230 15.584% 30.196%;
  --ctp-frappe-base: #303446;
  --ctp-frappe-base-rgb: 48 52 70;
  --ctp-frappe-base-hsl: 229.091 18.644% 23.137%;
  --ctp-frappe-mantle: #292c3c;
  --ctp-frappe-mantle-rgb: 41 44 60;
  --ctp-frappe-mantle-hsl: 230.526 18.812% 19.804%;
  --ctp-frappe-crust: #232634;
  --ctp-frappe-crust-rgb: 35 38 52;
  --ctp-frappe-crust-hsl: 229.412 19.54% 17.059%;
}

:root {
  --ctp-macchiato-rosewater: #f4dbd6;
  --ctp-macchiato-rosewater-rgb: 244 219 214;
  --ctp-macchiato-rosewater-hsl: 10 57.692% 89.804%;
  --ctp-macchiato-flamingo: #f0c6c6;
  --ctp-macchiato-flamingo-rgb: 240 198 198;
  --ctp-macchiato-flamingo-hsl: 0 58.333% 85.882%;
  --ctp-macchiato-pink: #f5bde6;
  --ctp-macchiato-pink-rgb: 245 189 230;
  --ctp-macchiato-pink-hsl: 316.071 73.684% 85.098%;
  --ctp-macchiato-mauve: #c6a0f6;
  --ctp-macchiato-mauve-rgb: 198 160 246;
  --ctp-macchiato-mauve-hsl: 266.512 82.692% 79.608%;
  --ctp-macchiato-red: #ed8796;
  --ctp-macchiato-red-rgb: 237 135 150;
  --ctp-macchiato-red-hsl: 351.176 73.913% 72.941%;
  --ctp-macchiato-maroon: #ee99a0;
  --ctp-macchiato-maroon-rgb: 238 153 160;
  --ctp-macchiato-maroon-hsl: 355.059 71.429% 76.667%;
  --ctp-macchiato-peach: #f5a97f;
  --ctp-macchiato-peach-rgb: 245 169 127;
  --ctp-macchiato-peach-hsl: 21.356 85.507% 72.941%;
  --ctp-macchiato-yellow: #eed49f;
  --ctp-macchiato-yellow-rgb: 238 212 159;
  --ctp-macchiato-yellow-hsl: 40.253 69.912% 77.843%;
  --ctp-macchiato-green: #a6da95;
  --ctp-macchiato-green-rgb: 166 218 149;
  --ctp-macchiato-green-hsl: 105.217 48.252% 71.961%;
  --ctp-macchiato-teal: #8bd5ca;
  --ctp-macchiato-teal-rgb: 139 213 202;
  --ctp-macchiato-teal-hsl: 171.081 46.835% 69.02%;
  --ctp-macchiato-sky: #91d7e3;
  --ctp-macchiato-sky-rgb: 145 215 227;
  --ctp-macchiato-sky-hsl: 188.78 59.42% 72.941%;
  --ctp-macchiato-sapphire: #7dc4e4;
  --ctp-macchiato-sapphire-rgb: 125 196 228;
  --ctp-macchiato-sapphire-hsl: 198.641 65.605% 69.216%;
  --ctp-macchiato-blue: #8aadf4;
  --ctp-macchiato-blue-rgb: 138 173 244;
  --ctp-macchiato-blue-hsl: 220.189 82.813% 74.902%;
  --ctp-macchiato-lavender: #b7bdf8;
  --ctp-macchiato-lavender-rgb: 183 189 248;
  --ctp-macchiato-lavender-hsl: 234.462 82.278% 84.51%;
  --ctp-macchiato-text: #cad3f5;
  --ctp-macchiato-text-rgb: 202 211 245;
  --ctp-macchiato-text-hsl: 227.442 68.254% 87.647%;
  --ctp-macchiato-subtext1: #b8c0e0;
  --ctp-macchiato-subtext1-rgb: 184 192 224;
  --ctp-macchiato-subtext1-hsl: 228 39.216% 80%;
  --ctp-macchiato-subtext0: #a5adcb;
  --ctp-macchiato-subtext0-rgb: 165 173 203;
  --ctp-macchiato-subtext0-hsl: 227.368 26.761% 72.157%;
  --ctp-macchiato-overlay2: #939ab7;
  --ctp-macchiato-overlay2-rgb: 147 154 183;
  --ctp-macchiato-overlay2-hsl: 228.333 20% 64.706%;
  --ctp-macchiato-overlay1: #8087a2;
  --ctp-macchiato-overlay1-rgb: 128 135 162;
  --ctp-macchiato-overlay1-hsl: 227.647 15.455% 56.863%;
  --ctp-macchiato-overlay0: #6e738d;
  --ctp-macchiato-overlay0-rgb: 110 115 141;
  --ctp-macchiato-overlay0-hsl: 230.323 12.351% 49.216%;
  --ctp-macchiato-surface2: #5b6078;
  --ctp-macchiato-surface2-rgb: 91 96 120;
  --ctp-macchiato-surface2-hsl: 229.655 13.744% 41.373%;
  --ctp-macchiato-surface1: #494d64;
  --ctp-macchiato-surface1-rgb: 73 77 100;
  --ctp-macchiato-surface1-hsl: 231.111 15.607% 33.922%;
  --ctp-macchiato-surface0: #363a4f;
  --ctp-macchiato-surface0-rgb: 54 58 79;
  --ctp-macchiato-surface0-hsl: 230.4 18.797% 26.078%;
  --ctp-macchiato-base: #24273a;
  --ctp-macchiato-base-rgb: 36 39 58;
  --ctp-macchiato-base-hsl: 231.818 23.404% 18.431%;
  --ctp-macchiato-mantle: #1e2030;
  --ctp-macchiato-mantle-rgb: 30 32 48;
  --ctp-macchiato-mantle-hsl: 233.333 23.077% 15.294%;
  --ctp-macchiato-crust: #181926;
  --ctp-macchiato-crust-rgb: 24 25 38;
  --ctp-macchiato-crust-hsl: 235.714 22.581% 12.157%;
}

:root {
  --ctp-mocha-rosewater: #f5e0dc;
  --ctp-mocha-rosewater-rgb: 245 224 220;
  --ctp-mocha-rosewater-hsl: 9.6 55.556% 91.176%;
  --ctp-mocha-flamingo: #f2cdcd;
  --ctp-mocha-flamingo-rgb: 242 205 205;
  --ctp-mocha-flamingo-hsl: 0 58.73% 87.647%;
  --ctp-mocha-pink: #f5c2e7;
  --ctp-mocha-pink-rgb: 245 194 231;
  --ctp-mocha-pink-hsl: 316.471 71.831% 86.078%;
  --ctp-mocha-mauve: #cba6f7;
  --ctp-mocha-mauve-rgb: 203 166 247;
  --ctp-mocha-mauve-hsl: 267.407 83.505% 80.98%;
  --ctp-mocha-red: #f38ba8;
  --ctp-mocha-red-rgb: 243 139 168;
  --ctp-mocha-red-hsl: 343.269 81.25% 74.902%;
  --ctp-mocha-maroon: #eba0ac;
  --ctp-mocha-maroon-rgb: 235 160 172;
  --ctp-mocha-maroon-hsl: 350.4 65.217% 77.451%;
  --ctp-mocha-peach: #fab387;
  --ctp-mocha-peach-rgb: 250 179 135;
  --ctp-mocha-peach-hsl: 22.957 92% 75.49%;
  --ctp-mocha-yellow: #f9e2af;
  --ctp-mocha-yellow-rgb: 249 226 175;
  --ctp-mocha-yellow-hsl: 41.351 86.047% 83.137%;
  --ctp-mocha-green: #a6e3a1;
  --ctp-mocha-green-rgb: 166 227 161;
  --ctp-mocha-green-hsl: 115.455 54.098% 76.078%;
  --ctp-mocha-teal: #94e2d5;
  --ctp-mocha-teal-rgb: 148 226 213;
  --ctp-mocha-teal-hsl: 170 57.353% 73.333%;
  --ctp-mocha-sky: #89dceb;
  --ctp-mocha-sky-rgb: 137 220 235;
  --ctp-mocha-sky-hsl: 189.184 71.014% 72.941%;
  --ctp-mocha-sapphire: #74c7ec;
  --ctp-mocha-sapphire-rgb: 116 199 236;
  --ctp-mocha-sapphire-hsl: 198.5 75.949% 69.02%;
  --ctp-mocha-blue: #89b4fa;
  --ctp-mocha-blue-rgb: 137 180 250;
  --ctp-mocha-blue-hsl: 217.168 91.87% 75.882%;
  --ctp-mocha-lavender: #b4befe;
  --ctp-mocha-lavender-rgb: 180 190 254;
  --ctp-mocha-lavender-hsl: 231.892 97.368% 85.098%;
  --ctp-mocha-text: #cdd6f4;
  --ctp-mocha-text-rgb: 205 214 244;
  --ctp-mocha-text-hsl: 226.154 63.934% 88.039%;
  --ctp-mocha-subtext1: #bac2de;
  --ctp-mocha-subtext1-rgb: 186 194 222;
  --ctp-mocha-subtext1-hsl: 226.667 35.294% 80%;
  --ctp-mocha-subtext0: #a6adc8;
  --ctp-mocha-subtext0-rgb: 166 173 200;
  --ctp-mocha-subtext0-hsl: 227.647 23.611% 71.765%;
  --ctp-mocha-overlay2: #9399b2;
  --ctp-mocha-overlay2-rgb: 147 153 178;
  --ctp-mocha-overlay2-hsl: 228.387 16.757% 63.725%;
  --ctp-mocha-overlay1: #7f849c;
  --ctp-mocha-overlay1-rgb: 127 132 156;
  --ctp-mocha-overlay1-hsl: 229.655 12.775% 55.49%;
  --ctp-mocha-overlay0: #6c7086;
  --ctp-mocha-overlay0-rgb: 108 112 134;
  --ctp-mocha-overlay0-hsl: 230.769 10.744% 47.451%;
  --ctp-mocha-surface2: #585b70;
  --ctp-mocha-surface2-rgb: 88 91 112;
  --ctp-mocha-surface2-hsl: 232.5 12% 39.216%;
  --ctp-mocha-surface1: #45475a;
  --ctp-mocha-surface1-rgb: 69 71 90;
  --ctp-mocha-surface1-hsl: 234.286 13.208% 31.176%;
  --ctp-mocha-surface0: #313244;
  --ctp-mocha-surface0-rgb: 49 50 68;
  --ctp-mocha-surface0-hsl: 236.842 16.239% 22.941%;
  --ctp-mocha-base: #1e1e2e;
  --ctp-mocha-base-rgb: 30 30 46;
  --ctp-mocha-base-hsl: 240 21.053% 14.902%;
  --ctp-mocha-mantle: #181825;
  --ctp-mocha-mantle-rgb: 24 24 37;
  --ctp-mocha-mantle-hsl: 240 21.311% 11.961%;
  --ctp-mocha-crust: #11111b;
  --ctp-mocha-crust-rgb: 17 17 27;
  --ctp-mocha-crust-hsl: 240 22.727% 8.627%;
}
Retrieved from "https://www.explainxkcd.com/wiki/index.php?title=User:Maxcodes/common.css&oldid=406863"