#dark mode crimes
so we wrote up a quick SCSS function to make dark mode color themes easier to make. we're sure some people have posted stuff like this, but we couldn't find them, so here's one we'll try to keep public and working for as long as possible.
if there's a breaking change on cohost we don't notice or if you have any modifications you'd like to see to make it more robust, feel free to comment and we'll get to it as soon as we can!
SCSS @function darkmode_split(lightModeColor, darkModeColor, [withAlpha?])@use 'sass:color'; @function darkmode_split( $rgb_light , $rgb_dark , $alpha: false) { // this is 1 in dark mode. $dm: var(--tw-border-opacity, 0); // for extraction & readability $l_red: color.red($rgb_light); $l_blue: color.blue($rgb_light); $l_green: color.green($rgb_light); $l_alpha: color.alpha($rgb_light); $d_red: color.red($rgb_dark); $d_blue: color.blue($rgb_dark); $d_green: color.green($rgb_dark); $d_alpha: color.alpha($rgb_dark); @if $alpha { @return rgba( calc(($l_red * (1 - $dm)) + ($d_red * ($dm))), calc(($l_green * (1 - $dm)) + ($d_green * ($dm))), calc(($l_blue * (1 - $dm)) + ($d_blue * ($dm))), calc(($l_alpha * (1 - $dm)) + ($d_alpha * ($dm))) ); } @else { @return rgb( calc(($l_red * (1 - $dm)) + ($d_red * ($dm))), calc(($l_green * (1 - $dm)) + ($d_green * ($dm))), calc(($l_blue * (1 - $dm)) + ($d_blue * ($dm))) ); } }
commentary from the system
hello there
toggle dark mode via the post menu to see the animation. apparently the variable --tw-border-opacity is set to 1 in dark mode and not set in light mode. so you can use calc to multiply something by that value.
<div style="
transform: rotatex(calc(0.5turn * var(--tw-border-opacity, 0)));
transition: transform 500ms;
text-align: center;
border: 1px solid;
padding: 2rem 1rem;
">
hello there
</div>syntax highlighting by codehost
🌝
🌞
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*