主题

TIP

主题推荐用 CSS 变量表达。组件内部读取变量，应用层通过 theme() 注入。

import { theme } from "@elfui/core";
import { ElfButton } from "./Button";

theme(
  ElfButton,
  `
  --elf-button-bg: #14d8a6;
  --elf-button-color: #04110d;
`,
  { id: "button-theme" },
);

theme() 是唯一公开的主题注册 API。它负责注入组件主题 CSS，不是 setup 上下文中的状态读取函数。

建议

TIP

组件内部定义默认值：

button {
  background: var(--elf-button-bg, #111);
  color: var(--elf-button-color, #fff);
}

TIP

主题层只覆盖变量，不直接穿透组件内部选择器。