Cohost: Lacey's Dark Mode by senshellshark

/* ==UserStyle==
@name         Cohost: Lacey's Dark Mode
@version      20221124.13.23
@namespace    userstyles.world/user/senshellshark
@description  My personal take on dark mode including grouping the navigation into little sections. Implies that you're using bookmarked tags though.
@author       senshellshark
@license      CC0
==/UserStyle== */

@-moz-document url-prefix("https://cohost.org") {
/* ==UserStyle==
@name cohost: Lacey's Dark Mode
@version 20221113.10.17
@namespace userstyles.world/user/senshellshark
@description My own take on a dark mode for cohost

@author senshellshark
@license CC0
==/UserStyle== */

:root {
    --depth-0: #101010;
    --depth-1: #282828;
    --depth-2: #333;
    --depth-3: #444;
    --text-0: #888;
    --text-1: #FFF0FF;
    --text-2: #FFFFFF;
    --color-light-cherry: rgb(234, 136, 180);
    --color-bright-cherry: rgb(255, 87, 118);
}

.bg-background {
    background-color: var(--depth-0);
    color: var(--text-1);
}

.text-notBlack,
.text-black {
    color: var(--text-2);
}

.text-bgText,
.text-lg {
    color: var(--text-0);
}

.text-gray-600 {
    color: var(--color-light-cherry);
}

header.bg-foreground > div > nav a {
    color: black;
}

article.bg-white,
article.bg-notWhite {
    background-color: var(--depth-1);
}

article hr.border-gray-300 {
    border-color: transparent;
}

article header.bg-notWhite,
article header.bg-white{
    background-color: var(--depth-2);
    color: var(--text-2);
}

article footer.bg-notWhite,
article footer.bg-white{
    background-color: var(--depth-2);
    color: var(--text-2);
}

article footer.bg-notWhite .justify-end,
article footer.bg-white .justify-end{
    background-color: var(--depth-2);
    color: var(--text-2);
}

article footer.bg-notWhite button:last-child .text-cherry,
article footer.bg-white button:last-child .text-cherry{
    color: var(--color-bright-cherry);
}

article .bg-longan-100 {
    background: var(--depth-1);
}

article .rounded-lg {
    background: var(--depth-3);
    color: white;
}

article .rounded-lg svg {
    color: var(--color-light-cherry);
}

article .text-gray-800{
    background: var(--depth-2);
    color: var(--color-light-cherry);
}

.prose {
    color: var(--text-1);
}

button.rounded-lg {
    background-color: var(--depth-2);
    color: var(--text-2);
}

section.rounded-lg {
    background-color: var(--depth-1);
    border: none;
    color: var(--text-1)
}

section.rounded-lg a.text-sm time,
section.rounded-lg a.text-sidebarAccent{
    color: var(--color-light-cherry)
}

ul.rounded-lg {
    background-color: rgba(0, 0, 0, 0);
    color: var(--text-1);
    gap: 0;
    margin: 0;
    padding: 0;
}

ul.rounded-lg a {
    background-color: var(--depth-1);
    padding: 0.2rem 0.7rem;
    margin: 0;
}

ul.rounded-lg a li:hover {
    color: var(--color-light-cherry);
    border-color: transparent;
}

ul.rounded-lg a:first-child,
ul.rounded-lg a:nth-child(10) {
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

ul.rounded-lg a:nth-child(2),
ul.rounded-lg a:nth-child(4) {
    border-radius: 0.5rem 0.5rem 0 0;
}

ul.rounded-lg a:nth-child(3),
ul.rounded-lg a:nth-child(9),
ul.rounded-lg a:nth-child(11){
    border-radius: 0 0 0.5rem 0.5rem;
    margin-bottom: 0.5rem
}

.prose :where(strong):not(:where([class~=not-prose] *)),
.prose :where(code):not(:where([class~=not-prose] *)) {
    color: var(--text-2)
}
}