Dark Theme - White Space behind Scroll Bar

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

CleanShot 2024-02-14 at 18.37.33

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 */
}

CleanShot 2024-02-19 at 20.31.40

I have yet to figure out a solution for the white square when both horizontal and vertical scrolls are present.

1 Like

Added an internal ticket for this! Thank you for sharing your CSS solution :pray:

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