Element-Plus-X

简体中文

English

简体中文

English

深色模式

主题变量总表 ​

本页汇总可覆盖的 --elx-* CSS 变量，并提供 themeOverrides 模板：

快速开始 ​

ConfigProvider 会把 themeOverrides 的 key 映射为 --elx-{key}，并应用到全局 html：

ts
const themeOverrides = {
  common: {
    'color-primary': '#7c3aed'
  },
  components: {
    Welcome: {
      'welcome-filled-bg': '#f0f9ff'
    }
  }
};

通用变量（common） ​

themeOverrides keyCSS 变量默认值（亮色）默认值（暗色）
color-primary--elx-color-primary#409eff#409eff
color-success--elx-color-success#67c23a-
color-warning--elx-color-warning#e6a23c-
color-danger--elx-color-danger#f56c6c-
color-info--elx-color-info#909399-
text-color-primary--elx-text-color-primary#303133#e5eaf3
text-color-regular--elx-text-color-regular#606266#cfd3dc
text-color-secondary--elx-text-color-secondary#909399#a3a6ad
text-color-placeholder--elx-text-color-placeholder#a8abb2#8d9095
bg-page--elx-bg-page#f5f7fa#1b1b1f
bg-surface--elx-bg-surface#ffffff#141414
border-color--elx-border-color#dcdfe6#4c4d4f
border-radius-base--elx-border-radius-base4px-
border-radius-small--elx-border-radius-small2px-
border-radius-round--elx-border-radius-round20px-
fill-color--elx-fill-color#f0f2f5#303030
fill-color-light--elx-fill-color-light#f5f7fa#262727
padding-xs--elx-padding-xs4px-
padding-sm--elx-padding-sm8px-
padding-md--elx-padding-md12px-
padding-lg--elx-padding-lg16px-
padding-xl--elx-padding-xl20px-
box-shadow--elx-box-shadow0 2px 12px 0 rgba(0, 0, 0, 0.1)0 2px 12px 0 rgba(0, 0, 0, 0.3)
box-shadow-light--elx-box-shadow-light0 2px 8px 0 rgba(0, 0, 0, 0.06)-

组件变量（components） ​

components 的分组方式主要是为了可读性与避免命名冲突；最终都映射为 --elx-* CSS 变量。

Attachments ​

themeOverrides keyCSS 变量默认值（亮色）默认值（暗色）
attachments-fade-rgb--elx-attachments-fade-rgb255, 255, 25520, 20, 20
attachments-nav-bg--elx-attachments-nav-bgrgba(0, 0, 0, 0.3)rgba(255, 255, 255, 0.12)
attachments-nav-bg-hover--elx-attachments-nav-bg-hoverrgba(0, 0, 0, 0.5)rgba(255, 255, 255, 0.18)
attachments-nav-bg-active--elx-attachments-nav-bg-activergba(0, 0, 0, 0.7)rgba(255, 255, 255, 0.25)
attachments-nav-color--elx-attachments-nav-color#ffffff#ffffff
attachments-drop-bg--elx-attachments-drop-bgrgba(225, 225, 225, 0.3)rgba(255, 255, 255, 0.08)
attachments-upload-icon-color--elx-attachments-upload-icon-colorvar(--elx-text-color-placeholder)var(--elx-text-color-secondary)
attachments-upload-icon-size--elx-attachments-upload-icon-size64px64px

Bubble ​

themeOverrides keyCSS 变量默认值（亮色）默认值（暗色）
bubble-content-max-width--elx-bubble-content-max-width500px500px
bubble-bg--elx-bubble-bgvar(--el-fill-color)var(--el-fill-color)
bubble-border-color--elx-bubble-border-colorvar(--el-border-color)var(--el-border-color)
bubble-text-color--elx-bubble-text-colorvar(--el-text-color-primary)var(--el-text-color-primary)
bubble-radius--elx-bubble-radiuscalc(var(--el-border-radius-base) + 4px)calc(var(--el-border-radius-base) + 4px)
bubble-padding-y--elx-bubble-padding-yvar(--el-padding-sm, 12px)var(--el-padding-sm, 12px)
bubble-padding-x--elx-bubble-padding-xcalc(var(--el-padding-sm, 12px) + 4px)calc(var(--el-padding-sm, 12px) + 4px)
bubble-shadow--elx-bubble-shadowvar(--el-box-shadow)var(--el-box-shadow)
bubble-dot-color--elx-bubble-dot-colorvar(--el-color-primary)var(--el-color-primary)

BubbleList ​

themeOverrides keyCSS 变量默认值（亮色）默认值（暗色）
bubble-list-max-height--elx-bubble-list-max-height100%100%
bubble-list-btn-size--elx-bubble-list-btn-size24px24px

Conversations ​

themeOverrides keyCSS 变量默认值（亮色）默认值（暗色）
conversations-list-auto-bg-color--elx-conversations-list-auto-bg-color#fff#fff
conversations-label-height--elx-conversations-label-height20px20px

FilesCard ​

themeOverrides keyCSS 变量默认值（亮色）默认值（暗色）
files-card-bg--elx-files-card-bgrgba(0, 0, 0, 0.04)rgba(255, 255, 255, 0.06)
files-card-border-color--elx-files-card-border-colorrgba(0, 0, 0, 0.1)rgba(255, 255, 255, 0.12)
files-card-progress-bg--elx-files-card-progress-bgrgba(0, 0, 0, 0.06)rgba(255, 255, 255, 0.06)
files-card-delete-bg--elx-files-card-delete-bgrgba(255, 255, 255, 0.9)rgba(0, 0, 0, 0.55)
files-card-delete-border-color--elx-files-card-delete-border-colorvar(--elx-border-color)rgba(255, 255, 255, 0.12)
files-card-delete-color--elx-files-card-delete-colorvar(--elx-text-color-secondary)rgba(255, 255, 255, 0.72)
files-card-delete-shadow--elx-files-card-delete-shadow0 2px 8px rgba(0, 0, 0, 0.12)0 4px 12px rgba(0, 0, 0, 0.35)
files-card-icon-size--elx-files-card-icon-size42px42px
files-card-max-width--elx-files-card-max-width236px236px

Thinking ​

themeOverrides keyCSS 变量默认值（亮色）默认值（暗色）
thinking-button-width--elx-thinking-button-width160px160px
thinking-animation-duration--elx-thinking-animation-duration0.2s0.2s
thinking-content-wrapper-width--elx-thinking-content-wrapper-width500px500px
thinking-content-wrapper-background-color--elx-thinking-content-wrapper-background-colorrgba(0, 0, 0, 0.02)rgba(255, 255, 255, 0.04)
thinking-content-wrapper-color--elx-thinking-content-wrapper-colorvar(--elx-text-color-regular)var(--elx-text-color-regular)
thinking-trigger-bg--elx-thinking-trigger-bg#fffrgba(255, 255, 255, 0.06)
thinking-trigger-bg-hover--elx-thinking-trigger-bg-hoverrgba(0, 0, 0, 0.03)rgba(255, 255, 255, 0.08)
thinking-trigger-border-color--elx-thinking-trigger-border-colorvar(--elx-border-color)rgba(255, 255, 255, 0.12)
thinking-content-bg--elx-thinking-content-bgrgba(0, 0, 0, 0.02)rgba(255, 255, 255, 0.04)
thinking-content-color--elx-thinking-content-colorvar(--elx-text-color-regular)var(--elx-text-color-regular)

Welcome ​

themeOverrides keyCSS 变量默认值（亮色）默认值（暗色）
welcome-border-radius--elx-welcome-border-radius8px-
welcome-icon-size--elx-welcome-icon-size64px-
welcome-icon-size-small--elx-welcome-icon-size-small48px-
welcome-gap--elx-welcome-gap16px-
welcome-gap-small--elx-welcome-gap-small8px-
welcome-padding--elx-welcome-padding24px-
welcome-filled-bg--elx-welcome-filled-bg#e6f4ff-
welcome-filled-border--elx-welcome-filled-border#91caff-
welcome-title-color--elx-welcome-title-colorrgba(0, 0, 0, 0.88)-
welcome-description-color--elx-welcome-description-colorrgba(0, 0, 0, 0.65)-

XSender ​

themeOverrides keyCSS 变量默认值（亮色）默认值（暗色）
x-sender-header-duration--elx-x-sender-header-duration300ms300ms