Webseiten-Themes

16 fertige Bootstrap-Themes (Basis: Bootswatch, baut direkt auf Bootstrap 5.3.3 auf) plus 5 Farbvarianten von Darkly und 20 weitere eigene Theme-Ideen (je Light/Dark, siehe unten) -- macht 61 Vorschauseiten insgesamt. Jede Kachel oeffnet dieselbe Beispielseite (Login-Formular, Steuer-Buttons, Tabelle, Flotten-Liste) einmal pro Theme eingefaerbt -- so lassen sich die Themes an realen Bausteinen aus den bestehenden WebUIs (Textdrop, Mining-Turtles-Dashboard) vergleichen.

Auswahl bitte per Antwort im Briefkasten mitteilen (Theme-Name, z. B. "Darkly") -- danach wird es dokumentiert und auf die anderen Projekte mit WebUI angewendet. Darkly kam gut an -- dazu gibt es jetzt 5 Farbvarianten zur Auswahl.
Flatly

Minimalistisch & flach

Klares Flat Design, ruhiges Blau, viel Weißraum -- die "sichere, aufgeräumte" Wahl.

Vorschau ansehen →
Darkly

Dunkel & minimalistisch

Dunkles Dashboard-Grau mit dezentem Blau-Akzent -- gut lesbar, wenig Ablenkung. Siehe auch die 5 Farbvarianten unten.

Vorschau ansehen →
Cosmo

Clean & freundlich

Helles, rundliches Bootstrap-Blau -- klassisches Web-App-Gefühl.

Vorschau ansehen →
Litera

Editorial

Serifenbetonte Überschriften, großzügiger Weißraum -- wirkt wie ein Magazin/Blog.

Vorschau ansehen →
Minty

Soft & pastellig

Pastelliges Grün-Türkis, abgerundete Ecken -- freundlich, wenig technisch.

Vorschau ansehen →
Superhero

Dunkel & bold

Sehr dunkler Hintergrund, kräftiges Orange -- selbstbewusst, hoher Kontrast.

Vorschau ansehen →
Vapor

Neon / Cyberpunk

Pink-Lila-Neon auf Dunkel, Glow-Effekte -- auffällig, verspielt-technisch.

Vorschau ansehen →
Cyborg

Dunkel & technisch

Fast schwarz, knalliges Zyan als Akzent -- wirkt wie eine Steuerkonsole.

Vorschau ansehen →
Sketchy

Verspielt / handgezeichnet

Comic-Schrift, unregelmäßige Rahmen -- bewusst uneernst, Prototyp-Charme.

Vorschau ansehen →
Journal

Zeitung / Magazin

Kompakte Sans-Serif, klare Trennlinien -- nüchtern-redaktionell.

Vorschau ansehen →
Lux

Elegant / luxuriös

Viel Schwarz, große Letter-Spacing-Typografie -- edel, ruhig, wenig Farbe.

Vorschau ansehen →
Solar

Warmes Solarized

Solarized-Farbpalette (Beige/Petrol) -- augenschonend, entwicklerlastig.

Vorschau ansehen →
Sandstone

Erdig & warm

Sandtöne, gedämpftes Braun/Grün -- gemütlich, wenig "technisch".

Vorschau ansehen →
Quartz

Verspielt & farbenfroh

Kräftige Farbflächen, große Radien -- modern-verspielt, viel Charakter.

Vorschau ansehen →
Morph

Soft / neumorphistisch

Weiche Schatten, stark abgerundet -- plastisch wirkende Flächen.

Vorschau ansehen →
Zephyr

Frisch & hell

Helles Pastell-Blau, sehr aufgeräumt -- leicht, luftig.

Vorschau ansehen →

5 Darkly-Farbvarianten

Darkly kam als Favorit zurueck -- hier 5 Varianten mit derselben dunklen Basis (Bootswatch Darkly, #222 Hintergrund), aber jeweils anderem Akzent statt des Standard-Blaus #375a7f. Technisch: Bootswatch-Darkly-CSS per CDN plus kleiner CSS-Variablen-Override (--bs-primary & zugehoerige Button-/Link-Tokens), genau wie bei den 20 eigenen Theme-Ideen unten.

Darkly Cyan

Kuehler, wacher Akzent

Klares Cyan statt gedecktem Blau -- wirkt technischer und weniger nuechtern.

Vorschau ansehen →
Darkly Violet

Edler Akzent

Violett statt Blau -- wirkt hochwertiger und ungewoehnlicher.

Vorschau ansehen →
Darkly Emerald

Frischer Akzent

Smaragdgruen statt Blau -- wirkt frischer, weniger corporate.

Vorschau ansehen →
Darkly Amber

Warmer Akzent

Warmes Amber/Bernstein statt Blau -- hoher Kontrast, warnend-energisch.

Vorschau ansehen →
Darkly Crimson

Kraeftiger Akzent

Kraeftiges Crimson-Rot statt Blau -- selbstbewusst und alarmierend.

Vorschau ansehen →

20 weitere Theme-Ideen

Zusaetzliche Theme-Konzepte, eigene Farbpaletten auf Basis von Bootstrap 5.3 (nicht aus Bootswatch, sondern per CSS-Variablen-Override + data-bs-theme selbst zusammengestellt). Jede Idee gibt es als Light- und Dark-Variante -- gleiche Akzentfarbe, aber jeweils eigens abgestimmter heller bzw. dunkler Hintergrund, damit beide Varianten stimmig wirken statt nur eingefaerbtes Bootstrap-Grau zu sein.

Aurora

Kuehles Violett-Tuerkis

Nordlicht-Anmutung: kaltes Violett auf sehr hellem bzw. fast schwarzem Grund.

☀ Light ☾ Dark
Terracotta

Warmer Ton, Toepferware

Gebrannte Erdtoene, serifenbetont -- wirkt handwerklich und warm.

☀ Light ☾ Dark
Glacier

Eisig, klar, kaltblau

Klares Kaltblau auf sehr hellem bzw. tiefdunklem Grund -- kuehl und aufgeraeumt.

☀ Light ☾ Dark
Obsidian

Vulkanglas, scharfer Kontrast

Fast schwarz mit scharfem Rot-Akzent, technische Schrift -- kompromisslos reduziert.

☀ Light ☾ Dark
Meadow

Frisches Wiesengruen

Natuerliches, klares Gruen -- unaufgeregt und freundlich.

☀ Light ☾ Dark
Blossom

Zartes Rose, floral

Weiches Rose, runde Formen -- freundlich-verspielt.

☀ Light ☾ Dark
Indigo Night

Tiefes Indigo, sternenklar

Satter Indigoton, ruhig und seriös.

☀ Light ☾ Dark
Citrus

Kraeftiges Orange-Gelb

Energiegeladenes Amber, runde Formen -- auffaellig und wach.

☀ Light ☾ Dark
Slate Harbor

Gedecktes Blaugrau, maritim

Nuechternes Blaugrau, technische Schrift -- industrielle Kommandozentrale.

☀ Light ☾ Dark
Ember

Tiefes Rot-Orange, Glut

Glimmendes Rot, Serifen-Anmutung -- intensiv.

☀ Light ☾ Dark
Mint Frost

Kuehles Minztuerkis

Klares Minz-Tuerkis -- frisch und funktional.

☀ Light ☾ Dark
Copper

Warmes Kupfer-Bronze

Metallisch wirkendes Kupfer, Serifen-Ueberschriften -- edel und handwerklich.

☀ Light ☾ Dark
Lagoon

Tuerkis-Aqua, tropisch

Klares tropisches Aqua -- leicht und maritim.

☀ Light ☾ Dark
Plum

Tiefes Violett-Magenta, edel

Satte Pflaumenfarbe mit Serifen -- edel und ruhig.

☀ Light ☾ Dark
Wheatfield

Warmes Weizen-Gold, laendlich

Goldene Erdtoene mit Serifen -- gemuetlich und rustikal.

☀ Light ☾ Dark
Steel

Kaltes Grau-Blau, technisch

Nuechternes Stahlgrau, technische Schrift -- wirkt wie ein Steuerpult.

☀ Light ☾ Dark
Coral Reef

Lebendiges Koralle, kontrastreich

Kraeftiges Koralle-Rosa, runde Formen -- lebhaft.

☀ Light ☾ Dark
Moss

Tiefes Waldgruen, erdig

Gedaempftes Moosgruen -- ruhig und erdig.

☀ Light ☾ Dark
Sahara

Sandige Wuestenfarben

Warme Sandtoene mit Serifen -- ruhig und neutral.

☀ Light ☾ Dark
Nebula

Kosmisches Lila-Blau-Pink

Traeumerisches Violett mit technischer Schrift -- Sci-Fi-Konsole.

☀ Light ☾ Dark