ctrlk

主题样式

Rtdui的组件使用了daisyUI的主题样式, 已预置了非常多的主题. 下列主题可以点击预览:

light
A
A
A
A
dark
A
A
A
A
cupcake
A
A
A
A
bumblebee
A
A
A
A
emerald
A
A
A
A
corporate
A
A
A
A
synthwave
A
A
A
A
retro
A
A
A
A
cyberpunk
A
A
A
A
valentine
A
A
A
A
halloween
A
A
A
A
garden
A
A
A
A
forest
A
A
A
A
aqua
A
A
A
A
lofi
A
A
A
A
pastel
A
A
A
A
fantasy
A
A
A
A
wireframe
A
A
A
A
black
A
A
A
A
luxury
A
A
A
A
dracula
A
A
A
A
cmyk
A
A
A
A
autumn
A
A
A
A
business
A
A
A
A
acid
A
A
A
A
lemonade
A
A
A
A
night
A
A
A
A
coffee
A
A
A
A
winter
A
A
A
A
dim
A
A
A
A
nord
A
A
A
A
sunset
A
A
A
A
caramellatte
A
A
A
A
abyss
A
A
A
A
silk
A
A
A
A

通过主题样式可以全局修改组件的样式. 应用主题非常简单, 只要为html元素附加data-theme="<主题名>"即可.

修改主题样式

所有的主题样式均以CSS变量实现的, 如果预置主题不符合你的要求, 你也可以修改主题的CSS变量的方式直接修改主题:

由于TailwindCSS v4 使用 CSS 的color-mix()控制透明度, 不需要像v3那样必须提取颜色值交给TailwindCSS来生成透明度变量.
因此现在的主题颜色变量使用完整的颜色表示, 同时修改了变量名使其更易读.

注意: 颜色需要使用OKLCH格式的值. 为什么使用OKLCH?

:where(:root),
[data-theme="light"] {
  color-scheme: light;
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(98% 0 0);
  --color-base-300: oklch(95% 0 0);
  --color-base-content: oklch(21% 0.006 285.885);
  --color-primary: oklch(45% 0.24 277.023);
  --color-primary-content: oklch(93% 0.034 272.788);
  --color-secondary: oklch(65% 0.241 354.308);
  --color-secondary-content: oklch(94% 0.028 342.258);
  --color-accent: oklch(77% 0.152 181.912);
  --color-accent-content: oklch(38% 0.063 188.416);
  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(92% 0.004 286.32);
  --color-info: oklch(74% 0.16 232.661);
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: oklch(76% 0.177 163.223);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklch(82% 0.189 84.429);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(71% 0.194 13.428);
  --color-error-content: oklch(27% 0.105 12.094);
  /* 应用到`rounded-selector`工具类 */
  --radius-selector: 0.5rem;
  /* 应用到`rounded-field`工具类 */
  --radius-field: 0.25rem;
  /* 应用到`rounded-box`工具类 */
  --radius-box: 0.5rem;
  /* 像checkbox, radio, toggle, badge等元素的基础尺寸, xs,sm,md,lg,xl都是此基础值乘以一个缩放因子 */
  --size-selector: 0.25rem;
  /* 像input, button, tab 等元素的基础尺寸, xs,sm,md,lg,xl都是此基础值乘以一个缩放因子 */
  --size-field: 0.25rem;
  /* 全局的边框尺寸 */
  --border: 1px;
  /* 全局的轻微深度特效, 这是一个开关值, 0关1开 */
  --depth: 1;
  /* 全局的噪声纹理特效, 这是一个开关值, 0关1开 */
  --noise: 0;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-base-100: oklch(25.33% 0.016 252.42);
  --color-base-200: oklch(23.26% 0.014 253.1);
  --color-base-300: oklch(21.15% 0.012 254.09);
  --color-base-content: oklch(97.807% 0.029 256.847);
  --color-primary: oklch(58% 0.233 277.117);
  --color-primary-content: oklch(96% 0.018 272.314);
  --color-secondary: oklch(65% 0.241 354.308);
  --color-secondary-content: oklch(94% 0.028 342.258);
  --color-accent: oklch(77% 0.152 181.912);
  --color-accent-content: oklch(38% 0.063 188.416);
  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(92% 0.004 286.32);
  --color-info: oklch(74% 0.16 232.661);
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: oklch(76% 0.177 163.223);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklch(82% 0.189 84.429);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(71% 0.194 13.428);
  --color-error-content: oklch(27% 0.105 12.094);
  --radius-selector: 0.5rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

组件自定义

Rtdui组件的样式几乎都是使用CSS的class实现的. 因此可以使用传统的方式添加自定义的class.

<Button className="my-button"></Button>

有些组件的结构较为复杂, Rtdui为那些组件提供了slots样式槽属性, 用于为组件内部元素自定义样式.

<TextInput
  slots={{
    input: "my-input",
    label: "my-label",
    helperText: "my-helperText",
  }}
/>

tip: 具体组件的slots查看组件文档.

注意: CSS的样式具有权重优先级. 为了确保你的自定义样式可以覆盖组件的样式. 不推荐使用!important, 可以用以下的方法为你的样式增加一些权重. 比如你的自定义类名为my-button,在css样式文件中你可以这么做:

/* 串联相同类名的作用就是提高你的样式的权重. 注意: 无空格 */
.my-button.my-button.my-button {
  /* 你的样式... */
}

如果使用tailwindcss则可以这么做:

<input className="[&&&]:bg-yellow-500">
RTD UIv5.1.0