Allow message bubbles variables override in config.json for custom themes

[benneti]

When using a custom theme in element, it would be nice to set the bubble colors to match the theme. Right now it seems to always fall back to the light theme (even for dark themes).

Describe the solution you'd like.

Override bubble colors in custom themes, i.e.:

{
  "showLabsSettings": true,
  "settingDefaults": {
    "custom_themes": [
      {
        "name": "Dracula",
        "is_dark": true,
        "fonts": {
          "faces": [
            {
              "font-family": "Fira Sans"
            }
          ],
          "general": "Fira Sans",
          "monospace": "Fira Code"
        },
        "colors": {
          "accent-color": "#bd93f9",
          "primary-color": "#bd93f9",
          "warning-color": "#ff5555",
          "sidebar-color": "#1e1f29",
          "roomlist-background-color": "#1e1f29",
          "roomlist-text-color": "#f8f8f2",
          "roomlist-text-secondary-color": "#f8f8f2",
          "roomlist-highlights-color": "#00000030",
          "roomlist-separator-color": "#4d4d4d90",
          "timeline-background-color": "#282A36",
          "timeline-text-color": "#f8f8f2",
          "timeline-text-secondary-color": "#ff79c6",
          "timeline-highlights-color": "#00000030",
          "eventbubble-self-bg": "#6272a4",
          "eventbubble-others-bg": "#1e1f29",
          "eventbubble-bg-hover": "#44475a",
          "eventbubble-reply-color": "#6272a4",
          "avatar-background-colors": [
            "#8be9fd", "#50fa7b", "#ffb86c", "#ff79c6", "#bd93f9", "#ff5555", "#f1fa8c", "#6272a4"
          ],
          "reaction-row-button-selected-bg-color": "#bd93f9"
        }
      }
    ],
    "useCustomFontSize": true,
    "theme": "custom-Dracula"
  },
  "default_theme": "custom-Dracula",
}

Shamelessly taggin @gsouquet as he seems to have implemented the relevant parts.

[germain-gg]

As far as I'm aware the colour override is possible if you provide the correct variable name in the color object in config.json as you did in the example above.

I'm not entirely sure what actions we should take for this issue to be resolved from your point of view?

[benneti]

I only got the variable name from the commit, is there any transformation I need to take into account in the config similar to the custom-themename?

I have the config as above and am sure that it is loaded as all other colors correspond to my settings, but the bubbles have the same color as the text, see the screenshot.

This is also a correction to my initial report, all bubbles seem to have the text color not the color of the light theme.

So I guess for me to resolve this it would make sense to either document the correct variable names in https://github.com/vector-im/element-web/blob/develop/docs/theming.md .
If the variables I used are the correct ones, I guess they do not behave as expected and this would be a bug.

Thank you for implementing message bubbles by the way 😊

[benneti]

Actually after checking out how themes work a bit more, I think it is necessary to adabt https://github.com/matrix-org/matrix-react-sdk/blob/dd65d47fbaa592bf5b648e774bd2ab7dbaba22bc/res/themes/light-custom/css/_custom.scss to include the message bubble colors, I am not sure wether anything in addition would be necessary.

[germain-gg]

Sounds good to me!
If you have ideas on how to improve this I would welcome a PR. I am not so well versed in custom themes on Element but it seems like you're on the right track

[benneti]

I tried it here matrix-org/matrix-react-sdk#6568 in case you want to check it out!