Light Mode on Redesigned Toolbar

MIGHT it be possible to have the Sidebar in Darkmode while using the rest of the VTT in Lightmode? Reason for me using lightmode in VTT is the incompatibility of certain Character Sheets with Darkmode BUT I REALLY don't want to have the sidebar in lightmode, too! (Maybe a TOGGLE specific for that sidebar?) EDIT: Link to the Suggestions Forum: <a href="https://app.roll20.net/forum/post/11692467/sidebar-dark-mode-while-vtt-in-light-mode" rel="nofollow">https://app.roll20.net/forum/post/11692467/sidebar-dark-mode-while-vtt-in-light-mode</a>

Still hoping for a greymode, and resizable toolbar (the buttons are tiny for me).

Thanks, Bianca!

Gauss said: Still hoping for a greymode, and resizable toolbar (the buttons are tiny for me). Would be OK for me, too. As long as it is not that bright WHITE...

Is this change responsible for seeing Target Queries being barely visible in "Light Mode" vs "Dark Mode"&nbsp; (examples below) &nbsp;

Could be the same CSS Rule they used for other parts of the VTT as well (character sheets etc.) I seriously hope this will get fixed. For the next Groups I REALLY don't want to switch to dark mode just cause with dark mode enabled nothing in chat (dice output) would be readable! But the sidebar in white is an eyesore if you ask me... it is WAY too bright... Don said: Is this change responsible for seeing Target Queries being barely visible in "Light Mode" vs "Dark Mode"&nbsp; (examples below) &nbsp;

Is there any chance we get a toggle just for the sidebar? I'd like the Sidebar in DARK while the Rest of the VTT in Lightmode (because of the fact that some character sheets and Roll macros are NOT compatible with dark mode!)

TheMarkus1204 said: Could be the same CSS Rule they used for other parts of the VTT as well (character sheets etc.) I seriously hope this will get fixed. For the next Groups I REALLY don't want to switch to dark mode just cause with dark mode enabled nothing in chat (dice output) would be readable! But the sidebar in white is an eyesore if you ask me... it is WAY too bright... Don said: Is this change responsible for seeing Target Queries being barely visible in "Light Mode" vs "Dark Mode"&nbsp; (examples below) &nbsp; The repeated issues with Dark Mode and Light Mode are starting to feel like someone at Roll20 is letting a personal preference for Dark Mode "punish" anyone who disagrees.&nbsp;

I would NOT mind using Dark Mode IF it would work CONSISTENT for EVERY CHARACTER SHEET there is here on Roll20. But since this is not the case (for whatever reason given how long Dark Mode in VTT is a thing), I stay with Light mode. And up until this change, everything was fine! But this change renders Roll20 nearly unusable for me as I am forced to stare at the "new" glaring white toolbar OR switch to Dark Mode and can barely read anything in chat! And YES, I know that you can hide the sidebar all along, but that does not make it any better! Mark G. said: TheMarkus1204 said: Could be the same CSS Rule they used for other parts of the VTT as well (character sheets etc.) I seriously hope this will get fixed. For the next Groups I REALLY don't want to switch to dark mode just cause with dark mode enabled nothing in chat (dice output) would be readable! But the sidebar in white is an eyesore if you ask me... it is WAY too bright... Don said: Is this change responsible for seeing Target Queries being barely visible in "Light Mode" vs "Dark Mode"&nbsp; (examples below) &nbsp; The repeated issues with Dark Mode and Light Mode are starting to feel like someone at Roll20 is letting a personal preference for Dark Mode "punish" anyone who disagrees.&nbsp;

They also changed the Background color of the chat menu to that AWFUL bright white: PLEASE CHANGE AT LEAST THIS BACK TO THE LIGHT GREY IT WAS BEFORE!!!

Seeing that the Chat Menu now shares the same color as the sidebar, YES, this change IS responsible for you not being able to read the Infos in Light mode... Don said: Is this change responsible for seeing Target Queries being barely visible in "Light Mode" vs "Dark Mode"&nbsp; (examples below) &nbsp;

I know this is not an issue for Roll20 team per se, but Pathfinder 1E sheets are unplayable in Dark Mode. But I preferred the sidebar to be Dark Mode at least, even if the rest of it (i.e. the chat and sheets) were not. So please, let us choose Dark Mode separately for the sidebar!

Oddly enough, while I'm a fan of light mode generally, I liked having the sidebar dark.&nbsp; It made for a good contrast against the edge of the map.&nbsp; It would be nice if it could be set separately.

Hi, I would love to have the option to have the sidebar dark as it was before this update. Thanks.

So, with the design skills of a blind man you have given us a choice, unreadable chat entries or unreadable pop-ups with that weird purple pink invading the macros. The color and design choices are consistently jarring when having to look at it for any length of time. Please hire somebody who has some experience in design.

The stream of updates has been much appreciated, however I echo the sentiment of having the option of keeping the side bar dark while the rest stays in light mode as it was before.

Use a milder light color, not bright white, for Light Mode --- would be my feedback, except I don't use Light Mode so IDK really.&nbsp; Light Mode should be "Looks good in color combinations", not "as bright as computationally possible".&nbsp;&nbsp; #FFFFFF

They should just give us the choice for the Sidebar and maybe some different color pallets to choose from. I REALLY liked the light GREY Background for the chat menu AND the Dark Mode Sidebar... It really HURTS to look at (NO JOKE)... And as said, there are Sheets ("Das Schwarze Auge 5 (German)" for example) that are just NOT compatible with Dark mode! (The sheet itself is because of the Background Image used, but the Output in Chat is not!) So for VTT I stay with Lightmode (IDEALLY NOT with a toolbar / chat menu that hurts my eyes) Thank you! Gold said: Use a milder light color, not bright white, for Light Mode --- would be my feedback, except I don't use Light Mode so IDK really.&nbsp; Light Mode should be "Looks good in color combinations", not "as bright as computationally possible".&nbsp;&nbsp; #FFFFFF

THANK YOU!!!!! &lt;3

Don said: Is this change responsible for seeing Target Queries being barely visible in "Light Mode" vs "Dark Mode"&nbsp; (examples below) &nbsp; Here's some quick Stylus code that you can use until this gets fixed: @-moz-document regexp("<a href="https://app.roll20.*.net/(editor|campaigns.*)/.*" rel="nofollow">https://app.roll20.*.net/(editor|campaigns.*)/.*</a>") { /* Left toolbar background color */ div.master-toolbar-outer { --vtt-container-bg: rgba(0, 0, 0, .8); } /* "Layers" label color */ div.parentContainer &gt; button.el-button.el-button--default.btnStyle.level /* Zoom percentage color */, div.buttons-outer &gt; span { color: rgb(179, 179, 179) !important; } /* Spacer bar color */ div.spacer-outer &gt; div.spacer-inner { background: rgba(255, 255, 255, .2) !important; } /* Selected icon background color&nbsp; */&nbsp; div.master-toolbar-outer div.icon-slot.icon-selected { background-color: var(--surface-dark2) !important; border: 1px solid; border-radius: 12px; border-color: var(--rgba-020); color: var(--74d543fe); } /* Icons color */ div.master-toolbar-outer div.icon-slot &gt; span { color: var(--grayscale-d30); } /* Target Popup Window */ #targetinginstructions { --vtt-container-bg: var(--dark-gray-disabled); } } Dark Mode: Light mode:

@Jarren My eye thanks you.

THANK YOU VERY MUCH for this! I wonder, can you change the style of the drawing menu or the diceroller etc with this, too? Sadly your Script does not affect those... EDIT: &nbsp;ANY Updates from Roll20 on this? There should also be some tickets on this. Are they just ignored or is someone actually working on this? Jarren said: Don said: Is this change responsible for seeing Target Queries being barely visible in "Light Mode" vs "Dark Mode"&nbsp; (examples below) &nbsp; Here's some quick Stylus code that you can use until this gets fixed: @-moz-document regexp("<a href="https://app.roll20.*.net/(editor|campaigns.*)/.*" rel="nofollow">https://app.roll20.*.net/(editor|campaigns.*)/.*</a>") { /* Left toolbar background color */ div.master-toolbar-outer { --vtt-container-bg: rgba(0, 0, 0, .8); } /* "Layers" label color */ div.parentContainer &gt; button.el-button.el-button--default.btnStyle.level /* Zoom percentage color */, div.buttons-outer &gt; span { color: rgb(179, 179, 179) !important; } /* Spacer bar color */ div.spacer-outer &gt; div.spacer-inner { background: rgba(255, 255, 255, .2) !important; } /* Selected icon background color&nbsp; */&nbsp; div.master-toolbar-outer div.icon-slot.icon-selected { background-color: var(--surface-dark2) !important; border: 1px solid; border-radius: 12px; border-color: var(--rgba-020); color: var(--74d543fe); } /* Icons color */ div.master-toolbar-outer div.icon-slot &gt; span { color: var(--grayscale-d30); } /* Target Popup Window */ #targetinginstructions { --vtt-container-bg: var(--dark-gray-disabled); } } Dark Mode: Light mode:

Thanks for the Update, BUT can we get a toggle for the Sidebar and its menus to be displayed in DARKMODE while the Rest of the VTT is still in Lightmode (Like it was BEFORE the Update)? ZOOM Slider is now in Lightmode, too! Although I turn that off cause I don't really need it, I'd like to see THIS in Darkmode as well! Might that be possible? Right now I have the Stylus Script in place which indeed recolors the Sidebar, but the Diceroller, Drawing Menu, Zoom Slider etc. are still in Lightmode! It would be nice, if you could target that, cause then we would NOT need the Stylus Script! Riley D. said: We just pushed out a fix and the Targeting menu should work correctly now in both Dark and Light mode. Thanks!

Thank you for the Update! Thing is, YES, you can customize the UI with Stylus Scripts but only to a certain extent. You are NOT able to fully customize it. Before the Lightmode Sidebar everything was fine... BUT since it is now use Light Mode for VTT and have trouble reading some labels (see posts above) but have NO problems with Character Sheets OR use Dark Mode and be able to read at least the labels BUT since not all Character Sheets are compatible with Dark Mode, you are simply NOT able to use them at all OR read their output in Chat! Ideally let US customize the Sidebar and the menu elements that come with it to OUR liking (Light OR Darkmode) while the REST of the VTT is UNAFFECTED! (And while you are at it, please let us set a background color for the Chat Menu (for me: a shade of grey instead of that bright white!)) THESE changes would make Roll20 A LOT MORE Accessible... Riley D. said: I will definitely take that feedback to the team and see what they say! That said, that sort of customization is exactly what I think one of the cool parts about Roll20 being browser-based is...you do have the power to modify the interface to get it exactly to your liking. The intended design was always to have everything be light mode or dark mode (we just didn't have time to do light mode on the toolbar originally and it sort of fell by the wayside), but we can see how hard it would be to create additional themes or something along those lines that mix and match.

TheMarkus1204 said: Thanks for the Update, BUT can we get a toggle for the Sidebar and its menus to be displayed in DARKMODE while the Rest of the VTT is still in Lightmode (Like it was BEFORE the Update)? ZOOM Slider is now in Lightmode, too! Although I turn that off cause I don't really need it, I'd like to see THIS in Darkmode as well! Might that be possible? Right now I have the Stylus Script in place which indeed recolors the Sidebar, but the Diceroller, Drawing Menu, Zoom Slider etc. are still in Lightmode! It would be nice, if you could target that, cause then we would NOT need the Stylus Script! Here's some additional code for the other menus. Quick and dirty: @-moz-document regexp("<a href="https://app.roll20.*.net/(editor|campaigns.*)/.*" rel="nofollow">https://app.roll20.*.net/(editor|campaigns.*)/.*</a>") { /* Left toolbar background color */ div.master-toolbar-outer { --vtt-container-bg: rgba(0, 0, 0, .8); } /* "Layers" label color */ div.parentContainer &gt; button.el-button.el-button--default.btnStyle.level /* Zoom percentage color */, div.buttons-outer &gt; span { color: rgb(179, 179, 179) !important; } /* Spacer bar color */ div.spacer-outer &gt; div.spacer-inner { background: rgba(255, 255, 255, .2) !important; } /* Selected icon background color */ div.master-toolbar-outer div.icon-slot.icon-selected { background-color: var(--surface-dark2) !important; border: 1px solid; border-radius: 12px; border-color: var(--rgba-020); color: var(--74d543fe); } /* Icons color */ div.master-toolbar-outer div.icon-slot &gt; span { color: var(--grayscale-d30); } /* Target Popup Window */ #targetinginstructions { --vtt-container-bg: var(--dark-gray-disabled); } /* Dice Roller Popup Window */ #vm-dice-roller &gt; div { --vtt-container-bg: var(--dark-gray-disabled); color: rgb(255, 255, 255) !important;} #vm-dice-roller &gt; div button { color: lightgrey; } /* Measure Tool Popup Window */ #vm-measure-tool &gt; div { --vtt-container-bg: var(--dark-gray-disabled); --vtt-grayscale-base: lightgrey; --vtt-submenu-input-color: lightgrey; --vtt-footer-text-color: lightgrey; --vtt-submenu-highlight-color: white; --vtt-submenu-highlight-color2: white; --vtt-surface: var(--surface-dark) ; --vtt-dropdown-header-color-secondary: lightgrey; --vtt-dropdown-header-bg: black; } /* Drawing &amp; Text Tool Popup Windows */ #vm-draw-options &gt; div, #vm-text-options &gt; div, #vm-text-options div.items, #vm-draw-options div.items { --vtt-surface2: var(--dark-gray-disabled); color: white; } #vm-text-options div.selected.text-base-regular, #vm-draw-options div.selected.text-base-regular, #vm-text-options div.text-tool-buttons div.text-tool-button { color: white !important; } /* Turn Tracker Popup Window */ div.initiativedialog, div.initiativedialog .ui-dialog-title, div.initiative_top_section, div.initiativedialog &gt; div.ui-dialog-buttonpane.ui-widget-content.ui-helper-clearfix { color: var(--grayscale-dark-base) !important; background-color: var(--surface-dark-dark) !important; background-image: none !important; --surface-dark-dark: var(--dark-gray-disabled);} div.initiativedialog a.ui-dialog-titlebar-close.ui-corner-all { filter: invert(1); } /* Layer Popup Window */ div.drawer-outer { background: var(--vtt-toolbar-drawer-bg); --vtt-toolbar-drawer-bg: var(--rgba-090); } div.drawer-outer &gt; div.toolbar-button-outer { color: var(--vtt-toolbar-icon-color); --vtt-toolbar-icon-color: var(--grayscale-d30); } div.drawer-outer &gt; div.toolbar-button-outer span.label { color: var(--vtt-layer-label-color); --vtt-toolbar-active-selection-color: white; --vtt-layer-label-color: white; } /* Zoom Toolbar */ #vm_zoom_buttons { --vtt-surface: var(--surface-dark); --vtt-grayscale-base: var(--grayscale-dark-base); --el-button-hover-text-color: #E6E6E6 !important; --vtt-zoom-dropdown-hover-bg: var(--rgba-f10); } #vm_zoom_buttons div.parentContainer button { background: var(--vtt-surface); color: var(--el-button-hover-text-color); --el-button-hover-text-color: #E6E6E6 !important; } /* FX Popup Window */ div.legacy-menu.toolbar-collapse-adjust#secondary-toolbar div.mode.fxtools { background: var(--vtt-surface2); --vtt-surface2: var(--surface-dark2); } div.legacy-menu.toolbar-collapse-adjust#secondary-toolbar div.mode.fxtools select { background: none; color: var(--grayscale-d30); } div.legacy-menu.toolbar-collapse-adjust#secondary-toolbar div.mode.fxtools select:hover { background: var(--vtt-submenu-input-hover-color); --vtt-submenu-input-hover-color: var(--rgba-f10); } } I wasn't able to find the selectors for a few of the popout windows (settings, drawing, fog of war, fx tool) as it appears that those fly-out windows are generated by javascript or something, so as soon as I click out of them they disappear.

Thank you for that! I hope Roll20 will be able to fix this by giving us the options to color it like we want it to... Jarren said: TheMarkus1204 said: Thanks for the Update, BUT can we get a toggle for the Sidebar and its menus to be displayed in DARKMODE while the Rest of the VTT is still in Lightmode (Like it was BEFORE the Update)? ZOOM Slider is now in Lightmode, too! Although I turn that off cause I don't really need it, I'd like to see THIS in Darkmode as well! Might that be possible? Right now I have the Stylus Script in place which indeed recolors the Sidebar, but the Diceroller, Drawing Menu, Zoom Slider etc. are still in Lightmode! It would be nice, if you could target that, cause then we would NOT need the Stylus Script! Here's some additional code for the other menus. Quick and dirty: @-moz-document regexp("<a href="https://app.roll20.*.net/(editor|campaigns.*)/.*" rel="nofollow">https://app.roll20.*.net/(editor|campaigns.*)/.*</a>") { /* Left toolbar background color */ div.master-toolbar-outer { --vtt-container-bg: rgba(0, 0, 0, .8); } /* "Layers" label color */ div.parentContainer &gt; button.el-button.el-button--default.btnStyle.level /* Zoom percentage color */, div.buttons-outer &gt; span { color: rgb(179, 179, 179) !important; } /* Spacer bar color */ div.spacer-outer &gt; div.spacer-inner { background: rgba(255, 255, 255, .2) !important; } /* Selected icon background color */ div.master-toolbar-outer div.icon-slot.icon-selected { background-color: var(--surface-dark2) !important; border: 1px solid; border-radius: 12px; border-color: var(--rgba-020); color: var(--74d543fe); } /* Icons color */ div.master-toolbar-outer div.icon-slot &gt; span { color: var(--grayscale-d30); } /* Target Popup Window */ #targetinginstructions { --vtt-container-bg: var(--dark-gray-disabled); } /* Dice Roller Popup Window */ #vm-dice-roller &gt; div { --vtt-container-bg: var(--dark-gray-disabled); color: rgb(255, 255, 255) !important;} #vm-dice-roller &gt; div button { color: lightgrey; } /* Measure Tool Popup Window */ #vm-measure-tool &gt; div { --vtt-container-bg: var(--dark-gray-disabled); --vtt-grayscale-base: lightgrey; --vtt-submenu-input-color: lightgrey; --vtt-footer-text-color: lightgrey; --vtt-submenu-highlight-color: white; --vtt-submenu-highlight-color2: white; --vtt-surface: var(--surface-dark) ; --vtt-dropdown-header-color-secondary: lightgrey; --vtt-dropdown-header-bg: black; } /* Drawing &amp; Text Tool Popup Windows */ #vm-draw-options &gt; div, #vm-text-options &gt; div, #vm-text-options div.items, #vm-draw-options div.items { --vtt-surface2: var(--dark-gray-disabled); color: white; } #vm-text-options div.selected.text-base-regular, #vm-draw-options div.selected.text-base-regular, #vm-text-options div.text-tool-buttons div.text-tool-button { color: white !important; } /* Turn Tracker Popup Window */ div.initiativedialog, div.initiativedialog .ui-dialog-title, div.initiative_top_section, div.initiativedialog &gt; div.ui-dialog-buttonpane.ui-widget-content.ui-helper-clearfix { color: var(--grayscale-dark-base) !important; background-color: var(--surface-dark-dark) !important; background-image: none !important; --surface-dark-dark: var(--dark-gray-disabled);} div.initiativedialog a.ui-dialog-titlebar-close.ui-corner-all { filter: invert(1); } /* Layer Popup Window */ div.drawer-outer { background: var(--vtt-toolbar-drawer-bg); --vtt-toolbar-drawer-bg: var(--rgba-090); } div.drawer-outer &gt; div.toolbar-button-outer { color: var(--vtt-toolbar-icon-color); --vtt-toolbar-icon-color: var(--grayscale-d30); } div.drawer-outer &gt; div.toolbar-button-outer span.label { color: var(--vtt-layer-label-color); --vtt-toolbar-active-selection-color: white; --vtt-layer-label-color: white; } /* Zoom Toolbar */ #vm_zoom_buttons { --vtt-surface: var(--surface-dark); --vtt-grayscale-base: var(--grayscale-dark-base); --el-button-hover-text-color: #E6E6E6 !important; --vtt-zoom-dropdown-hover-bg: var(--rgba-f10); } #vm_zoom_buttons div.parentContainer button { background: var(--vtt-surface); color: var(--el-button-hover-text-color); --el-button-hover-text-color: #E6E6E6 !important; } /* FX Popup Window */ div.legacy-menu.toolbar-collapse-adjust#secondary-toolbar div.mode.fxtools { background: var(--vtt-surface2); --vtt-surface2: var(--surface-dark2); } div.legacy-menu.toolbar-collapse-adjust#secondary-toolbar div.mode.fxtools select { background: none; color: var(--grayscale-d30); } div.legacy-menu.toolbar-collapse-adjust#secondary-toolbar div.mode.fxtools select:hover { background: var(--vtt-submenu-input-hover-color); --vtt-submenu-input-hover-color: var(--rgba-f10); } } I wasn't able to find the selectors for a few of the popout windows (settings, drawing, fog of war, fx tool) as it appears that those fly-out windows are generated by javascript or something, so as soon as I click out of them they disappear.

Riley D. said: I will definitely take that feedback to the team and see what they say! That said, that sort of customization is exactly what I think one of the cool parts about Roll20 being browser-based is...you do have the power to modify the interface to get it exactly to your liking. The intended design was always to have everything be light mode or dark mode (we just didn't have time to do light mode on the toolbar originally and it sort of fell by the wayside), but we can see how hard it would be to create additional themes or something along those lines that mix and match. It would be REALLY nice if you have an Update for us on this, that you share it here in the thread. THANKS!

Riley, SINCE this Update there is absolutely NO contrast for whatever menu pops up: It is NOT only this Menu, but EVERY Menu on Roll20 right now!