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.
Helles Schema, läuft auf Meta. Benachrichtigungsmenü, wobei die Seite dahindurchscheint:
Such-Dropdown:
Dialoge – die Seite dahinter wird verwischt statt abgedunkelt:
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 erstelltmit dem Theme lokal in meinem Browser über die Entwickler-Konsole angewendet
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.
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.
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.