Ho appena pubblicato un tema su cui sto lavorando da un po’, ora open source sotto licenza MIT: un aspetto pulito e moderno basato su superfici traslucide in vetro smerigliato (header, sidebar, menu, dialoghi, ricerca) con una palette di colori chiara e scura progettata appositamente — nessun colore hardcoded, tutto legato alle variabili CSS personalizzate di Discourse, in modo da funzionare fin da subito con il passaggio automatico tra modalità chiara e scura.
Superfici in vetro smerigliato — header, sidebar/menu hamburger e campo/menu a tendina di ricerca nell’header sono semitrasparenti con sfocatura dello sfondo; sia l’opacità che l’intensità della sfocatura sono configurabili
Menu e dialoghi in vetro — i menu a tendina (ad es. notifiche) e i dialoghi condividono l’aspetto smerigliato, con un sottile bordo sottile e un leggero riflesso lungo il bordo superiore; dietro un dialogo, la pagina viene sfocata invece di essere scurita. L’opacità e la sfocatura sono regolabili separatamente per menu e dialoghi
Tintura opzionale dell’header — conferisci all’header una sottile colorazione, che segua il colore di accento dello schema di colori attivo o qualsiasi colore personalizzato, con intensità regolabile. In Safari, l’area della barra degli strumenti del browser viene tinta per corrispondere. Disattivata di default
Schemi di colori chiaro e scuro separati e progettati appositamente (non solo uno schema singolo invertito), verificati rispetto al contrasto WCAG AA per testo ed elementi UI
Anteprime link onebox in stile X/Twitter con bordo sottile e angoli arrotondati
Tag a forma di bandierina/frecce in stile Etiquette
Incorporamenti video 16:9 fissi su ogni dispositivo
Elenco argomenti a righe zebrate con un sottile stato hover
Arrotondamento degli angoli configurabile per pulsanti, card, modali e campi di input
Outline di focus accessibile che utilizza il colore del testo dello schema stesso, in modo da rimanere visibile sia in modalità chiara che scura
Tutto quanto sopra è un’impostazione del tema — disattiva o regola ciò che non ti serve
Installazione
Personalizza → Temi → Installa → Da un repository git:
https://github.com/terraboss/discourse-terraglass
Questo ti consentirà anche di effettuare un “Verifica aggiornamenti” con un clic in futuro.
Feedback benvenuti, felice di ricevere richieste di funzionalità o report di bug.
PS: Screenshot presi su Metacon il tema applicato localmente nel mio browser tramite la console dello sviluppatore
Grazie mille per il suggerimento, @NateDhaliwal! Non sapevo dell’esistenza del gruppo theme_authors, quindi ci parteciperò e potremmo spostare l’argomento nella sezione Theme.
Potresti anche contattarlo tramite https://discourse.theme-creator.io con limitazioni minime (consiglio di posizionare il campo di ricerca al centro dell’intestazione)
P.S. Dopo aver applicato il nuovo tema, non dimenticare di aggiornare il sito web nel tuo browser.
L’effetto sfocato ora si estende oltre l’intestazione, la barra laterale e la ricerca:
I menu a discesa sono traslucidi con una leggera sfocatura, inclusi gli evidenziazioni per il passaggio del mouse e la selezione
I dialoghi ricevono lo stesso trattamento e la pagina dietro di essi viene sfocata invece che oscurata
Un sottile bordo capillare e una leggera luce lungo la parte superiore fanno sì che le superfici appaiano come vetro
Opacità e sfocatura possono essere impostate separatamente per menu e dialoghi
È attivo per impostazione predefinita. Se preferisci l’aspetto precedente, disattiva glass_surfaces nelle impostazioni del tema.
Terraglass 1.1.0 — tinta opzionale per l’intestazione, oltre a un’importante correzione di un errore
Novità: tinta per l’intestazione
Ora puoi dare all’intestazione una sottile tonalità di colore personalizzata, per i forum che desiderano un po’ più di identità visiva.
auto segue il colore di accento dello schema colori attivo, quindi si adatta al passaggio tra modalità chiara/scura
custom ti permette di scegliere qualsiasi colore (hex, colore nominato, rgb…)
Intensità regolabile, da un leggero accenno a una barra solida
La trasparenza e la sfocatura in vetro smerigliato rimangono intatte sotto
È disattivato per impostazione predefinita — attivalo con header_tint nelle impostazioni del tema.
Corretto: le impostazioni on/off non avevano effetto
Nella versione 1.0.x, disattivare una funzione nelle impostazioni del tema non la disattivava effettivamente. Ora tutti gli interruttori funzionano come previsto.
con il tema applicato localmente nel mio browser tramite la console dello sviluppatore 
