Nous avons récemment ajouté de nombreuses variables CSS à Discourse. Ces variables facilitent grandement la personnalisation et la modification des aspects de l’interface utilisateur. Pour de nombreux changements, vous n’aurez plus besoin de cibler des éléments très spécifiques dans le HTML, mais seulement de modifier une variable.
Si vous êtes curieux de savoir quelles variables peuvent être modifiées, je vous suggère d’explorer l’application en utilisant cette expression régulière : --([a-zA-Z0-9\\-_]+):
Si vous utilisez un éditeur de code et recherchez toutes les occurrences de l’expression régulière ci-dessus, vous devriez voir quelque chose comme ceci :
J’ai été personnellement inspiré par shadcn/ui récemment et en particulier par l’éditeur de thème qu’ils ont créé → https://tweakcn.com/
En utilisant leurs styles comme inspiration, j’ai décidé de voir à quel point je pouvais modifier l’interface utilisateur en utilisant uniquement des variables. Voici un exemple de ce que j’ai fait :
Ceci est un travail en cours et certaines zones nécessiteraient un ciblage CSS plus spécifique pour fonctionner, mais l’essentiel est qu’il est maintenant beaucoup plus facile d’apporter des changements comme ceux-ci avec nos nouvelles variables CSS.
Ce style était possible en utilisant uniquement des variables. Je l’ai séparé en deux fichiers.
Palette de couleurs simplifiée
Je voulais voir si je pouvais éliminer certaines des étapes entre le primaire et le secondaire. Je voulais également limiter la quantité de tertiaire disponible pour simplifier la palette globale.
:root {
--color-1: #e2ece6;
--base: oklch(from var(--color-1) l c h);
--step: 0.15;
/* Couleurs plus foncées dérivées */
--color-2: oklch(from var(--base) calc(l - var(--step) * 0.25) c h);
--color-3: oklch(from var(--color-2) calc(l - var(--step) * 0.55) c h);
--color-4: oklch(from var(--color-3) calc(l - var(--step)) c h);
--color-5: oklch(from var(--color-4) calc(l - var(--step)) c h);
/* stylelint-disable-next-line hue-degree-notation */
--color-6: oklch(from var(--color-5) 0.35 c h);
/* Couleurs d'accentuation */
// --accent-color-1: #0867f6;
--accent-color-1: oklch(from var(--color-1));
--accent-color-light: oklch(from var(--accent-color-1) calc(l * 1.25) c h);
--accent-color-lighter: oklch(from var(--accent-color-1) calc(l * 1.5) c h);
--accent-color-lightest: oklch(from var(--accent-color-1) calc(l * 1.75) c h);
--accent-color-darker: oklch(from var(--accent-color-1) calc(l * 0.5) c h);
/* Surcharge du mappage des couleurs */
--header_primary: var(--color-6);
--header_background: var(--color-1);
--primary-very-low: var(--color-6);
--primary-low: var(--color-6);
--header_primary-low: var(--color-6);
--primary-low-mid: var(--color-6);
--header_primary-low-mid: var(--color-4);
--primary-medium: var(--color-6);
--primary-med-or-secondary-high: var(--color-6);
--primary-med-or-secondary-med: var(--color-6);
--header_primary-medium: var(--color-6);
--hljs-bg: var(--color-2);
--primary-high-or-secondary-low: var(--color-6);
--primary-high: var(--color-6);
--header_primary-high: var(--color-6);
--primary-very-high: var(--color-6);
--header_primary-very-high: var(--color-6);
--blend-primary-secondary-5: var(--color-2);
--d-hover: var(--color-3);
--mention-background-color: var(--color-4);
--link-color: rgb(196, 101, 0);
--primary-50: var(--color-6);
--primary-100: var(--color-6);
--primary-200: var(--color-6);
--primary-300: var(--color-6);
--primary-400: var(--color-6);
--primary-500: var(--color-6);
--primary-600: var(--color-6);
--primary-700: var(--color-6);
--primary-800: var(--color-6);
--primary-900: var(--color-6);
--primary: var(--color-6); /* Noir */
--secondary: var(--color-1); /* Blanc */
--secondary-rgb: var(--color-1);
--tertiary: var(--accent-color-1); /* Bleu */
--tertiary-hover: var(--accent-color-darker);
--tertiary-medium: var(--accent-color-light);
--tertiary-med-or-tertiary: var(--accent-color-light);
--tertiary-med-or-tertiary-low: var(--accent-color-lighter);
--tertiary-very-low: var(--accent-color-lighter);
--tertiary-low: var(--accent-color-lighter);
--tertiary-25: var(--accent-color-lightest);
}
Style UX
Avec ces styles, j’ai utilisé de nombreuses variables disponibles dans le cœur pour obtenir le thème que vous voyez ci-dessus.
:root {
--d-max-width: unset;
--d-main-content-gap: 0;
/* modifications de la barre latérale */
--d-sidebar-background: var(--color-1);
--d-sidebar-admin-background: var(--color-1);
--d-sidebar-link-color: var(--color-6);
--d-sidebar-link-icon-color: var(--color-6);
--d-sidebar-header-color: var(--color-6);
--d-sidebar-header-icon-color: var(--color-6);
--d-sidebar-footer-fade: transparent;
--d-sidebar-active-background: rgb(0, 0, 0, 0.06125);
--d-sidebar-highlight-background: rgb(0, 0, 0, 0.06125);
--d-sidebar-highlight-color: var(--color-6);
--d-sidebar-width: 14rem;
--d-sidebar-row-height: 1.85rem;
--d-sidebar-row-horizontal-padding: 0.5rem;
--sidebar-section-wrapper-padding: 1rem 0.75rem 0.75rem;
--d-sidebar-border-color: var(--content-border-color);
--d-sidebar-section-border-color: transparent;
--d-sidebar-header-font-weight: 400;
--d-sidebar-active-font-weight: 600;
/* liste des sujets */
--d-topic-list-header-font-size: var(--font-down-1);
--d-topic-list-header-text-color: var(--color-6);
--d-topic-list-header-data-padding-x: var(--space-2);
--d-topic-list-header-data-padding-y: var(--space-2);
--d-topic-list-margin-y: var(--space-4);
--title-color: var(--color-6);
--title-color--read: var(--color-6);
--d-table-border-top-height: 1px;
--topic-list-item-background-color--visited: var(--color-2);
--d-topic-list-avatar-size: 20px;
--topic-title-font-weight: 700;
--topic-title-font-weight--visited: 400;
--d-topic-list-data-padding-x: var(--space-4);
--d-topic-list-data-padding-y: var(--space-2);
--d-topic-list-metadata-top-space: var(--space-1);
--d-topic-list-data-padding-inline-start: var(--space-4);
--d-topic-list-data-padding-inline-end: var(--space-4);
--d-topic-list-likes-views-posts-width: 12%;
--d-topic-list-data-font-size: var(--font-down-1-rem);
/* navigation */
--d-nav-font-size: var(--font-down-1);
--d-nav-bg-color--active: var(--color-6);
--d-nav-bg-color--hover: var(--d-hover);
--d-nav-color--active: var(--color-1);
--d-nav-color--hover: var(--color-6);
--d-nav-underline-height: 0;
--nav-horizontal-padding: var(--space-4);
--nav-space: 0;
/* catégories */
--category-boxes-title-font-size: var(--font-up-3-rem);
--category-boxes-text-alignment: left;
--d-category-border-accent-width: 0px;
--d-category-border-box-width: 0px;
--d-category-box-background-color: var(--color-2);
--category-badge-title-color: var(--color-6);
--d-category-boxes-margin-top: var(--space-4);
--d-category-boxes-gap: var(--space-4);
--category-badge-size: var(--space-2);
--category-badge-border-radius: 50%;
--category-boxes-description-text-color: var(--color-6);
--d-categories-list-title-margin-bottom: var(--space-2);
/* tags */
--d-tag-horizontal-padding: var(--space-2);
--d-tag-border-radius: 4px;
--d-tag-font-weight: 500;
--d-tag-background-color: rgb(0, 0, 0, 0.1);
--tag-text-color: var(--color-6);
/* divers */
--onebox-shadow-color: var(--color-2);
--onebox-border-color: var(--content-border-color);
--d-border-radius: 8px;
--content-border-color: var(--color-3);
--main-outlet-padding-top: var(--space-4);
--base-font-size: 15px;
--topic-timeline-border-color: var(--color-6);
--d-header-padding-x: var(--space-4);
--d-input-focused-color: var(--color-6);
--d-button-default-text-color: var(--color-6);
--d-button-default-icon-color: var(--color-6);
--d-button-default-bg-color: transparent;
--d-button-default-bg-color--hover: var(--d-hover);
--d-button-default-text-color--hover: var(--color-6);
--d-button-default-icon-color--hover: var(---color-6);
--d-post-control-background--hover: var(--d-hover);
--d-post-control-create-icon-color: var(--color-6);
--d-button-primary-bg-color: var(--color-6);
--font-family: "Inter";
--list-container-padding-x: var(--space-4);
--list-container-topiclist-padding-x: 0em;
--badge-card-background-color: var(--color-2);
/* chat */
--d-chat-input-border-color: var(--content-border-color);
--d-chat-input-focused-shadow: 0 0 1px 0 var(--tertiary);
}
.wrap {
--d-wrap-padding-x: 0;
}
.navigation-container {
#create-topic {
--d-button-default-text-color: var(--color-1);
--d-button-default-icon-color: var(--color-1);
--d-button-default-bg-color: var(--color-6);
--d-button-default-bg-color--hover: black;
}
}
.new-main-title-data .topic-list-data:first-of-type,
.new-main-title-data .topic-list-data:last-of-type {
--d-topic-list-data-padding-y: 0;
--d-topic-list-data-padding-x: 0;
--d-topic-list-data-padding-inline-start: 0;
}
Utilisons ce sujet pour partager des exemples et du code de variables CSS afin de montrer ce qui est possible 