kutt-darkmode-css/README.md

Kutt Dark Mode CSS

Ein sauberes Dark-Mode-Theme für Kutt, den selbst gehosteten URL-Shortener.

🏰 Website · 📰 Community · 🐘 Mastodon · 💬 Support

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:

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:

mkdir -p ./data/app/custom/css
cp custom.css ./data/app/custom/css/custom.css

3. Container neu starten

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:

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:

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

--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:

--button-bg-primary: linear-gradient(to right, #1a5a8a, #1D6397);
--button-bg-primary-box-shadow-color: rgba(29, 99, 151, 0.35);

Hintergründe

--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

--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:

mkdir -p ./data/app/custom/views/partials

Dort eine Datei footer.hbs anlegen, z.B.:

<footer class="site-footer">
  <p>
    <a href="https://example.com" target="_blank" rel="noopener">Powered by Example</a>
    <span aria-hidden="true">|</span>
    <a href="/terms">Nutzungsbedingungen</a>
  </p>
</footer>

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}