Custom theming MVP

[bwindels]

Requires element-hq/element-web#11017
Related to element-hq/element-web#10946

This adds custom theming provided as JSON blob in the custom_themes settings. The custom themes appear in the theme picker together with the built-in ones. Custom themes are derived from the light or dark theme (for sensible defaults of some colors, as we had to reduce the palette). All SASS variables are assigned 1 of 13 CSS variables which are set at runtime from the JSON blob.

Might be best to review the PR as one change, as the direction of this PoC went a bit left and right.

Example configuration this would use:

"settingDefaults": {
        "custom_themes": [
            {
                "name": "Pastelle Blue",
                "is_dark": false,
                "colors": {
                    "accent-color": "#3596fc",
                    "primary-color": "#368bd6",
                    "warning-color": "#ff4b55",
                    "sidebar-color": "#27303a",
                    "roomlist-background-color": "#f3f8fd",
                    "roomlist-text-color": "#2e2f32",
                    "roomlist-text-secondary-color": "#61708b",
                    "roomlist-highlights-color": "#ffffff",
                    "roomlist-separator-color": "#e3e8f0",
                    "timeline-background-color": "#ffffff",
                    "timeline-text-color": "#2e2f32",
                    "timeline-text-secondary-color": "#61708b",
                    "timeline-highlights-color": "#f3f8fd"
                }
            }, {
                "name": "Custom Dark Purple Theme",
                "is_dark": true,
                "colors": {
                    "accent-color": "#6503b3",
                    "primary-color": "#368bd6",
                    "warning-color": "#b30356",
                    "sidebar-color": "#15171B",
                    "roomlist-background-color": "#22262E",
                    "roomlist-text-color": "#A1B2D1",
                    "roomlist-text-secondary-color": "#EDF3FF",
                    "roomlist-highlights-color": "#343A46",
                    "roomlist-separator-color": "#a1b2d1",
                    "timeline-background-color": "#181b21",
                    "timeline-text-color": "#EDF3FF",
                    "timeline-text-secondary-color": "#A1B2D1",
                    "timeline-highlights-color": "#22262E"
                }
            }
        ]
    }

Which is exposed in the theme picker as:

The setting also supports the account level so it can be set/overwritten in the devtools by setting the account data:

{
  "type": "im.vector.web.settings",
  "content": {
    "theme": "custom-Custom Dark Blueish Theme",
    "custom_themes": [
      {
        "name": "Custom Dark Blueish Theme",
        ...
      }
    ]
  }
}

One improvement would be to watch the custom_themes settings to reapply it when the account data changes, but we want to get a PoC out rather fast, so doing that later if needed.

[turt2live]

lgtm enough to merge for release. My comments are mostly tiny cleanup tasks than anything else.

Would also be good to add to the riot-web docs on this how to set the default_theme to a custom theme, assuming that works.

Edit: to be clear: feel free to merge this and do the cleanup post-release. It's more important that we ship this to the customer than fix the inconsequential bits.

[dud1337]

Hell yes.