Недавно мы добавили в Discourse множество CSS-переменных. Эти переменные значительно упрощают создание тем и настройку элементов интерфейса. Для многих изменений вам больше не нужно будет обращаться к сверхспецифичным элементам в HTML — достаточно просто изменить переменную.
Если вы хотите узнать, какие переменные можно изменять, рекомендую просмотреть приложение с помощью следующего регулярного выражения:
--([a-zA-Z0-9\-_]+):
Если вы используете редактор кода и ищете все вхождения этого регулярного выражения, вы увидите что-то вроде:
В последнее время меня лично вдохновляет shadcn/ui, а особенно их редактор тем → https://tweakcn.com/
Вдохновившись их стилями, я решил посмотреть, насколько сильно можно изменить интерфейс, используя только переменные. Вот пример того, что у меня получилось:
Это ещё черновик (WIP), и для работы некоторых областей потребуется более точное нацеливание через CSS, но суть в том, что с нашими новыми CSS-переменными теперь гораздо проще вносить подобные изменения.
Эта стилизация была возможна только благодаря переменным. Я разделил код на два файла.
Упрощённая цветовая палитра
Я хотел посмотреть, можно ли сократить количество шагов между основным и вторичным цветами. Также я стремился ограничить количество доступных третичных цветов, чтобы упростить общую палитру.
:root {
--color-1: #e2ece6;
--base: oklch(from var(--color-1) l c h);
--step: 0.15;
/* Вывод более тёмных цветов */
--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);
/* Акцентные цвета */
// --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);
/* Переопределение сопоставления цветов */
--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); /* Чёрный */
--secondary: var(--color-1); /* Белый */
--secondary-rgb: var(--color-1);
--tertiary: var(--accent-color-1); /* Синий */
--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);
}
Стилизация UX
С помощью этих стилей я использовал множество доступных переменных из ядра, чтобы получить тему, которую вы видите выше.
:root {
--d-max-width: unset;
--d-main-content-gap: 0;
/* Изменения боковой панели */
--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;
/* Список тем */
--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);
/* Навигация */
--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;
/* Категории */
--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);
/* Теги */
--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);
/* Разное */
--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);
/* Чат */
--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;
}
Давайте используем эту тему для обмена примерами и кодом CSS-переменных, чтобы показать, что возможно 