⚡️ Feature: More Themes

[newhinton]

Feature Description

I would like to see more themes, and the ability to select them.

Problem It Solves

The reason for this is that i find the dark theme to be so extremely dark that it becomes hard to read.
The light-theme has basically the same issue, except less extreme.

Overall i think the contrast between background, container background, borders and some other elements is quite harsh.

(There are three borders, but at least on my screen, they are barely visible)

But using the light-theme is also not working since its tied to the browser's theme, and i don't want to change that.

Proposed Solution

A theme selector with a "grey" theme would help.

Thank you!

Alternatives Considered

Improvements to the existing theme to improve contrast would work too, but then again, if people like it, it shouldn't be taken away from them. Choice is good!

Additional Context

No response

Would you be willing to work on this feature?

• Yes, I'd like to implement this feature
• I could help with parts of this feature
• No, I'm just suggesting the feature

[github-actions]

We have found issues that are potential duplicates:

• ⚡️ Feature: Dashboard improvements #1698 (63.89%)

• ⚡️ Feature: Telegram Topics #1660 (64.58%)

If any of the issues listed above are a duplicate, please consider closing this issue & upvoting/commenting the original one.
Doing so will help prioritize bugs and features.

[newhinton]

I tried implementing this myself, but it requires a lot more undestanding of svelte than i have, since both the dark/light switch and the oled-one would need to be reworked to fit into a "theme"-dropdown selector.

The theme-changes themselfes are quite trivial, here are some examples:

:root.rainbow {
    --background: color-mix(in srgb, white 95%, var(--primary));
}

:root.lighter {
    --foreground: color-mix(in srgb, #424242 50%, var(--primary));
}

.dark.grey {
    --background: rgb(49, 49, 49);
    --foreground: oklch(0.985 0 0);
    --card: rgba(207, 207, 207, 0.6);
}

Lighter:

Rainbow:

Grey:

The light ones are just experiments i made with coloring the background and text in the choosen primary color. The text one doesn't work that great since it colors to much text, but that could be improved if something like it is wanted.
But especially the grey one improves legibility for me considerably.

[kmendell]

If you want to open a pr with that starting point I can definitely work off of it

[newhinton]

I have created a very barebones pr with some examples. Thank you for taking this up!