Support Custom CSS Stylesheet

[yyportne]

It would be helpful for people with usability issues such as vision problems to be able to modify the default appearance of riot-desktop. For example the colors (text, background) and font-size. A user css stylesheet could be loaded (if present) from riots app-data directory.

[MTRNord]

I think you want basicly the same as I do in #5844

[yyportne]

I think #5844 is different because you ask for a theme engine and builder, which is way more complex. In this issue I am only asking for some mechanism to load a *.css file into riot in order to workaround some usability issues.

[MTRNord]

5844 is meant of a combination of what telegram has for styles and having a gui to live create thoose styles in my head atleast.

So just to be sure this is basicly to load css into the client?

[yyportne]

Sorry for the long delay of my reply. Yes my request is about loading a simple css. And in my case only text/background color and font-size changes need to be supported.

For example a family member which uses riot is not able to read the message when the text is red. Since he uses the dark theme the red on dark background has to little contrast. (I believe riot does render text red for example with @room messages)

[yyportne]

I forgot to mention that currently using keyboard short-cuts it's possible to scale the user interface. This is a good workaround for font-size issues.

[menturion]

+1 Customization and theming is essential.

[fti7]

Any Progress here? I also would like to adjust Theme Settings. An additional Textarea under Settings would be sufficient

[lampholder]

Thinking about this a bit more, I'm afraid I'm pretty certain that this isn't a feature that should be exposed in Riot today.

This is not to diminsh the accessibility issues, which do need addressing, nor is to say that I'm against users being able to style Riot to their liking in principle - the problem is just that if we offer theming via custom CSS in a text area, either:

• it'll break all the time as we mangle selectors, giving a bad user experience and resulting in the filing of invalid bugs, or
• we'll take care not to break it all the time, slowing us down as we work to not change code that was never designed not to be changed

Sorry to only ask this question now, but is there a reason that you can't use stylus/similar to provide this sort of theming? I think stylus works just as well (for a web session, anyway) as the proposed solution, without setting the wrong expectations for the user (I use it to make the composer/message history monospaced, for example).

[fti7]

Why no Stylus/Similiar: Simply because i want to use the Riot Desktop Clients and not an Web Browser

For me as an very new User here there was following possible ways to Customize the Theme to my needs. Either

1. hacking/patching the theme css file locally after each Update -> Ugly/Hard to Maintain/Share

2. Create a new Theme and try to PR that into the Project (Which will be rejected because you need then maintain multiple Themes afterwards)

3. Implement an real Theming Engine, maybe based on the existing SCSS Variables Personally i dont have an idea how to do this the right way & the Variables also need to be some kind of Stable. Also for accessible purposes we need to add more Variables like for Font Size BTW The Dark Theme scss Files also contains hacky CSS Code

=> A lot of Effort, Riot needs then official Support/Resources for Custom Theming to keep Variables Stable. (But its an Abstraction then and might be easier) At the End its imho the best Solution

4. Implement an Custom CSS Function
   • Pragmatic Solution
   • Infinite possibilities to modify(and break) things

I fully understand your Points and i also agree to it. But i also dont see a Timeline for a complete supported Theming Engine. There are so much other horrible UX Problems in Riot which should be addressed first. So there might be several more Years to implement this.

Would it be an acceptable trade-off to move this Setting away from the normal User Settings Menu, to an (maybe hidden) Developer/Advanced Menu? We could also Setup an Community Github Repo for User Themes which might be Maintained from the Creators. If some bigger CSS Changes in riot-web happens, it might also be easier to change the selectors directly for all Themes at once.

[quazgar]

I also strongly prefer the standalone desktop client, and I could live with changing identifiers or internal structure and I really like @fti7's idea of user-maintained repos with CSS style sheets.

[MTRNord]

Stylus works for web really nice. I did a theme with it before. It has some issues though like hunting for css names is a pain tbh. A integrated solution like for example what telegram has would be nice as that would even support desktop. Desktop can only currently supported with trickery which is not really any good.

[fti7]

@lampholder any updates to this Topic?

[Kommynct]

I think the proper solution is to wait until riot is much more mature to do this... they're very correct that it would create an extremely jarring user experience, but maybe add it in a hidden menu that you can only access by doing something specific, like the developer menu in android, for advanced users?

[lampholder]

The update is that we've started experimenting with an implementation of custom theming which lets you define a theme by specifying a set of configurable variables (right now that's basically just colours, but could extend to logos/font choices/font sizes too). We're trying to give some/most of the benefit of custom css, without the fragility/frustrations we'd cause by continuously changing how CSS selectors are handled within the app :D

Right now you can fiddle with the custom themes using /devtools or config.json: https://github.com/matrix-org/matrix-react-sdk/pull/3503

We're planning to add support for custom fonts/font-sizes too. The eventual goal is to allow the same theme definitions to be shared (probably from an endpoint on the homeserver) across Riots web, desktop and mobile (but that's a little further in the future).

The inspiration for this work has been branding over accessibility, but I'd be interested to hear what other levers (if any) you think you'd need to be able to create more accessible themes?

[lampholder]

To be a bit clearer, I'm confident that if we are to expose customisable themeing to Riot users it should be via the 'controlled theming' approach we've started with https://github.com/matrix-org/matrix-react-sdk/pull/3503 in preference to a fully custom css approach, so I'm afraid I don't think we should merge https://github.com/vector-im/riot-web/pull/10707

[SimonSapin]

https://github.com/matrix-org/matrix-react-sdk/pull/3503 seems to be all about color and not to provide any control over font sizes. I was hoping to increase them (for readability) without also increasing icon size and padding like Electron’s zoom does, which quickly reduces the amount of content that can fit on one screen.

[ara4n]

custom font sizes are here at https://github.com/matrix-org/matrix-react-sdk/pull/4424 ftr

[martinvonwittich]

The ability to drop in something like a UserContent.css into the Riot folder to override its CSS would be amazing. I would be fine with it if this breaks on every update; as far as I am concerned, Riot developers don't need to accommodate my local CSS hacks :)

[bwinton]

As I understand it, the main point against letting people use their own custom CSS is that it will inevitably break as the app gets updated and the structure of the pages change, and the developers think that they can offer the most common things as pre-defined variables…

Having worked on Firefox's UX team, I very much sympathize with both desires (to not have the design completely messed up, and to not have to deal with a ton of breakage), but as a user there are things I would like to change that aren't currently variables, and seem unlikely to be (like line spacing, avatar size, and minimum heights of elements), and so I'd like to propose something that might satisfy both sides.

What if Riot-Desktop loaded a file named something like Unsupported-Style-v1.6.0.css (and optionally sent its contents back to a server somewhere for the designers and developers to use to see what things people want to change)? That way, it would obviously be unsupported, so there shouldn't be that many complaints when things change, and it's clearly a per-version, so when the version gets updated, people will need to go through it to make sure it's still working they way they intend? Yes, it's more of a hardship on the people who want custom CSS, but as one of those people, I feel like that's a reasonable trade-off…

[ValeTheVioletMote]

People go out of their way and risk being banned by Discord just to load in custom css, and it's just as janky each time Discord updates. That doesn't slow them down.

We go to Matrix for the feeling of open source, user control, and community collaboration. Being able to style our own CSS fits well within that theme. It was the first thing I looked for when trying out Riot, and it's what led me here.

[FlosCarmeli]

I agree with @ValeTheVioletMote it should at least be an option, even if considered an unsupported feature. It would drive an even larger userbase.

[fooness]

Very much agree with the last four messages here. I’m happy with the custom theme support that Element already supports, but there’s still quite some things to fix. There’s very many elements that don’t respect the colors defined by custom themes as they are hardcoded in Element.

It would be great if Element would offer some way of loading custom css. There’s (maybe) three scenarios which are more or less important to different people.

1. The server admin wants to define a global custom css file for all themes.
2. The server admin wants to define a non-global custom css file per custom theme.
3. The user wants to define a global custom css file.

In my opinion, Element should definitely support 1. and 2. … because, and that was also mentioned quite often in issues like this one, for 3. the users could just use one of the many browser plugins. (Some people might say that 3. is important for Element-Desktop, maybe?)

PS: And yes, if selectors, structures, or variables change in Element … and that “breaks” the custom themes … that’s fine. There’s changelogs we can look into and if we’re able to write custom css in the first place, then we’re also able to fix it. The custom theme feature could come with some kind of disclaimer (or somesuch), if that would give the team behind Matrix/Element a better feeling? Feel free to discuss …

[bwinton]

As a user of Element Desktop, yes, 3. is important for exactly that reason. 😉

[MTRNord]

well atleast 1 or a mix with 2 is already possible by making a full custom theme at compile time. It is a bit more complicated but easier to do when doing a full css file. CSS replacing is a bit difficult anyway I think. But some more comments in the already existing theme files would help doing themes at compiletime

[fooness]

@bwinton I don’t know if it’s possible to add custom css to Electron app, maybe there’s an easy way like in the browser, too? Anyway, I think that needs the most work from the developers as it also needs interface features and whatnot …

@MTRNord In the very beginning I tried that, but that’s just not comfortable. For every little change you’d need to recompile and at every update you need to recompile. It would be better to work with what’s there and just extend it. Ideally, “what’s there“ would be a perfect structure with semantic groups of elements with corresponding color variables. Think of the following screenshot taken from Slack, but it’s totally fine if for the beginning(!) that’s only possible via config.json …

And the reason I listed 1. and 2. is … there might be users who want to use the default light and/or dark theme and they should be able to without interference of custom css. People who choose to use the custom theme, they should also get the custom css (hence the feature for 2., custom css yes but only for custom themes if specified in those) …

[bwinton]

@fooness It's not possible without support by the developers of the app. (I mean, you could open the dev tools and change all the elements every time you start it up, but that's not really the same.) Also, my proposal above didn't require any UI…

[fooness]

@bwinton But where should this file be located and how do you want to edit it?

[bwinton]

Wherever the devs want to load it from, and with any standard text editor. (I like vi or Visual Studio Code, but your mileage may vary. 😉) I'm thinking it would work something like Firefox's userChrome.css…

[fooness]

Not sure I can follow. If there’s something like Element-Web’s config.json anywhere in Element-Desktop which you could modify on your computer, then you could specify a global (see 1.) or non-global (see 2.) custom css file there and just create/edit that file.

So, if there is this file and possibility, then we’re basically all on the same track …

[bwinton]

There doesn't seem to be a config.json, and I'm not sure modifying a file in the app itself would lead to good things if it had to update… But other than that, I agree that that would work!

[MTRNord]

@bwinton there is a config.json somewhere. it might a) be deep in the files kinda hidden behind all the electron stuff or b) inside a asar file (which essentially is just a zip with a fancy name). not sure where it currently is but desktop is just the web app bundled in electron

[aaronraimist]

The location where you would put the config.json file is documented here: https://github.com/vector-im/element-desktop#user-specified-configjson

[bwinton]

Oh, fantastic! Yes, in that case that would be perfect!

[fooness]

Thank you, @aaronraimist … so that would basically solve the issue for @bwinton if custom css would be possible as described above (for example). To rephrase: allow setting a global custom css file as well as a per-custom-theme custom css file in config.json …

[SimonSapin]

there is a config.json somewhere. it might a) be deep in the files kinda hidden behind all the electron stuff or b) inside a asar file (which essentially is just a zip with a fancy name).

Both of those are kinda user-hostile. It would be nice to make this file more easily editable by users without risk of it being overwritten in an update.

[aaronraimist]

@SimonSapin https://github.com/vector-im/element-web/issues/7316#issuecomment-669487249

[phil-s]

In a duplicate issue the comment was made:

We are not currently intending on supporting this ourselves - there are several web browser extensions which achieve this.

As has been mentioned here before, that does not help with the desktop client.

The desktop client's github repository just points to the web client's issue queue (here) saying that they're for the same product, which seems to lead to issues like this one being ignored under the assumption that users are using the web client. I can see why the maintainers don't want two issue queues, but at the same time it would be good if the desktop client was taken into consideration at such times.

It's crazy frustrating to be able to manually tweak the UI to my personal preferences via the developer tools, but have no way at all of persisting those styles from session to session.

This issue seemed to get derailed almost immediately into talk of some kind of theme system which I suspect will probably take a long time to develop and still won't achieve what was asked for -- which is something much, much simpler. We're not asking for anything more than web client users can already achieve using browser extensions, so I don't understand the concerns about custom styles causing undesirable problems -- allowing a custom stylesheet for desktop client users would merely be achieving parity with the web client.

Personally I don't need a fancy theme system, or a style editor, or any new UI. I just want to put some CSS in a file and have the desktop client read it. That facility would make a lot of people very happy. (Go ahead and develop the other stuff afterwards by all means, but this issue isn't about those things.)

[dhenneke]

I think this now get's more interesting with to the recent move to use CSS Variables and Compound. Customizing the new theme can be as easy as loading a new CSS file with:

.cpd-theme-light {
  --cpd-color-text-action-accent: blue;
}

This could maybe be done with a "additional_css_file": "..." in the config.json. This might conflict with the CSP, but if one injects this file into the webserver directory of e.g. the docker image, it would work.