Terraglass — un thème en verre dépoli avec des palettes claires/sombres soignées

[terraboss]

Je viens de publier un thème que j’affinais depuis un certain temps, désormais disponible en open source sous la licence MIT : un design épuré et moderne, construit autour de surfaces translucides en verre dépoli (en-tête, barre latérale, menus, boîtes de dialogue, recherche), avec un schéma de couleurs clair et sombre spécifiquement conçu — aucune couleur codée en dur, tout est lié aux variables CSS personnalisées de Discourse, ce qui permet une prise en charge immédiate du basculement automatique entre les modes clair et sombre.

Dépôt : terraboss/discourse-terraglass

Captures d’écran

Schéma clair, exécuté sur Meta. Menu des notifications, avec la page visible à travers :

Menu déroulant de recherche :

Boîtes de dialogue — la page en arrière-plan est floutée au lieu d’être assombrie :

Fonctionnalités

• Surfaces en verre dépoli — l’en-tête, la barre latérale/menu hamburger et le champ/menu déroulant de recherche de l’en-tête sont semi-transparents avec un flou d’arrière-plan ; l’opacité et l’intensité du flou sont tous deux configurables
• Menus et boîtes de dialogue en verre — les menus déroulants (par exemple, les notifications) et les boîtes de dialogue partagent l’aspect dépoli, avec une fine bordure et un léger reflet en haut ; derrière une boîte de dialogue, la page est floutée au lieu d’être assombrie. L’opacité et le flou sont ajustables séparément pour les menus et les boîtes de dialogue
• Teinte d’en-tête optionnelle — donnez à l’en-tête une couleur subtile, soit en suivant la couleur d’accent du schéma de couleurs actif, soit avec une couleur personnalisée, avec une intensité ajustable. Dans Safari, la zone de barre d’outils du navigateur est teintée en conséquence. Désactivée par défaut
• Schémas de couleurs clair et sombre distincts et spécifiquement conçus (et non simplement un schéma unique inversé), vérifiés par rapport au contraste WCAG AA pour le texte et les éléments d’interface
• Aperçus de liens onebox de type X/Twitter avec une fine bordure et des coins arrondis
• Étiquettes en forme de drapeau/flèche de type Etiquette
• Intégrations vidéo fixes au format 16:9 sur tous les appareils
• Liste des sujets zébrée avec un état de survol subtil
• Arrondi des coins configurable pour les boutons, les cartes, les modales et les champs de saisie
• Contour de focus accessible qui utilise la couleur du texte du schéma, afin de rester visible en mode clair comme en mode sombre
• Tout ce qui précède est un paramètre de thème — désactivez ou ajustez ce que vous ne souhaitez pas

Installation

Personnaliser → Thèmes → Installer → Depuis un dépôt git :

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

Cela vous donnera également une option « Vérifier les mises à jour » en un clic pour la suite.

Les retours sont les bienvenus, n’hésitez pas à envoyer des demandes de fonctionnalités ou des rapports de bugs.

P.-S. : Captures d’écran prises sur Meta avec le thème appliqué localement dans mon navigateur via la console de développement

[Heliosurge (Dan DeMontmorency)]

Peux-tu poster quelques captures d’écran ? Ça a l’air génial

[terraboss]

Peut-être plus tard. Essaie juste par toi-même !

[NateDhaliwal]

Peut-être souhaitez-vous rejoindre @theme_authors afin de pouvoir publier dans la catégorie Customization > Theme ?

[terraboss]

Merci beaucoup pour l’astuce, @NateDhaliwal ! Je ne connaissais pas le groupe theme_authors, je vais donc m’y inscrire et nous pourrons ensuite déplacer le sujet vers la section Thèmes.

[Heliosurge (Dan DeMontmorency)]

J’ai essayé, mais je n’ai obtenu aucun effet. J’ai utilisé le bouton « Essayer le thème ».

[terraboss]

Prenez par exemple un coup d’œil à https://riben.talk/ . (Crédits à @kddkd)

Vous pouvez également interagir avec https://discourse.theme-creator.io avec des limitations minimales (je recommande de placer le champ de recherche au centre de l’en-tête)

P.-S. ! Après avoir appliqué le nouveau thème, n’oubliez pas de rafraîchir le site web dans votre navigateur.

Mise à jour : les captures d’écran de @Heliosurge sont maintenant dans le premier message, merci pour la relance ! Dites-moi ce que vous en pensez si vous essayez.

[terraboss]

Terraglass 1.2.0 — menus et dialogues en verre

Nouveau : menus et dialogues en verre

L’aspect givré s’étend désormais au-delà de l’en-tête, de la barre latérale et de la recherche :

• Les menus déroulants sont translucides avec un flou doux, y compris leurs surbrillances au survol et à la sélection
• Les dialogues bénéficient du même traitement, et la page derrière eux est floutée au lieu d’être assombrie
• Un fin bord de filet et un léger reflet le long du haut donnent aux surfaces un aspect de verre
• L’opacité et le flou peuvent être réglés séparément pour les menus et les dialogues

C’est activé par défaut. Si vous préférez l’aspect précédent, désactivez glass_surfaces dans les paramètres du thème.

---

Terraglass 1.1.0 — teinte d’en-tête optionnelle, plus une correction de bug importante

Nouveau : teinte d’en-tête

Vous pouvez désormais donner à l’en-tête une subtile couleur de votre choix, pour les forums qui souhaitent un peu plus d’identité visuelle.

• auto suit la couleur d’accentuation du schéma de couleurs actif, et bascule donc avec le mode clair/sombre
• custom vous permet de choisir n’importe quelle couleur (hexadécimal, couleur nommée, rgb…)
• Intensité réglable, d’une légère nuance à une barre pleine
• La transparence et le flou du verre givré restent intacts en dessous

C’est désactivé par défaut — activez-le avec header_tint dans les paramètres du thème.

Corrigé : les paramètres on/off n’avaient aucun effet

Dans la version 1.0.x, désactiver une fonctionnalité dans les paramètres du thème ne la désactivait pas réellement. Tous les interrupteurs fonctionnent désormais comme prévu.