Customizing --retool-filter-background

App Building
1

Hello, does anyone know how to override --retool-filter-background using the CSS app settings?

The new table component has one flaw: the filter dialog inherits the transparency of the table, and there is no apparent way to set the background color of the filter dialog in the UI.

Filter dialog with transparent background

The dialog is barely readable and changing the transparency of the table background would mess up how the table looks, so I'd like independently change the filter dialog to not be transparent. To do so, I have determined I should be able to change the retool filter background by changing its inherited declaration of

--retool-filter-background: rgba(104, 117, 217, 0.33);

to

--retool-filter-background: rgb(104, 117, 217);

Filter dialog with solid background
Filter dialog with solid background692×197 39.8 KB

However, while I can change it in developer tools, I can't figure out how to define an override in the CSS app settings.

Thanks,
-Shaun

2

Give this a try in your Custom CSS settings

[data-testid="Table::ToolbarFilter"] * {
  --retool-filter-background: rgb(104, 117, 217) !important;
}
1 Like
3

Brilliant! That worked. Thank you @mitchmess!!!

1 Like
4

wait, what? lol sorry I'm sooooo bad with CSS, and just as happy Retool mostly lets me forget it exists, that this might be a ridiculously basic question but ya... is that a selector that's based on something other than id or classname and if so what does the * do?

5

Hi @bobthebear,

This part -

[data-testid="Table::ToolbarFilter"]

is an "Attribute" selector
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

The asterisk in CSS is a "Universal" selector
https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors

Check this out for all things involving CSS selectors -
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors

Here are a few more possible solutions to the specific issue relating to OP's question, using the Child combinator instead of the Descendant combinator:

[data-testid="Table::ToolbarFilter"] > * {
  --retool-filter-background: rgb(104, 117, 217) !important;
}

[data-testid="Table::ToolbarFilter"] > div {
  --retool-filter-background: rgb(104, 117, 217) !important;
}
2 Likes
6

Thanks @mitchmess for providing a workaround!

I just merged support for a separate "filter background" style on Table to address this in the product -- it'll be available in the 3.34 release! Would recommend using this style after it becomes available since it will be resilient to changes in the product (the DOM structure of the page is always subject to change, so custom CSS can break on later versions of Retool). I'd love to hear if there are any other styles you find yourself reaching to use custom CSS for often -- we're aiming to supply native support for all of these!

3 Likes
7

Thank you @mckenna. I'll check it out when the 3.34 release is available (browser currently reports Retool 3.12.13).

I ended having to significantly alter a number of CSS declarations because I quickly got to the point where I realized even the testid tag workaround was insufficient to maintain style consistency due to an up-element style change. Hence, I will relish having a bit more element style control.

1 Like