/* This theme is for CSS */
:root {
  --c-white: oklch(1 0 0); /* alt: #fff / white */
  --c-black: oklch(0 0 0); /* alt: #000 / black */
  --c-background: oklch(1 0 0); /* alt: #fff / white */
  --c-foreground: oklch(0.141 0.005 285.823); /* alt: #09090b / zinc-950 */
  --c-card: oklch(1 0 0); /* alt: #fff / white */
  --c-card-foreground: oklch(0.141 0.005 285.823); /* alt: #09090b / zinc-950 */
  --c-popover: oklch(1 0 0); /* alt: #fff / white */
  --c-popover-foreground: oklch(
    0.141 0.005 285.823
  ); /* alt: #09090b / zinc-950 */
  --c-primary: oklch(0.623 0.214 259.815); /* alt: #2b7fff / blue-500 */
  --c-primary-foreground: oklch(
    0.97 0.014 254.604
  ); /* alt: #eff6ff / blue-50 */
  --c-secondary: oklch(0.967 0.001 286.375); /* alt: #f4f4f5 / zinc-100 */
  --c-secondary-foreground: oklch(
    0.21 0.006 285.885
  ); /* alt: #18181b / zinc-900 */
  --c-muted: oklch(0.967 0.001 286.375); /* alt: #f4f4f5 / zinc-100 */
  --c-muted-foreground: oklch(
    0.552 0.016 285.938
  ); /* alt: #71717b  / zinc-500 */
  --c-accent: oklch(0.967 0.001 286.375); /* alt: #f4f4f5 / zinc-100 */
  --c-accent-foreground: oklch(
    0.21 0.006 285.885
  ); /* alt: #18181b / zinc-900 */
  --c-destructive: oklch(0.577 0.245 27.325); /* alt: #e7000b / red-600 */
  --c-border: oklch(0.92 0.004 286.32); /* alt: #e4e4e7 / zinc-200 */
  --c-input: oklch(0.92 0.004 286.32); /* alt: #e4e4e7 / zinc-200 */
  --c-ring: oklch(0.623 0.214 259.815); /* alt: #2b7fff / blue-500 */
  --c-alert: oklch(0.971 0.013 17.38); /* alt: #fef2f2 / red-50 */
  --c-alert-foreground: oklch(0.637 0.237 25.331); /* alt: #fb2c36 / red-500 */
  --c-info: oklch(0.97 0.014 254.604); /* alt: #eff6ff / blue-50 */
  --c-info-foreground: oklch(0.623 0.214 259.815); /* alt: #2b7fff / blue-500 */
  --c-note: oklch(0.987 0.026 102.212); /* alt: #fefce8 / yellow-50 */
  --c-note-foreground: oklch(
    0.795 0.184 86.047
  ); /* alt: #f0b100 / yellow-500 */
  --c-success: oklch(0.982 0.018 155.826); /* alt: #f0fdf4 / green-50 */
  --c-success-foreground: oklch(
    0.723 0.219 149.579
  ); /* alt: #00c950 / green-500 */
}

.dark {
  --c-background: oklch(0.141 0.005 285.823); /* alt: #09090b / zinc-950 */
  --c-foreground: oklch(0.985 0 0); /* alt: #fafafa / zinc-50 */
  --c-card: oklch(0.21 0.006 285.885); /* alt: #18181b / zinc-900 */
  --c-card-foreground: oklch(0.985 0 0); /* alt: #fafafa / zinc-50 */
  --c-popover: oklch(0.21 0.006 285.885); /* alt: #18181b / zinc-900 */
  --c-popover-foreground: oklch(0.985 0 0); /* alt: #fafafa / zinc-50 */
  --c-primary: oklch(0.546 0.245 262.881); /* alt: #155dfc / blue-600 */
  --c-primary-foreground: oklch(
    0.379 0.146 265.522
  ); /* alt: #1c398e / blue-900 */
  --c-secondary: oklch(0.274 0.006 286.033); /* alt: #27272a / zinc-800 */
  --c-secondary-foreground: oklch(0.985 0 0); /* alt: #fafafa / zinc-50 */
  --c-muted: oklch(0.274 0.006 286.033); /* alt: #27272a / zinc-800 */
  --c-muted-foreground: oklch(
    0.705 0.015 286.067
  ); /* alt: #9f9fa9 / zinc-400 */
  --c-accent: oklch(0.274 0.006 286.033); /* alt: #27272a / zinc-800 */
  --c-accent-foreground: oklch(0.985 0 0); /* alt: #fafafa / zinc-50 */
  --c-destructive: oklch(0.704 0.191 22.216); /* alt: #ff6467 / red-400 */
  --c-border: oklch(1 0 0 / 10%); /* alt: rgba(255, 255, 255, 0.1) / white/10 */
  --c-input: oklch(1 0 0 / 15%); /* alt: rgba(255, 255, 255, 0.15) / white/15 */
  --c-ring: oklch(0.488 0.243 264.376); /* alt: #1447e6 */
  --c-alert: oklch(0.444 0.177 26.899); /* alt: #9f0712 / red-800 */
  --c-alert-foreground: oklch(0.936 0.032 17.717); /* alt: #ffe2e2 / red-100 */
  --c-info: oklch(0.424 0.199 265.638); /* alt: #035388 / blue-800 */
  --c-info-foreground: oklch(0.932 0.032 255.585); /* alt: #dbeafe / blue-100 */
  --c-note: oklch(0.476 0.114 61.907); /* alt: #894b00 / yellow-800 */
  --c-note-foreground: oklch(
    0.973 0.071 103.193
  ); /* alt: #fef9c2 / yellow-100 */
  --c-success: oklch(0.448 0.119 151.328); /* alt: #016630 / green-800 */
  --c-success-foreground: oklch(
    0.967 0.067 122.328
  ); /* alt: #dcfce7 / green-100 */
}
iOS風細めスイッチボタン

Other CSS UI parts

アコーディオン

バルーン

ボックス

パンくずリスト

ボタン

チェックボックス

見出し・文字

アイコン

リスト

ページネーション

引用

続きを読む

検索フォーム

セレクトボックス

スイッチボタン

タブ

テキストボックス

ツールチップ

Stack(縦・横方向)レイアウト

標準レイアウト

ヘッダー
