Zum Inhalt
r/ rittek uiDOCS
Admin-Demo ↗

DESIGNWERKZEUGE / THEME-EDITOR

Ihre Farbwelt. Ihr Rhythmus.

Starten Sie mit einer von 14 Farbwelten, verfeinern Sie Hell und Dunkel und nehmen Sie fertiges CSS mit. Die Dokumentation behält ihre eigenen Einstellungen.

Den Entwurf gestalten

Ein Palettenwechsel verwirft den bisherigen Entwurf. „Palette zurücksetzen“ lädt die aktuell gewählte Farbwelt erneut. Keine automatische Speicherung.

Farben und Größen

Hex-Farben als #rrggbb oder #rgb. Der Farbwähler und das Textfeld bearbeiten dieselbe Rolle. Beide Modi sind unabhängig; exportiert werden immer beide.

0,375 entspricht XS. Die Schriftgröße bleibt davon unabhängig.

Faktor 1 entspricht der normalen Schriftgröße. Browser-Zoom funktioniert zusätzlich.

Farbwelten werden geladen.

Live-Vorschau

NUR DIESER BEREICH

WORKSPACE / ÜBERSICHT

Gute Ideen brauchen Raum.

Aktive Projekte

24

Team-Auslastung

72 %

Website-Relaunch

Eine ruhige Oberfläche mit klaren Prioritäten, lesbarer Typografie und eigenem Charakter.

Dieses Feld dient nur der Vorschau und wird nicht gespeichert.

Freie Farbeingaben können Kontraste verschlechtern. Prüfen Sie Haupttext, Sekundärtext, Akzentbeschriftung und Fokus in beiden Modi vor dem Einsatz.

CSS mitnehmen

Der Export enthält ausschließlich validierte Hex-Farben und Zahlen. Laden Sie ihn nach rittek.css. Die Klasse .mein-theme begrenzt alle Änderungen auf Ihren Bereich.

CSS · mein-theme.css
/* Nach dem Laden erscheint hier Ihr Theme. */

So verwenden Sie Ihr Theme

Speichern Sie den Export als mein-theme.css. Die zusätzliche Klasse funktioniert mit denselben Rittek-Komponenten. data-theme="dark" aktiviert die dunklen Werte; mit light die hellen. Ohne dieses Attribut erbt der Bereich den Modus seines Elternbereichs. Im Beispiel stehen ein heller und ein dunkler Bereich nebeneinander.

HTML
<link rel="stylesheet" href="/assets/rittek.css">
<link rel="stylesheet" href="/assets/mein-theme.css">

<section class="mein-theme p-6" data-theme="light">
  <div class="r-card">
    <h2 class="text-xl font-bold">Mein heller Bereich</h2>
    <p class="text-muted mt-3">Ihre eigenen Farben und Größen.</p>
    <button type="button" class="r-button r-button-primary mt-4">
      Weiter
    </button>
  </div>
</section>

<section class="mein-theme p-6 mt-6" data-theme="dark">
  <div class="r-card">
    <h2 class="text-xl font-bold">Mein dunkler Bereich</h2>
    <p class="text-muted mt-3">Dieselben Rollen, andere Werte.</p>
  </div>
</section>

Was der Export festlegt

  • Neun semantische Farbrollen verwenden light-dark(). Der aktuelle color-scheme entscheidet über die Variante; der Export erzwingt keinen globalen Modus.
  • --r-radius, --r-density und --r-font-scale bleiben unabhängig. Die Grundschrift wird am Theme-Bereich explizit gesetzt, damit sie auch bei einem verschachtelten Abschnitt wirkt.
  • Die exportierten Regeln stehen außerhalb der CSS-Layer. Sie überschreiben die Standard-Token auf demselben Element, auch bei dort vorhandenen Größen- oder Schema-Attributen. Untergeordnete Bereiche können eigene Attribute oder komponentenspezifische Variablen erhalten.
  • Die vier Business-Paletten liefern die gemeinsamen Farbrollen und ihren Eckenradius. Zusätzliche Admin-Navigationsvariablen, Statusfarben und Animationen gehören nicht zu diesem Export.
  • Es gibt keine Speicherung des Entwurfs, keinen Upload und keine Ausführung eingegebenen Codes. Nur die beiden lokalen Palettendateien werden geladen. Beim Neuladen beginnen Sie neu.