Dark Mode Detection within Stylus Extension

Wondering if it's possible to detect when dark mode is switched on for providing different CSS modifications via Stylus. I'm able to modify character sheets with it, because of the inclusion of .sheet-darkmode but I'm unable to achieve the same results in the rest of the VTT. My goal is essentially to make the Tighter Sidebar Lists  style not look quite so wonky in dark mode; So I'm looking to make some edits to Keith's original code, which works wonderfully in Light Mode, not be borderline-unusable in Dark Mode. Any help is appreciated!

Hi Ian! Sort of. Dark mode uses CSS variables, calling particular colors. If darkmode is on, those colors are available and defined. If dark mode is off, it's like they don't exist. So when you define a color for part of a style, you need to provide a list, with the dark mode variables listed first. If dark mode is available, it uses that first color choice, otherwise it default to light mode:     background-color: var(--dark-surface1,white); It may help to put !important after a definition:     background-color: var( --dark-gray-disabled, #eee) !important; List of Dark Mode CSS color Variables to work with:     --dark-background: #0c0c0c;     --dark-surface1: #1f1f1f;     --dark-surface2: #353535;     --dark-gamecard: #2b2130;     --dark-primarytext: #e6e6e6;     --dark-secondarytext: #b3b3b3;     --dark-primary: #702c91;     --dark-primary-highlight: #8d56a7;     --dark-purple-text: #a980bd;     --dark-gray-enabled: #666666;     --dark-gray-disabled: #333333;     --dark-proficiency-card: #212b30;     --dark-warning-card: #302b21;     --dark-green-d60: #0A4525;     --dark-green-l20: #48BD7D;     --dark-red-l20: #E1757B;     --dark-error-red: #572124;     --dark-yellow-d60: #664400;     --yellow-base: #FFAB00; Note: You should not define these in the style. The fact that they don't exist unless dark mode is on is why they work.

Here is my dark-mode updated Tighter Sidebar List style: .rollabil.btn.dfontd20{     margin-right: 10px;     font-size: 1.2em;     color: black;     padding: 0px;     font-family:dicefontd20; } .attributesabilities  {     right: 0;     top: 10px;     width: auto; padding-left: 3px;     background-color: #eee !important;         margin-bottom: 2px; } #rightsidebar .paddedtable button {     padding-top: 0px;     padding-bottom: 0px; } .attributesabilities .abil {     padding-top: 3px;     padding-bottom: 1px; } .dd-list .journalitem .name, .dd-list .library-item .name {     top: 0px; } .dd-list .journalitem .token, .dd-list .library-item .token {     top: 0px; } .dd-item  .folder-title {     background-color: var( --dark-gray-disabled, #eee) !important;     border-radius:0px;     padding: 3px 0px 7px 0px;     line-height:13px;     } .dd-content {     padding: 0px 0px 0px 0px!important;     border-radius:0px;      } .dd-content.static {     padding-left: 3px !important; } .expandcontroller.down {     color:transparent; } a#advancedSearch{ box-shadow:inset 0px 1px 0px 0px #f5978e; background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%); background-color:#f24537; border-radius:6px; border:1px solid #d02718; display:inline-block; color:#ffffff; padding:0px 5px; } #jukeboxfolderroot .playbackcontrol {     margin-left: 18px; } #compendium .searchroot .dd-item .dd-content .token img {     padding: 0px;     max-width: 19px;     max-height: 19px; } #compendium .searchroot .dd-item .dd-content .token {     top: 0px; } #compendium .searchroot .dd-item .dd-content .sourcefooter {     width:40px;        height: 18px;     position: absolute;     top: 0px;     right: 0px;     font-size: 6px; } .expandcontroller {     position: relative;     bottom:10px; } #compendium .searchroot .dd-item .dd-content .sourcefooter {     font-size: 12px; } .inapp .sourcefooter,.inapp.expansion3 .sourcefooter, .inapp.expansion9 .sourcefooter, .inapp.expansion13 .sourcefooter, .inapp.expansion16 .sourcefooter {     background-size: 15px 10px;     background-image:none;     padding-top: 5px;     top: 0px !important; } .dd-item, .dd-empty, .dd-placeholder {     min-height: 21px;     font-size: 12px;     line-height: 20px; } .dd-list .handout img, .dd-list .archivetable img, .dd-list .journalitem img, .dd-list .library-item img{     max-width: 20px;     max-height: 20px; } .dd-item>button {     height: 16px;     margin: 0px;     font-size: 14px;     top: 0px; } .dd-handle {     top: 0px;     width: 20px;     padding: 0px 10px; } .compendium-removed-expansions {     background-color: var( --dark-gray-disabled, #fff) !important;     border: none;     border-radius: 4px;     clear: both;     padding: 0px;     margin-bottom: 0px;     font-style: italic;     color: #aaa; } #recentuploads li::after {     background-color: var(--dark-surface1,white);     content: attr(data-filesize);     display: inline-block;     font-size: 0.8em;     padding-left: 3px;     position: absolute;     right: 0; }

Ahh, thanks. I have been in-need-of-this since Dark Mode came out. By the way, is one of these Dark Mode Color Variables applicable to the background-color-box on inline-dice rolls in chat?  It's a square around an inline-rolled dice, it's yellow in Light Mode, and it's Purple in Dark Mode. I need to change that purple shade. Can't read the dice rolled.

Ahaa, beautiful! I didn't know about the variable availability in CSS, so that's really handy to keep in mind. I'll definitely be utilising that for other styles. .... and I may just update my local copy to use your code once more. Thanks for the response!

Gold said: Ahh, thanks. I have been in-need-of-this since Dark Mode came out. By the way, is one of these Dark Mode Color Variables applicable to the background-color-box on inline-dice rolls in chat?  It's a square around an inline-rolled dice, it's yellow in Light Mode, and it's Purple in Dark Mode. I need to change that purple shade. Can't read the dice rolled. I created that list of colors many months ago, before that fix. I'll have a look for it later, but you should be able to find it by right-clicking on the offender while in dark mode and using the Inspector.

Gold said: By the way, is one of these Dark Mode Color Variables applicable to the background-color-box on inline-dice rolls in chat?  It's a square around an inline-rolled dice, it's yellow in Light Mode, and it's Purple in Dark Mode. I need to change that purple shade. Can't read the dice rolled. A quick inspection of the VTT shows it uses --dark-primary for the rollable results in dark mode (and a quick tinkering with the inspection CSS editor proves the theory that it will change!)