cohost: improved dark mode by knuxify

/* ==UserStyle==
@name         cohost: improved dark mode
@version      20220808.08.12
@namespace    userstyles.world/user/knuxify
@description  horrible sleep schedule? browsing the fourth website at 2 in the morning? the color white burns your eyes? the ~ improved dark mode ~ might be perfect for you!

this is an userstyle that forces some colors to be dark. note that this is a bit of a nuclear option - everything with these colors, including posts, will be themed. **some breakage, especially in custom posts, may occur - use at your own risk!**
@author       knuxify
@license      CC0
==/UserStyle== */

@-moz-document domain("cohost.org") {
:root {
    --darker-notwhite: #161616;
    --darker-white: #121212;
    --darker-foreground: #eee;
    --darker-foreground-accent: #aaa;
}

.bg-background, .bg-notWhite, .bg-longan {
    background-color: var(--darker-notwhite);
    color: var(--darker-foreground);
}

.bg-white, .bg-longan-100, .bg-longan-300 {
    background-color: var(--darker-white);
    color: var(--darker-foreground);
}

.text-notBlack, .text-bgText {
    color: var(--darker-foreground-accent);
}

.text-black, .prose {
    color: var(--darker-foreground);
}

.prose :where(code):not(:where([class~="not-prose"] *)),
.prose :where(h1):not(:where([class~="not-prose"] *)),
.prose :where(h2):not(:where([class~="not-prose"] *)),
.prose :where(h3):not(:where([class~="not-prose"] *)),
.prose :where(h4):not(:where([class~="not-prose"] *)),
.prose :where(strong):not(:where([class~="not-prose"] *)),
.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
   color: var(--darker-foreground-accent);
}

hr.border-gray-300, .divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--darker-notwhite);
}

.bg-background .text-cherry-700 {
    color: var(--darker-foreground);
}

/* buttons */

[type="text"], [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], [multiple], textarea, select {
    background-color: var(--darker-white);
    color: var(--darker-foreground);
}

button.hover\:bg-cherry, a.hover\:bg-notBlack {
    background-color: var(--darker-white);
    color: var(--darker-foreground);
}

a.hover\:bg-notBlack:hover {
    background-color: var(--darker-notwhite);
}

button.disabled\:bg-foreground-200:disabled {
    background-color: #222;
    color: var(--darker-foreground-accent);
    opacity: 0.5;
}

/* manual fixes for stuff */

.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
    border-left-color: var(--darker-foreground-accent);
}

article .bg-gradient-to-t.from-white.inline-block { /* read more gradient */
    background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, rgba(18, 18, 18, 1) 100%);
}

article .inline-block.bg-white.cursor-pointer.text-cherry { /* read more button */
    background-color: var(--darker-white);
    color: var(--darker-foreground-accent);
}

.hover\:bg-gray-200:hover {
    background-color: var(--darker-notwhite);
}

.bg-longan-200.text-cherry .prose {
    color: var(--color-cherry-200);
}
}