I just thew this Stylus code together after looking at how the Roll20 CSS code was being structured using var() colors: html[data-theme="light"] { --color-banner-base-text: grey; --color-primary-text: #4f91cd; --color-primary-base: #02baf2; --color-primary-hover: #870050; --color-primary1: #5A0035; --color-primary2: #870050; --color-primary3: #B4006A; --color-primary4: #B4006A; --color-primary5: #E7339D; --color-primary6: #ED66B6; --color-primary7: #F399CE; } .btn-group.alertcontainer.newalerts .btn.btn-default.dropdown-toggle.alerts, span.alertcount { color: var(--color-primary4); }
.btn-group > .btn.btn-default {
border-color: var(--color-banner-base-text);
}
a:hover, a:focus, a:hover:focus {
color: var(--color-primary-hover);
}
And that's with just changing the banner base, primary text, primary base, and primary4 colors at a first stab. It seems that primary4 is one of the main var() colors that is used as a highlight, so I changed it to a darker pink. I'm guessing this is a first step towards some kind of true dark mode and/or individualized customization - perhaps we will be able to set some color schemes that would overwrite the var() colors on a per-account basis. At least I'm hoping that's where this is heading!