Terraglass – ein Milchglas-Theme mit durchdachten Hell-/Dunkel-Paletten

Ich habe gerade ein Theme veröffentlicht, an dem ich eine Weile gearbeitet habe, das jetzt unter der MIT-Lizenz Open Source ist: ein sauberes, modernes Design, das um durchscheinende, mattglasartige Oberflächen (Header, Sidebar, Menüs, Dialoge, Suche) herum aufgebaut ist, mit einem eigens entwickelten hellen und dunklen Farbschema – keine hartcodierten Farben, alles an die CSS-Custom-Properties von Discourse gekoppelt, sodass es sofort funktioniert und automatisch zwischen hellem und dunklem Modus wechselt.

Repo: terraboss/discourse-terraglass

Screenshots

Helles Schema, läuft auf Meta. Benachrichtigungsmenü, wobei die Seite dahindurchscheint:

Benachrichtigungsmenü

Such-Dropdown:

Such-Dropdown

Dialoge – die Seite dahinter wird verwischt statt abgedunkelt:

Tastenkürzel-Dialog

Melden-Dialog

Funktionen

  • Mattglas-Oberflächen – Header, Sidebar/Hamburger-Menü und das Suchfeld/Dropdown im Header sind halbtransparent mit Hintergrund-Blur; Opazität und Blur-Stärke sind beide konfigurierbar
  • Glas-Menüs und Dialoge – Dropdown-Menüs (z. B. Benachrichtigungen) und Dialoge teilen sich das Mattglas-Look, mit einer dünnen Haarlinie am Rand und einer dezenten Highlight-Linie oben; hinter einem Dialog wird die Seite verwischt statt abgedunkelt. Opazität und Blur sind für Menüs und Dialoge separat anpassbar
  • Optionale Header-Tönung – gib dem Header eine dezente Farbe, entweder passend zur Akzentfarbe des aktiven Farbschemas oder eine beliebige benutzerdefinierte Farbe, mit einstellbarer Stärke. In Safari wird der Browser-Toolbar-Bereich entsprechend eingefärbt. Standardmäßig deaktiviert
  • Separate, eigens entwickelte helle und dunkle Farbschemata (nicht nur ein invertiertes einzelnes Schema), geprüft auf WCAG-AA-Kontrast für Text und UI-Elemente
  • X/Twitter-ähnliche Onebox-Linkvorschauen mit Haarlinie und abgerundeten Ecken
  • Etiketten-artige Flaggen-/Pfeil-förmige Tags
  • Fixe 16:9-Video-Einbettungen auf jedem Gerät
  • Gestreifte Themenliste (Zebra-Design) mit dezentem Hover-Zustand
  • Konfigurierbare Eckenabrundung für Buttons, Karten, Modals und Eingabefelder
  • Barrierefreier Fokus-Rahmen, der die eigene Textfarbe des Schemas verwendet, damit er in beiden Modi sichtbar bleibt
  • Alles oben ist eine Theme-Einstellung – deaktiviere oder passe an, was du nicht möchtest

Installation

Anpassen → Themes → Installieren → Aus einem Git-Repository:

https://github.com/terraboss/discourse-terraglass

Damit hast du auch künftig die Option „Auf Updates prüfen“ mit einem Klick.

Feedback ist willkommen, ich nehme gerne Feature-Anfragen oder Bug-Reports an.

PS: Screenshots auf Meta erstellt :discourse2: mit dem Theme lokal in meinem Browser über die Entwickler-Konsole angewendet :goodnews:

4 „Gefällt mir“

Könntest du ein paar Screenshots posten? Klingt super!

3 „Gefällt mir“

Vielleicht später. Probier es einfach mal selbst! :slight_smile:

1 „Gefällt mir“

Vielleicht möchtest du @theme_authors beitreten, damit du in der Kategorie Customization > Theme posten kannst?

4 „Gefällt mir“

Vielen Dank für den Hinweis, @NateDhaliwal! Ich wusste nicht, dass es die Gruppe theme_authors gibt, daher werde ich beitreten und wir können das Thema anschließend in den Bereich Theme verschieben.

2 „Gefällt mir“

Ich habe es ausprobiert, aber es hat keine Wirkung gezeigt. Ich habe den Button „Theme testen“ verwendet.

Schau dir zum Beispiel https://riben.talk/ an. (Credits @kddkd)

Du könntest dich auch über https://discourse.theme-creator.io mit ihm in Verbindung setzen, mit minimalen Einschränkungen (die Positionierung des Suchfelds in der Mitte des Headers würde ich empfehlen).

PS! Vergiss nicht, die Website in deinem Browser zu aktualisieren, nachdem du das neue Theme angewendet hast.

Update: Die Screenshots von @Heliosurge sind jetzt im ersten Beitrag zu finden, danke für den Hinweis! Sag Bescheid, was du denkst, wenn du es ausprobierst.

4 „Gefällt mir“

Terraglass 1.2.0 — Glasmenüs und Dialoge

Neu: Glasmenüs und Dialoge

Das gefrostete Aussehen erstreckt sich nun über Header, Sidebar und Suche hinaus:

  • Dropdown-Menüs sind halbtransparent mit einem weichen Blur-Effekt, einschließlich ihrer Hover- und Auswahl-Highlights
  • Dialoge erhalten dieselbe Behandlung, und die Seite dahinter wird geblurred statt abgedunkelt
  • Eine dünne Haarlinienkante und ein dezenter Highlight am oberen Rand sorgen dafür, dass die Oberflächen wie Glas wirken
  • Opazität und Blur können separat für Menüs und Dialoge eingestellt werden

Standardmäßig aktiviert. Wenn du den vorherigen Look bevorzugst, deaktiviere glass_surfaces in den Theme-Einstellungen.


Terraglass 1.1.0 — optionale Header-Färbung sowie ein wichtiger Bugfix

Neu: Header-Färbung

Du kannst dem Header nun eine dezente Farbe deiner Wahl geben, für Foren, die etwas mehr visuelle Identität wünschen.

  • auto folgt der Akzentfarbe des aktiven Farbschemas und wechselt somit mit dem Hell-/Dunkelmodus
  • custom erlaubt es, jede beliebige Farbe auszuwählen (Hex, benannte Farbe, rgb …)
  • Einstellbare Intensität, von einem dezenten Hinweis bis zu einer durchgehenden Leiste
  • Die Glas-Transparenz und der Blur-Effekt bleiben darunter erhalten

Standardmäßig deaktiviert — aktiviere es mit header_tint in den Theme-Einstellungen.

Behoben: Ein-/Ausschalt-Einstellungen hatten keine Wirkung

In 1.0.x hatte das Deaktivieren einer Funktion in den Theme-Einstellungen tatsächlich keine Auswirkung. Alle Schalter funktionieren nun wie beabsichtigt.

4 „Gefällt mir“