63 lines
2.1 KiB
Markdown
63 lines
2.1 KiB
Markdown
# 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`.
|
|
|
|
```html
|
|
<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:
|
|
```html
|
|
<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)
|
|
|
|
```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)
|
|
)
|
|
```
|