eden

EDIT 7/5/23: @kiophen did a real grown up execution of this thank u so much god. you should just use their implementation. i made some tweaks on my personal version but i'm not at my pc rn, just comment to remind me and i'll paste them in here sometime. original post below the fold

EDIT 2 7/5/23: my colors in kiophen's tool are #2b2b47, #f0f0f0, #f5dcbf, #b5306b and i set the contrast slider to -.46 ish. other tweaks: more color fixes for my tastes:

svg text,
.fill-foreground-500 svg,
.prose-stone,
h3 {
    color: var(--color-prose-100) !important;
}
[class*="text-foreground"],
span.conotifs-label,
.prose-stone a {
    color: var(--color-notWhite) !important;
}
nav [href*="compose"] {
    background: var(--color-accent) !important;
    color: var(--color-notWhite) !important;
}
nav [href*="compose"]:hover {
    background: var(--color-notWhite) !important;
    color: var(--color-accent) !important;
}
.fill-composeButton {
    color: var(--color-notWhite) !important;
    fill: var(--color-accent);
}
.fill-composeButton:hover {
    color: var(--color-accent) !important;
    fill: var(--color-notWhite);
}
[href="https://cohost.org/"],
span.conotifs-label a,
.header-controls a {
    color: var(--color-accent) !important;
}
[class*="border-gray"] {
    border-color: var(--color-dark0);
}
button[class*="hover"]:hover {
    color: var(--color-accent) !important;
    background-color: var(--color-dark3) !important;
}
.hover\:bg-foreground-100:hover {
    background-color: var(--color-accent);
    color: var(--color-prose-100) !important;
}

tightening up the display spacings:

.gap-12 {
    gap: 1rem;
}
.p-3 {
    padding: .4rem .75rem;
}
div.flex.flex-col.items-center.m-3.gap-3 > .p-3 {
    padding: 0;
}
.my-4 {
    margin-top: .5rem;
    margin-bottom: .5rem;
}
:not(svg):not(.mask).cohost-shadow-light {
    box-shadow: 0 1px 10px rgb(25 25 25 / 30%), 0 2px 4px rgb(0 0 0 / 25%);
}
.lg\:pt-16 {
    padding-top: 1rem;
}

also stuff for the notification popover by @blep (i had to hardcode the width idk why)

.conotifs-popover .inner-popover {
    width: 1002px;
    max-width: 1002px;
    background: var(--color-dark1)
}
.conotifs-popover .inner-popover .inner-container {
    max-width: 1000px;
}
.inner-grouped-shroud {
    display: none;
}
.inner-loading {
    background-color: var(--color-dark1)
}

updated with a few new things