Kutt Dark Mode CSS
Ein sauberes Dark-Mode-Theme für Kutt, den selbst gehosteten URL-Shortener.
## Vorschau
- Hintergrund: Dunkles Blaugrau (`#0f1419`)
- Akzentfarbe: Blau (`#1D6397`)
- Alle Icons (Edit, Delete, QR-Code, Stats, Ban) bleiben sichtbar und funktional
## Installation
### 1. Volume in `docker-compose.yaml` einrichten
Der Kutt-Container braucht ein Volume, das den Custom-Ordner einbindet:
```yaml
services:
kutt-app:
image: kutt/kutt:latest
volumes:
- ./data/app/custom:/kutt/custom
```
### 2. CSS-Datei kopieren
Die Datei `custom.css` in den CSS-Ordner innerhalb des Custom-Verzeichnisses legen:
```bash
mkdir -p ./data/app/custom/css
cp custom.css ./data/app/custom/css/custom.css
```
### 3. Container neu starten
```bash
docker restart kutt-app
```
### 4. Im Browser prüfen
Die Seite mit `Ctrl + Shift + R` (Hard-Reload) neu laden, damit der Browser-Cache das neue CSS holt.
## Logo anpassen
Kutt unterstützt ein eigenes Logo über das Custom-Verzeichnis:
```bash
mkdir -p ./data/app/custom/images
cp dein-logo.png ./data/app/custom/images/logo.png
```
Das Logo wird automatisch von Kutt geladen. Das CSS sorgt dafür, dass es als 32x32px Kreis dargestellt wird:
```css
img[src*="logo"] {
width: 32px;
height: 32px;
object-fit: contain;
border-radius: 50%;
}
```
Wenn du ein eckiges Logo bevorzugst, einfach `border-radius: 50%;` entfernen oder auf z.B. `border-radius: 6px;` ändern.
### Weitere anpassbare Bilder
| Datei | Zweck |
|---|---|
| `images/logo.png` | Logo im Header |
| `images/favicon.ico` | Browser-Tab-Icon |
| `images/favicon-16x16.png` | Favicon 16px |
| `images/favicon-32x32.png` | Favicon 32px |
| `images/favicon-196x196.png` | Favicon groß (Android etc.) |
| `images/card.png` | Social-Media-Vorschaubild (Open Graph) |
Alle Dateien kommen in `./data/app/custom/images/`.
## Wichtige CSS-Variablen
Die wichtigsten Farben werden über CSS Custom Properties gesteuert. Sie stehen ganz oben in der `custom.css` im `:root`-Block und können dort einfach angepasst werden:
### Akzentfarbe
```css
--color-primary: #1D6397; /* Hauptfarbe für Links und Buttons */
--outline-color: #1D6397; /* Fokus-Rahmen */
--focus-outline-color: rgba(29, 99, 151, 0.5);
--checkbox-bg-color: #1D6397; /* Checkbox-Farbe */
```
Um die Akzentfarbe zu ändern, diese vier Werte plus die Button-Gradients anpassen:
```css
--button-bg-primary: linear-gradient(to right, #1a5a8a, #1D6397);
--button-bg-primary-box-shadow-color: rgba(29, 99, 151, 0.35);
```
### Hintergründe
```css
--bg-color: #0f1419; /* Seiten-Hintergrund */
--table-bg-color: #151d28; /* Tabellen-Header/Footer */
--table-tr-hover-bg-color: #1a2535; /* Zeile beim Hover */
```
Für Tabellen und Karten wird `#141c26` als Hintergrund und `#1a2332` für erhöhte Elemente (Inputs, Buttons) verwendet. Diese Werte stehen direkt in den CSS-Regeln (nicht als Variable).
### Text
```css
--text-color: #dce0e8; /* Haupttext */
--secondary-text-color: #8b95a5; /* Gedämpfter Text */
--input-label-color: #c8cdd5; /* Label-Text */
```
## Custom Footer
Kutt erlaubt einen eigenen Footer über eine Handlebars-Vorlage:
```bash
mkdir -p ./data/app/custom/views/partials
```
Dort eine Datei `footer.hbs` anlegen, z.B.:
```html
```
Das CSS enthält bereits passende Styles für `.site-footer`.
## Verzeichnisstruktur
So sollte das Custom-Verzeichnis am Ende aussehen:
```
data/app/custom/
css/
custom.css
images/
logo.png
favicon.ico
favicon-16x16.png
favicon-32x32.png
favicon-196x196.png
card.png
views/
partials/
footer.hbs
```
## Hinweise
- Das CSS überschreibt Kutts eingebaute CSS-Variablen. Bei einem Kutt-Update könnten sich Klassennamen ändern — nach Updates kurz prüfen.
- Die Icons (Edit, Delete, QR, Stats, Ban) werden bewusst nicht über `color`-Overrides verändert, sondern behalten ihre originalen `stroke`/`fill`-Werte. Nur die Hintergründe der Action-Buttons werden dezent angepasst.
- Getestet mit Kutt `latest` (Stand Juli 2025).
© Patrick Asmus · Techniverse Network · Lizenz