Theme: Watchtower (Sci-Fi / Dark)

Dieses Theme basiert auf der minecraft-watchtower UI. Es ist ein High-Contrast Dark Mode mit Neon-Akzenten, ausgelegt auf technische Dashboards und "Immersive UIs".

Verwendung

Binde statt tokens.css die Datei tokens_watchtower.css ein und ergänze theme_watchtower.css.

<link rel="stylesheet" href="design/tokens_watchtower.css">
<link rel="stylesheet" href="design/components.css"> <!-- Standard Components -->
<link rel="stylesheet" href="design/theme_watchtower.css"> <!-- Theme Overrides -->

Zusätzlich sollte die Klasse .bg-noise direkt nach dem <body> Tag eingefügt werden:

<body>
  <div class="bg-noise"></div>
  ...
</body>

TUI (Terminal User Interface) Adaption

Da dieses Design oft in CLI-Tools oder TUIs verwendet wird, gelten folgende Mappings für Terminals (16/256 Farben).

Farb-Palette

Rolle	CSS Variable	ANSI Color (16)	ANSI Code	Hex Fallback
Background	`--bg-dark`	Black	`\e[40m`	`#0b0f14`
Text	`--text`	White (Bright)	`\e[97m`	`#e6edf5`
Muted Text	`--text-dim`	Cyan (Dim)	`\e[36m`	`#9aa7b8`
Accent	`--accent`	Cyan (Bright)	`\e[96m`	`#00e08f`
Success	`--success`	Green (Bright)	`\e[92m`	`#00e08f` (Teal)
Warning	`--warning`	Yellow (Bright)	`\e[93m`	`#ffb454`
Error	`--danger`	Red (Bright)	`\e[91m`	`#ff5e5e`

Block-Elemente & Rahmen

Für TUI-Rahmen nutzen wir "Heavy" oder "Double" Lines, um den technischen Look zu imitieren.

Box Border: ═ (Double Horizontal), ║ (Double Vertical), ╔ ╗ ╚ ╝ (Corners)
Progress Bar: █ (Full Block) für den Füllstand, ░ (Light Shade) für den Hintergrund.

Beispiel (Charm / Bubble Tea - Go)

var (
    ColorAccent = lipgloss.Color("#00e08f")
    ColorBg     = lipgloss.Color("#0b0f14")
    ColorText   = lipgloss.Color("#e6edf5")

    StyleCard = lipgloss.NewStyle().
        Border(lipgloss.RoundedBorder()).
        BorderForeground(ColorAccent).
        Padding(1, 2).
        Background(ColorBg)
)

2.1 KiB Raw Blame History