主题

Vue OTP Pro 自带 11 种内置主题。与 5 种颜色变体 搭配可产生 55+ 种组合。

所有主题

BoxClean bordered with rounded corners

UnderlineMinimal bottom-border style

RoundedCircular playful inputs

PillCapsule-shaped inputs

SeparatedElevated cards with lift effect

FlushJoined continuous bar

ShadowProminent shadow, lift on focus

MinimalThin borders, ultra clean

FilledSolid background, no border

NeonGlowing neon on dark

GlassGlassmorphism with blur

颜色变体

Primary

Success

Danger

Warning

CSS 自定义属性

.vop {
  --vop-border-color: #d1d5db;
  --vop-border-focus: #6366f1;
  --vop-bg: #ffffff;
  --vop-text: #1f2937;
  --vop-shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

暗黑模式

.dark .vop {
  --vop-border-color: #374151;
  --vop-border-focus: #818cf8;
  --vop-bg: #1f2937;
  --vop-text: #f9fafb;
}

尺寸

小

中

大

超大