Add support of Custom themes

[t3dium]

An element style dark mode would be nice since I think the current dark modes colour scheme looks a bit outdated.

Can we have a theme with: text background #15191E, sidebar #23272C, and the people+home sidebar to be #2A282B

Also, an option to change font size would be nice, by default the font looks quite massive

It would be better to have the custom theme feature instead of asking for a theme to be added to Cinny.

[GTcreyon]

How exactly would this be implemented? My understanding of Tauri is limited, but I'm not aware of any way to import custom CSS from the filesystem without CORS issues.

[Kommynct]

You could cheat and use the element themes backend, and just assign the css selectors to the same names as element.

This would also make the themes interoperable, and bring all of the element themes to cinny.

[archeite]

How exactly would this be implemented? My understanding of Tauri is limited, but I'm not aware of any way to import custom CSS from the filesystem without CORS issues.

Maybe a text box to paste CSS into? Or maybe how Element (Labs) does it with theme URLs? (https://github.com/vector-im/element-web/blob/master/docs/theming.md)

[LilyLavenderPony]

Hey, is there still interest in custom theming for Cinny?

I have been looking into this and would be interested in working on a lightweight approach, but I want to check first if this aligns with the maintainers’ direction.

Instead of a full theme system, I would

• introduce a few "stable hooks" (class names) in key layout components so styling doesn’t depend on hashed Vanilla Extract classes
• make certain foreground layers partially transparent, so a user-defined background can show through
• expose simple user options to set a linear gradient background and angle.

The goal is to enable some level of runtime customisation without refacturing the current styling system or requiring theme import/export.

From what I have seen, working purely with external CSS is quite fragile due to hashed class and variable names, so this seems like a feasable way to open up basic theming.

To the maintainers: Does this approach sound acceptable?

[u9000-Nine]

From my conversations with @kfiven, that seems like the direction he was planning.

I'd want the transparency to be definable though, since that can affect accessibility. Also a blur setting would be nice if we're going to implement transparency

[LilyLavenderPony]

Thanks, I agree. I’m working on this now and will open a pull request once it's in a good state.