Feat/theme

[jona159]

Type of Change

• Dependency upgrade
• Bug fix (non-breaking change)
• Breaking change
  • e.g. a fixed bug or new feature that may break something else
• New feature
• Code quality improvements
  • e.g. refactoring, documentation, tests, tooling, ...

Implementation

Dark mode support using semantic color tokens from app.css as opposed to write tailwind classes with the :dark prefix in all components (e.g. primary is defined as the text color for html.light and html.darkand the theme applies the respective color. All shadcn components by default come with dark: styles. I only adjusted a few of them, so it is still a TODO to adjust them to the tokens from app.css (for another ticket i would suggest) as well as our other components that already had the dark: prefix. The theme can be toggled via the base / explore route, the preference is persisted in a cookie. Also added a tab in the user settings for language and theme preference to store in the database to persist it across devices.

Checklist

• I gave this pull request a meaningful title
• My pull request is targeting the dev branch
• I have added documentation to my code
• I have deleted code that I have commented out

Additional Information

• This PR closes #

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	70.03%	2129 / 3040
🔵	Statements	68.55%	2198 / 3206
🔵	Functions	68.01%	419 / 616
🔵	Branches	53.71%	1013 / 1886

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
app/db/models/user.server.ts	59.64%	33.33%	62.5%	59.64%	29-40, 74, 130-217, 284
app/db/schema/enum.ts	100%	100%	100%	100%
app/db/schema/user.ts	80%	100%	66.66%	75%	36
app/services/user-service.server.ts	72.72%	65.57%	66.66%	75.46%	103-107, 145-149, 164-168, 195-196, 236-244, 272-278, 283-289, 293-299, 312-314, 423-471, 485, 535-563, 576, 623, 629, 631

Generated in workflow #2677 for commit 8707114 by the Vitest Coverage Report Action

[zven]

The selected language is not shown in the newly created Preferences-menu after selecting it:

Although I am not entirely sure if this ever worked in the old implementation 🤔

[zven]

Color scheme for hover tooltips of devices in dark mode is not properly adjusted:

[zven]

Capitalize theme here:

Theme translation missing. Or shall we keep Theme also in German?