Add ability to change $icon-button-color for custom themes #20925
Description
Your use case
What would you like to do?
I would like to change the icon button colors on the top right of the interface.
Shown below:
Why would you like to do it?
I would like to do this so that I can better theme Element.
How would you like to achieve it?
This can be achieved by allow the $icon-button-color field to be changed via custom themes.
Looking deeper however, the res/themes/dark-custom/css/dark-custom.scss file (which the custom theme is based off of) imports _legacy-dark.scss.
And in _legacy-dark.scss, $icon-button-color is equivalent to $header-panel-text-primary-color.
Which itself is hardcoded to the hex value you see in the screenshot.
For the custom light theme, there is the following line which should allow someone to change the value of $icon-button-color via $quaternary-content (which you can change via custom themes).
However, I think this line's effect does not get called since in light_custom.scss. _light.scss is never called:
I believe the simple solution would be to simply add the following line
$icon-button-color: $quaternary-content;
to
Maybe one can add $header-panel-text-primary-color to be user configurable or set its value to be $quaternary-content. As that change would be propagated to the rest of the _legacy-dark.scss file.
Maybe one could also clean up the inconsistencies between the _legacy-dark.scss and _legacy-light.scss files as well. But for this particular feature request, the first solution is probably the way to go.
Have you considered any alternatives?
N/A
Additional context
Similar issues: #20018
relevant people: @SimonBrandner
ps: i apologize for why the code snippets are not working with the permalinks.