主题定制

Skyler UI 的所有设计 token 都以 CSS 变量暴露在 :root 与 page 上，因此运行时即可改变主题：

page {
  --sky-color-primary: #ff6b6b;
  --sky-color-success: #2ec27e;
  --sky-radius-md: 16rpx;
}

完整变量列表

:root, page {
  // 品牌色
  --sky-color-primary;
  --sky-color-success;
  --sky-color-warning;
  --sky-color-danger;
  --sky-color-info;

  // 文字 / 背景 / 边框
  --sky-text-color-primary;
  --sky-text-color-regular;
  --sky-text-color-secondary;
  --sky-text-color-placeholder;
  --sky-bg-color;
  --sky-bg-color-page;
  --sky-fill-color;
  --sky-border-color;

  // 圆角
  --sky-radius-sm; --sky-radius-md; --sky-radius-lg; --sky-radius-round;

  // 字号 / 间距
  --sky-font-size-xs..xl;
  --sky-space-xs..xl;

  // 组件高度
  --sky-comp-h-sm; --sky-comp-h-md; --sky-comp-h-lg;
}

切换暗黑模式

由于使用的是 CSS 变量，可以通过给 page 加类名/属性切换：

page[data-theme='dark'] {
  --sky-bg-color: #18181b;
  --sky-bg-color-page: #0d0d0e;
  --sky-text-color-primary: #fafafa;
  --sky-text-color-regular: #d4d4d8;
  --sky-border-color: #27272a;
}