Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Stylus stuff not darkmode compatible?

I have two questions.  First off how do you turn off specific stylus changes to the site?  All I can find is how to turn off the whole thing.   Secondly, will the authors be updating them for darkmode compatibility?  A few are truly unusable in darkmode.  Like the better folders in journal one is unreadable.  I want to turn just that one off but can't figure it out.  Any help appreciated?
1646445713

Edited 1646588853
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I have a temporary fix for that. It will be better eventually, but I'm going to wait for Roll20 to finish the fixes to Dark Mode first. It's too volatile right now. I also need to experiment with some of the css variables that Dark Mode employs so that the style can be all-in-on, rather than either/or. This isn't perfect (vertical spacing is a touch too high), but it's a lot better. .rollabil.btn.dfontd20{ margin-right: 10px; font-size: 1.2em; color: black; padding: 0px; } .attributesabilities .abil { 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; } 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: #fff; border: none; border-radius: 4px; clear: both; padding: 0px; margin-bottom: 0px; font-style: italic; color: #aaa; } #recentuploads li::after { background-color: white; content: attr(data-filesize); display: inline-block; font-size: 0.8em; padding-left: 3px; position: absolute; right: 0; }
1646446003
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Oh and to answer your first question, click on the stylus extension in the browser and just toggle the style you don't want to use. You can also turn them all off and on quickly from here.
1646501232
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I made a few tweaks that should improve things. Only tested on Chromebook.
Can we remove the Dark Mode toggle?  
1646503170
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
You can do just about anything. I am loath to remove the darkmode toggle yet. Roll20 has placed it there for a reason. I do not believe the position is permanent, but while they are refining it, I don't want to muddy the waters with Styles that change the basic interface of a new feature. It only makes it more difficult for them to get useful feedback. The above style is a refinement on a style that has been around for years that dark mode has only touched on, and seems to be a pretty settled part of the new display. I would strongly advise not altering the appearance of the darkmode toggle until after the rollout is complete.
1646503952
Gold
Forum Champion
thank you for working on these improvements keithcurtis. I'll be using this when I become comfortable to make the switch to Dark Mode.  This, because the Stylus styles can make Roll20 more efficient, more legible, more navigable, tighter and better looking.
1646505297

Edited 1646505322
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Yeah, my take on it is that the spread out nature of the Roll20 interface is probably an accessibility-driven choice. But it makes it conversely harder for those who do not need those choices.
1646521620

Edited 1646521636
I just realized that as much as I like darkmode, its unuseable until they fix their sheet templates.  NPC sheets attacks are unreadable and thats like half the game of dnd with THEIR sheet.  Feel like they should have caught that, specially since the player character sheet templates work just fine with darkmode.  
1646522313
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Fortunately, they look to be on a high priority fix cycle on this.
1646588904
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I have updated the above code where it should work with light or dark mode and change accordingly. Discovered the css variable definitions.
1646608638
vÍnce
Pro
Sheet Author
Thanks for the update Keith. My stylus changes are working much better now.
1646611067
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Stylus allows a lot more creativity than the API. I tried the same trick with an API script, but all styles are inline, and if it doesn't find choice 1, it just returns nothing. background-color: var( --dark-gray-disabled, #eee) !important;