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)
}
below this is old and irrelevant dont use it
there are some grays i haven't put in the effort on & idk how to handle text placeholder fields but this should be the majority of currently existing cohost colors/elements. Just redefine the colors by changing the rgb variables in the first couple sections to whatever you want, and everything else after that should 'just work' and use those new colors. It comes with a bunch of wacky colors to make it easier to see what goes where, but I'll include some comments with original values.
to use, just put in a Stylus or Cascadea or whatever userstyle extension for your browser. Don't use Stylish, they got bought out by a data analytics firm.
Note: if you use dark mode, you might need to switch some of the whites and blacks around, specifically in the section with all the "prose" variables. Just change the word black to white or vice versa in those --tw-prose etc. lines and it should work?
get it from this pastebin

i love the default colors so iโm not sure how much support/watch iโll be able to offer in the future, but I think the foundation ought to be decent for folks to build out more, and i am gonna use it to do a dark theme for myself (i use light mode on most other stuff so afaik i canโt easily flip a switch to make cohost use dark)