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

sheet-rolltemplate-darkmode not applying

1720898690
Jiboux
Pro
Sheet Author
Compendium Curator
Really really late, I am working on converting our sheet and API (Earthdawn FASA Official) to Dark Mode. Below a screen capture with the inspector with an example. First roll was made in Light Mode, and then switched to Dark mode. The 2 next were done once it dark mode. The inspector clearly shows that the rolls that are abnormal do not have the sheet-rolltemplate-darkmode, which is something native I have no control on. When switching back light-dark, it becomes correct again... Any idea what may be causing this ?
1720901365

Edited 1720901543
vÍnce
Pro
Sheet Author
Do you have 2 versions (light and dark) of your roll template css? example; normal/light version .sheet-rolltemplate-general { ... } and dark version .sheet-rolltemplate-darkmode.sheet-rolltemplate-general { ... } I believe that's how I've worked with darkmode. IME, it's not always necessary to have a darkmode version for everything. It really depends on how much styling the sheet is handling vs what roll20's base css is handling.
1720901706
Jiboux
Pro
Sheet Author
Compendium Curator
Hello Vince, Yes I have 2 versions, or more exactly I have: 1 light version of a "wrapper" with the  variable color definitions. For example -bg--color : #xxxx; 1 light version of a "wrapper" with the dark color palette: -bg--color: #yyyy; The elements themselves usually just use var(-bg--color); What I see in the inspector is that the light version applies instead of the dark because the sheet-rolltemplate-darkmode was not applied. If I switch to light and back to dark, everything works, so it doesn't seem to come from my CSS... Is it in my API ? Should the API be the one in charge of applying "sheet-rolltemplate-darkmode" ?
1720902409

Edited 1720902596
vÍnce
Pro
Sheet Author
Perhaps this is related to Chris D's post last week... <a href="https://app.roll20.net/forum/permalink/11960954/" rel="nofollow">https://app.roll20.net/forum/permalink/11960954/</a> related in that he was needing to override roll20's css (bug where roll20 adds .charsheet even to roll template) for his API based rolls. At least I think that was the issue.
1720902698
Jiboux
Pro
Sheet Author
Compendium Curator
This is the same sheet (Chris and I work on it together), but I don't know how it is related... The one he is describing is about roll20 adding a selector that it shouldnt and messing up with the specificity. Mine seems to be roll20 not adding a selector that it should... My understanding is that: 1-Whenever a message is sent via direct roll, or via the API chat command, if the darkmode is active, the "sheet-rolltemplate-darkmode" will be automatically applied by roll20 2-Whenever the darkmode toggle is switched, roll20 will add/delete the sheet-rolltemplate-darkmode everywhere. In what I am testing, the 2 seems to be working just fine, but not the 1...
1720909194

Edited 1720909394
vÍnce
Pro
Sheet Author
Can the API detect light/dark mode?&nbsp; Unless this has changed, I don't think the API knows light/dark mode, so either it's setup for one or the other (or something that would look OK in either).&nbsp; Apologies, this is probably out of my wheelhouse because it seems more like an API issue (even if it originates from the sheet and is using the sheet's roll template).
1720914000
Jiboux
Pro
Sheet Author
Compendium Curator
Well this seems to confirm my diagnosis. we have an API that posts messages that are formatted by a roll template that is in the CSS. It seems that in the formatting a css selector sheet-roll template-darkmode should be applied and is not…&nbsp; it seems that it is the mainframe of roll20 that should do it…&nbsp;
1720933106
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
The API cannot detect light and dark mode. This is why I have adopted the practice of defining my scripts' CSS in "gray mode".
1720960204
Jiboux
Pro
Sheet Author
Compendium Curator
keithcurtis said: The API cannot detect light and dark mode. This is why I have adopted the practice of defining my scripts' CSS in "gray mode". OK, now you got me very confused... I understand the API can't detect the dark mode (i.e. there is property of the campaign that the API has access to that allows it to know it is dark mode), but what is the sheet-rolltemplate-darkmode for ? My understanding is that it was precisely for styling rolls and messages in the chat that come from the API. What I currently have is that my CSS styles my rolltemplates coming from the API differently based on the sheet-rolltemplate-darkmode, and it "almost" works, see below a screen capture both light and dark mode...&nbsp; It "almost" works because when I switch mode, all the rolltemplates already in the chat switch to dark mode, but when I make a new message with dark mode already activated, it doesn't work (i.e. it mixes my light mode CSS with the roll20 native dark mode) Isn't the sheet-rolltemplate-darkmode precisely there for devs that want to style API outputs in dark mode ???
1720973305

Edited 1720973418
Chris D.
Pro
Sheet Author
API Scripter
Compendium Curator
OK, I have a theory as to what is going wrong.&nbsp; The way this relates to my post last week, is that we are mostly not actually using rolltemplates (we do use them for some things, but mostly we just send send html to the chat window). Also, we used to use inline styling, but we are trying to avoid inline styling now, and are trying to apply css to the classes we are sending as html to the chat window, and we use (or possibly misuse) the .sheet-rolltemplate tags to do so.&nbsp; Now what I think is happening, is that when the system enters or exits dark mode, the system adds a class "body.sheet-darkmode" at a very high level that encompasses both the character sheet and the chatwindow, sending both into or out of darkmode.&nbsp; I don't know why, but my guess is that for some reason there were problems applying the css selectors body.sheet-darkmode .sheet-rolltemplate-myselector { xxx } and the systems people gave us the selector&nbsp;.sheet-rolltemplate-darkmode to be used as .sheet-rolltemplate-darkmode.sheet-rolltemplate-myselector My further guess is that when the sheet enters or exits darkmode, the system goes through looking for classes with .sheet-rolltempate-(anything) selectors and adding or removing the&nbsp;.sheet-rolltemplate-darkmode class as well. Further, I guess that when a genuine rolltemplate command is done, the system applyes or removes the&nbsp;.sheet-rolltemplate-darkmode selector as needed. Thus the class is applied when the darkmode changes, or when a genuine rolltemplate command is done. No problems.&nbsp; I think the problem is that when somebody just sends html to the chat window, that is not actually part of a gunuine rolltemplate command, the system does not check to see if it should be adding or removing&nbsp;.sheet-rolltemplate-darkmode classes.&nbsp; Thus, rolls made in light mode get converted to dark mode when the system is set to darkmode. But new rolls show up in lightmode because the system is not adding the&nbsp;.sheet-rolltemplate-darkmode class to that code.&nbsp; So what do people think? Could this theory be correct? What can be done? Can we just use body.sheet-darkmode&nbsp; &nbsp;.sheet-rolltemplate-myselector? Does anybody know what the problem was that caused roll20 to implement&nbsp;.sheet-rolltemplate-darkmode in the first place? Any other ideas of things to try? Thanks.&nbsp;
1720974428
Chris D.
Pro
Sheet Author
API Scripter
Compendium Curator
OK, yes, testing has determined that this does seem to be directly related to my problem last week, in that the system tends to automatically and inconveniently convert .sheet-darkmode .sheet-rolltemplate-Earthdawn&nbsp; &nbsp; &nbsp; &nbsp;into .charsheet .sheet-darkmode .sheet=rolltempalte-Earthdawn. So it looks like we can't use .sheet-darkmode because it puts a .charsheet infront of it. And we can't use .sheet-rolltemplate-darkmode because it is&nbsp; not added to anything other than genuine rolltemplate commands.
1721082850
Jiboux
Pro
Sheet Author
Compendium Curator
I ended up finding a crazy workaround... There is really something going on with roll20 adding the .charsheet class, but I found a way to prevent it to happen... It is rather unelegant, but seems to work until there is a bug fix. Refer to <a href="https://app.roll20.net/forum/post/11960954/css-system-adds-charsheet-even-on-selectors-that-include-a-sheet-rolltemplate-selector-which-ought-to-have-a-textchatcontainer-instead/?pageforid=11973848#post-11973848" rel="nofollow">https://app.roll20.net/forum/post/11960954/css-system-adds-charsheet-even-on-selectors-that-include-a-sheet-rolltemplate-selector-which-ought-to-have-a-textchatcontainer-instead/?pageforid=11973848#post-11973848</a>