I'm building a dark theme.
Is there a way to match the color behind the scroll bar to the components background color? I'm also not sure if this only appears in editor mode or if it will actually show up to the end user. When I inspect the page, the whitespace goes away.
Any ideas? Thanks in advance!
Editor Mode
Editor Mode while Inspecting
Found a custom css solution.
/* This part changes the scrollbar track (the part behind the scrollbar) */
::-webkit-scrollbar-track {
background: #1E1E1E; /* Dark grey color, you can choose any color you like */
}
/* This part changes the scrollbar handle */
::-webkit-scrollbar-thumb {
background: #555; /* Medium grey color, this is the actual scrollbar */
}
/* You can also change the scrollbar width and height */
::-webkit-scrollbar {
width: 12px; /* Width of the vertical scrollbar */
height: 12px; /* Height of the horizontal scrollbar */
}
I have yet to figure out a solution for the white square when both horizontal and vertical scrolls are present.
Added an internal ticket for this! Thank you for sharing your CSS solution 
Out of curiosity, would this solution work for you?
https://community.retool.com/t/how-to-apply-quick-dark-mode-to-your-app-with-custom-css/23133
I don't see any white squares in mine, but I am using MacOS so perhaps it's different!
I did see that post but I wasn't a huge fan of just inverting the styling. You're correct, the white square is not visible when doing the CSS invert.
The screens on this post we're built using the App theme config, which is when the white square comes in.
I will just wait for the below ticket to be completed for light/dark mode switching. Being able to switch between themes via user input is the ideal solution.
Expose Themes inside the Retool Environment
You can now create and manage themes from your organization's Themes settings, or create custom themes that apply to individual apps. Organization-level themes are only available on Business and Enterprise plans. Custom themes are available on all plans.
