I recently discovered the Message of the Day script. Is there a way to adjust the text and background color of the output? It looks fine in light mode but very faded in dark mode:
I recently discovered the Message of the Day script. Is there a way to adjust the text and background color of the output? It looks fine in light mode but very faded in dark mode:
Hmm. It predates Dark Mode in Roll20, I'll have to see what adjustments I can make. The API doesn't know about Dark Mode, so there are limited options.
It's just an esthetics thing for us, but it would be a problem for people with low vision. I've noticed that the output of one other API that I use does the same ( D&D 5E - GMSheet) but the only one who sees that is me as GM and I don't really mind.
I see other displays that don't always look quite right in dark mode, such as the text in the D&D 5E by Roll20 character sheet. I wonder if the problem is that the text even in light mode is not actually black but a shade of grey?
keithcurtis said:
I've been going "gray mode" with my interfaces lately.
The output of your DLTool is excellent, equally visible in both light and dark modes!
The MotD script isn't modifying the font color directly, and Roll20 is defaulting to the 'dark-primarytext' and 'dark-secondarytext' color for font while in Dark Mode, which is #e6e6e6 (light grey) and #b3b3b3d (medium grey) respectively.
Two options:
1. If you change the font color of the text that you put into the MotD handout to be something other than black (such as the dark grey just to the right of it) then Roll20 will not use the default colors in Dark Mode.
Here's what the output looks like if I change the font color of 'Welcome to the Game, %%NAME%%' to the dark grey color, but leave 'Zoom Link: ' in black:
2. You can import the script and adjust these lines (starting at 12) to something that is better suited for dark mode (as a temporary solution until the script is modified):
const styles = {
container: 'display: block; border: 1px solid #999; border-radius: .3em; padding: 1em; background-color: white; box-shadow: 0 0 25px 2px #999; margin: 1em 0 1em 0;',
gmnote: 'display: block; border-top: 2px dashed #d2dc65; margin: 2em -1em -1em -1em; border-radius: 0 0 .3em .3em; padding: .3em; background-color: #F2F5D3;',
gmtitle: 'font-size: 2em; font-weight:bold; margin:.5em 1em 1em 1em; text-align: center;line-height:1em;',
image: 'display: block; width: auto; height: auto;',
motdLinkBox: 'display: block; text-align: center; font-size: .8em; font-weight:bold;',
motdLink: 'color: #07c; text-decoration: underline;',
links: 'color: #07c;'
};Changing line 13 to adjust the background color to 'lightgrey' and adding an item to change the font color to black seems to work well in both light and dark mode for me:
container: 'display: block; border: 1px solid #999; border-radius: .3em; padding: 1em; color: black; background-color: lightgrey; box-shadow: 0 0 25px 2px #999; margin: 1em 0 1em 0;',
This does the trick. Thanks Jarren!
Jarren said:
1. If you change the font color of the text that you put into the MotD handout to be something other than black (such as the dark grey just to the right of it) then Roll20 will not use the default colors in Dark Mode.
Jarren said:
If you change the font color of the text that you put into the MotD handout to be something other than black (such as the dark grey just to the right of it) then Roll20 will not use the default colors in Dark Mode.
Yup. I avoid #000 and #fff when designing interfaces now, for just that reason.