我们最近为 Discourse 添加了许多 CSS 变量。这些变量使 UI 各个方面的主题化和自定义变得更加容易。对于许多更改，您将不再需要定位非常具体的 HTML 元素，而只需更改变量。
如果您想了解哪些变量可以更改，我建议您使用此正则表达式在应用程序中进行搜索 → --([a-zA-Z0-9\\-_]+):
如果您在代码编辑器中使用上述正则表达式搜索所有实例，您应该会看到类似以下内容：
我最近一直受到 shadcn/ui 的启发，特别是他们创建的主题编辑器 → https://tweakcn.com/
以他们的样式为灵感，我开始尝试仅使用变量来更改 UI 的多少。以下是我所做的一个示例：
这是一个正在进行中的项目，某些区域需要更具体的 CSS 来实现，但总的来说，使用我们新的 CSS 变量进行此类更改现在容易得多。
此样式仅使用变量即可实现。我将其分成了两个文件。
简化的调色板
我想看看是否可以消除主色和次色之间的一些步骤。我还想限制可用的三级色的数量，以简化整体调色板。
:root {
--color-1: #e2ece6;
--base: oklch(from var(--color-1) l c h);
--step: 0.15;
/* Derived darker colors */
--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 colors */
// --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);
/* Overwrite color mapping */
--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); /* Black */
--secondary: var(--color-1); /* White */
--secondary-rgb: var(--color-1);
--tertiary: var(--accent-color-1); /* Blue */
--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;
/* sidebar edits */
--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;
/* topic list */
--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);
/* nav */
--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;
/* categories */
--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);
/* misc */
--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;
}
让我们使用这个主题来分享示例和 CSS 变量代码，以展示可能的内容 