# 使用变量为 Discourse 设置样式：展示与讲解 **URL:** https://meta.discourse.org/t/styling-discourse-with-variables-show-tell/376614 **Category:** Development **Tags:** dev-news **Created:** [2025年七月30日 19:13 UTC](https://meta.discourse.org/t/styling-discourse-with-variables-show-tell/376614 "2025-07-30T19:13:29Z") **Posts on this page:** 2 **Page:** 1
### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine) #### Post date: [2025年七月30日 19:13 UTC](https://meta.discourse.org/t/styling-discourse-with-variables-show-tell/376614/1 "2025-07-30T19:13:29Z")
我们最近为 Discourse 添加了许多 CSS 变量。这些变量使 UI 各个方面的 **主题化** 和 **自定义** 变得更加容易。对于许多更改，您将不再需要定位非常具体的 HTML 元素，而只需更改变量。 如果您想了解哪些变量可以更改，我建议您使用此正则表达式在应用程序中进行搜索 → `--([a-zA-Z0-9\\-_]+):` 如果您在代码编辑器中使用上述正则表达式搜索所有实例，您应该会看到类似以下内容： ![image](https://global.discourse-cdn.com/meta/original/4X/2/c/6/2c6da8556fb600b7fa61a018eb067583e1d6f4ea.jpeg) * * * 我最近一直受到 shadcn/ui 的启发，特别是他们创建的主题编辑器 → [https://tweakcn.com/](https://tweakcn.com/) 以他们的样式为灵感，我开始尝试仅使用变量来更改 UI 的多少。以下是我所做的一个示例： ![CleanShot 2025-07-30 at 14.06.24@2x](https://global.discourse-cdn.com/meta/original/4X/a/5/b/a5b4388a22ccd85aca1f1662bc7593d93ba77685.jpeg) ![CleanShot 2025-07-30 at 14.10.35@2x](https://global.discourse-cdn.com/meta/original/4X/f/1/7/f173bc84dc780f887a742043d29b0c346dbb99eb.jpeg) 这是一个正在进行中的项目，某些区域需要更具体的 CSS 来实现，但总的来说，使用我们新的 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 样式** 使用这些样式，我利用了核心中许多可用的变量来获得上面看到的 **主题** 。 ```css :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 变量代码，以展示 **可能** 的内容 😃 ---
### Author: ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr) #### Post date: [2025年八月5日 18:40 UTC](https://meta.discourse.org/t/styling-discourse-with-variables-show-tell/376614/2 "2025-08-05T18:40:19Z")
这显然破坏了我为覆盖主题卡片背景颜色而对我的网站所做的 CSS 编辑。 我不是程序员，不明白该如何着手解决我的问题。这里有人能帮我恢复原状吗？ > [@Topic Cards](https://meta.discourse.org/t/topic-cards/296048/87?u=tknospdr): > > So it appears something has changed with the last round of Discourse updates. Only the very left edge of my topic cards are now respecting this CSS, I’ve been poking around to try and find what will fix it but so far have been unsuccessful. Can anyone else confirm and see if they can track down the needed changes? 已解决……希望如此。