[FEATURE] Full UI theming system with theme presets and custom CSS

The issue suggests semantic CSS variables, built-in presets, custom CSS, and theme import/export, but names no files, tests, or entry points. Start by checking the current Termix UI theming implementation and its settings flow. Done would mean users can select and customize themes across the full interface, with import/export support; this is broad design work, and the repository is marked retired.

Title

Full UI theming system with theme presets and custom CSS

Platform

Desktop app (Windows, Linux, and macOS)

Is it related to an issue?

Description

I would like to suggest a more flexible theming system for the entire Termix UI.

Termix already offers appearance customization and terminal color themes, but it would be useful to extend this to the complete application interface.

The idea would be similar to applications such as Jellyfin: users could choose from built-in themes, while advanced users could also provide their own custom CSS.

Proposed features

Built-in UI themes

For example:

• Default Dark
• Light
• Dracula
• Nord
• Classic / Legacy Termix
• High Contrast
• Community themes

A "Classic Termix" preset could recreate the darker brown/black appearance of the pre-2.3 UI without requiring the old layout itself to be maintained.

Global theme variables

Allow users to customize semantic UI colors such as:

• Background
• Secondary background
• Cards / surfaces
• Borders
• Foreground text
• Muted text
• Primary/accent color
• Accent foreground
• Success
• Warning
• Error/danger
• Selection color

Potentially also:

• Border radius
• Border intensity
• Compact / comfortable spacing
• Panel transparency

Custom CSS

For advanced users, add an optional Custom CSS field, similar to Jellyfin.

Example:

:root {
  --background: #080a08;
  --card: #0d110d;
  --border: #1e361e;
  --foreground: #e8f0e8;
  --primary: #00c300;
}

.sidebar {
  border-right: 1px solid var(--border);
}

This would make it possible to create and share community themes without requiring changes to Termix itself.

Theme import/export

It would also be useful to support importing/exporting themes, for example as JSON or CSS.

This could allow themes to be shared through GitHub or a future community theme gallery.

Example concept:

{
  "name": "Termix Green",
  "background": "#080A08",
  "surface": "#0D110D",
  "border": "#1E361E",
  "foreground": "#E8F0E8",
  "muted": "#899589",
  "accent": "#00C300"
}

Why this would be useful

The older Termix UI around the 2.2.x releases had a very distinctive dark interface with subtle borders and panels.

The newer interface is functionally better, but having a flexible theming system would allow users to recreate styles like the old interface without maintaining multiple UI layouts.

It would also make Termix much easier to visually integrate into different homelab environments.

The Solution

Possible implementation

Since Termix already uses React/Tailwind/shadcn-style theming, this could potentially be implemented through semantic CSS variables, with built-in presets setting those variables and Custom CSS being applied as an optional additional layer.

A possible priority order could be:

1. Built-in theme
2. User-defined theme variables
3. Custom CSS overrides

This would provide safe defaults while still allowing advanced customization.

Additional Context

No response