테마

테마는 색, 모서리, 간격, 서체, 모션 값을 묶은 토큰 세트예요. 새 테마는 base를 물려받고 바꾸고 싶은 값만 적어요. 미리보기는 사이트의 라이트와 다크 전환을 따라가요.

베이스

base

모든 테마의 기준이 되는 중립 토큰 세트

터미널bash

npx shadcn@latest add https://dsui.vercel.app/r/base.json

베이스 Aa 가나다 123

아이콘notificationsuccess

소리 들어 보기

새 소식완료했어요

이름포커스하면 면이 강조색으로 바뀌어요.

이번 주 리포트

테마의 면, 선, 모서리를 그대로 써요.

라이트

blue-subtle#dbeafe
border#dfe5eb
brand-blue#2563eb
brand-yellow#fbbf24
glow#fbbf24
ink#252729
ink-muted#6b7682
inverse-bg#252729
inverse-fg#ffffff
market-down#1a5fd1
market-up#cc1f29
mute다른 토큰에서 계산
on-blue#ffffff
on-blue-muted다른 토큰에서 계산
on-yellow#252729
success#37b66c
surface#ffffff
surface-subtle#f5f7fa
surface-sunken#e7ebf0
yellow-subtle#fef3c7

다크

blue-subtle#172554
border#2a2f35
brand-blue#6b9bff
brand-yellow#fbbf24
glow#fbbf24
ink#f3f5f7
ink-muted#9aa5b1
inverse-bg#252729
inverse-fg#f3f5f7
market-down#5c9dff
market-up#ff6b6b
mute다른 토큰에서 계산
on-blue#0b1220
on-blue-muted다른 토큰에서 계산
on-yellow#252729
success#59d989
surface#101214
surface-subtle#171a1d
surface-sunken#0b0d0f
yellow-subtle#422006

베이스 테마의 Arc 토큰과 색 외 --ds 토큰
토큰	라이트	다크
Arc 토큰
`--background`	기본값 (foundation.css)	기본값 (foundation.css)
`--surface`	기본값 (foundation.css)	기본값 (foundation.css)
`--surface-raised`	기본값 (foundation.css)	기본값 (foundation.css)
`--surface-muted`	기본값 (foundation.css)	기본값 (foundation.css)
`--surface-sunken`	기본값 (foundation.css)	기본값 (foundation.css)
`--inverse`	기본값 (foundation.css)	기본값 (foundation.css)
`--inverse-foreground`	기본값 (foundation.css)	기본값 (foundation.css)
`--foreground`	기본값 (foundation.css)	기본값 (foundation.css)
`--text-secondary`	기본값 (foundation.css)	기본값 (foundation.css)
`--text-muted`	기본값 (foundation.css)	기본값 (foundation.css)
`--border`	기본값 (foundation.css)	기본값 (foundation.css)
`--border-subtle`	기본값 (foundation.css)	기본값 (foundation.css)
`--border-strong`	기본값 (foundation.css)	기본값 (foundation.css)
`--accent`	기본값 (foundation.css)	기본값 (foundation.css)
`--accent-strong`	기본값 (foundation.css)	기본값 (foundation.css)
`--accent-subtle`	기본값 (foundation.css)	기본값 (foundation.css)
`--accent-foreground`	기본값 (foundation.css)	기본값 (foundation.css)
`--accent-foreground-muted`	기본값 (foundation.css)	기본값 (foundation.css)
`--highlight`	기본값 (foundation.css)	기본값 (foundation.css)
`--highlight-strong`	기본값 (foundation.css)	기본값 (foundation.css)
`--highlight-subtle`	기본값 (foundation.css)	기본값 (foundation.css)
`--highlight-foreground`	기본값 (foundation.css)	기본값 (foundation.css)
`--glow`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-on`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-glyph`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-track`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-track-hover`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-thumb`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-thumb-on`	기본값 (foundation.css)	기본값 (foundation.css)
`--success`	기본값 (foundation.css)	기본값 (foundation.css)
`--warning`	기본값 (foundation.css)	기본값 (foundation.css)
`--danger`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-1`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-2`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-3`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-4`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-control`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-panel`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-surface`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-pill`	기본값 (foundation.css)	기본값 (foundation.css)
`--shadow-resting`	기본값 (foundation.css)	기본값 (foundation.css)
`--shadow-raised`	기본값 (foundation.css)	기본값 (foundation.css)
`--shadow-floating`	기본값 (foundation.css)	기본값 (foundation.css)
이전 --ds 토큰
`--ds-dur-base`	`240ms`	`240ms`
`--ds-ease-out`	`cubic-bezier(0.22, 1, 0.36, 1)`	`cubic-bezier(0.22, 1, 0.36, 1)`
`--ds-font-sans`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`
`--ds-radius-full`	`9999px`	`9999px`
`--ds-radius-lg`	`20px`	`20px`
`--ds-radius-md`	`12px`	`12px`
`--ds-radius-sm`	`8px`	`8px`
`--ds-radius-xl`	`28px`	`28px`
`--ds-space-1`	`4px`	`4px`
`--ds-space-12`	`48px`	`48px`
`--ds-space-2`	`8px`	`8px`
`--ds-space-3`	`12px`	`12px`
`--ds-space-4`	`16px`	`16px`
`--ds-space-6`	`24px`	`24px`
`--ds-space-8`	`32px`	`32px`

크리스마스

christmas베이스 물려받음

진홍과 소나무 초록, 눈처럼 하얀 바탕의 따뜻한 연말 테마

터미널bash

npx shadcn@latest add https://dsui.vercel.app/r/christmas.json

크리스마스 Aa 가나다 123

아이콘notificationsuccess

소리 들어 보기

새 소식완료했어요

이름포커스하면 면이 강조색으로 바뀌어요.

이번 주 리포트

테마의 면, 선, 모서리를 그대로 써요.

라이트

blue-subtle#dbeafe
border#d9e8df직접 바꾼 값
brand-blue#c42b2b직접 바꾼 값
brand-yellow#fbbf24
glow#2f8f5b직접 바꾼 값
ink#252729
ink-muted#6b7682
inverse-bg#0f3a28직접 바꾼 값
inverse-fg#ffffff
market-down#1a5fd1
market-up#cc1f29
mute다른 토큰에서 계산
on-blue#ffffff직접 바꾼 값
on-blue-muted다른 토큰에서 계산
on-yellow#252729
success#37b66c
surface#ffffff
surface-subtle#f5f7fa
surface-sunken#e7ebf0
yellow-subtle#fef3c7

다크

blue-subtle#172554
border#1c3128직접 바꾼 값
brand-blue#ff6b6b직접 바꾼 값
brand-yellow#fbbf24
glow#5fd49a직접 바꾼 값
ink#f3f5f7
ink-muted#9aa5b1
inverse-bg#0d2a1e직접 바꾼 값
inverse-fg#f3f5f7
market-down#5c9dff
market-up#ff6b6b
mute다른 토큰에서 계산
on-blue#2a0808직접 바꾼 값
on-blue-muted다른 토큰에서 계산
on-yellow#252729
success#59d989
surface#0a1511직접 바꾼 값
surface-subtle#171a1d
surface-sunken#0b0d0f
yellow-subtle#422006

크리스마스 테마의 Arc 토큰과 색 외 --ds 토큰
토큰	라이트	다크
Arc 토큰
`--background` 직접 바꾼 값	`oklch(98.8% .006 160)`	`oklch(15.5% .025 165)`
`--surface` 직접 바꾼 값	`oklch(98.8% .006 160)`	`oklch(15.5% .025 165)`
`--surface-raised` 직접 바꾼 값	`oklch(100% 0 0)`	`oklch(21% .035 160)`
`--surface-muted` 직접 바꾼 값	`oklch(96.2% .012 160)`	`oklch(18.5% .03 160)`
`--surface-sunken` 직접 바꾼 값	`oklch(93.2% .018 160)`	`oklch(12.5% .022 165)`
`--inverse`	기본값 (foundation.css)	기본값 (foundation.css)
`--inverse-foreground`	기본값 (foundation.css)	기본값 (foundation.css)
`--foreground` 직접 바꾼 값	`oklch(24% .035 160)`	`oklch(96% .01 150)`
`--text-secondary` 직접 바꾼 값	`oklch(48% .045 160)`	`oklch(75% .035 160)`
`--text-muted` 직접 바꾼 값	`oklch(48% .045 160)`	`oklch(75% .035 160)`
`--border` 직접 바꾼 값	`oklch(90% .02 160)`	`oklch(29% .035 160)`
`--border-subtle` 직접 바꾼 값	`oklch(95% .012 160)`	`oklch(24% .03 160)`
`--border-strong` 직접 바꾼 값	`oklch(80% .03 160)`	`oklch(41% .045 160)`
`--accent` 직접 바꾼 값	`oklch(50% .2 25)`	`oklch(66% .2 25)`
`--accent-strong`	기본값 (foundation.css)	기본값 (foundation.css)
`--accent-subtle`	기본값 (foundation.css)	기본값 (foundation.css)
`--accent-foreground` 직접 바꾼 값	`oklch(100% 0 0)`	`oklch(16% .04 25)`
`--accent-foreground-muted`	기본값 (foundation.css)	기본값 (foundation.css)
`--highlight` 직접 바꾼 값	`oklch(40% .11 155)`	`oklch(70% .13 155)`
`--highlight-strong` 직접 바꾼 값	`oklch(33% .1 155)`	`oklch(78% .11 155)`
`--highlight-subtle`	기본값 (foundation.css)	기본값 (foundation.css)
`--highlight-foreground` 직접 바꾼 값	`oklch(100% 0 0)`	`oklch(17% .04 155)`
`--glow`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-on` 직접 바꾼 값	기본값 (foundation.css)	`var(--accent)`
`--control-glyph` 직접 바꾼 값	기본값 (foundation.css)	`var(--accent-foreground)`
`--control-track`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-track-hover`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-thumb`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-thumb-on`	기본값 (foundation.css)	기본값 (foundation.css)
`--success`	기본값 (foundation.css)	기본값 (foundation.css)
`--warning`	기본값 (foundation.css)	기본값 (foundation.css)
`--danger`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-1`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-2`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-3`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-4`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-control`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-panel`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-surface`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-pill`	기본값 (foundation.css)	기본값 (foundation.css)
`--shadow-resting`	기본값 (foundation.css)	기본값 (foundation.css)
`--shadow-raised`	기본값 (foundation.css)	기본값 (foundation.css)
`--shadow-floating`	기본값 (foundation.css)	기본값 (foundation.css)
이전 --ds 토큰
`--ds-dur-base`	`240ms`	`240ms`
`--ds-ease-out`	`cubic-bezier(0.22, 1, 0.36, 1)`	`cubic-bezier(0.22, 1, 0.36, 1)`
`--ds-font-sans`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`
`--ds-radius-full`	`9999px`	`9999px`
`--ds-radius-lg`	`20px`	`20px`
`--ds-radius-md`	`12px`	`12px`
`--ds-radius-sm`	`8px`	`8px`
`--ds-radius-xl`	`28px`	`28px`
`--ds-space-1`	`4px`	`4px`
`--ds-space-12`	`48px`	`48px`
`--ds-space-2`	`8px`	`8px`
`--ds-space-3`	`12px`	`12px`
`--ds-space-4`	`16px`	`16px`
`--ds-space-6`	`24px`	`24px`
`--ds-space-8`	`32px`	`32px`

추석

chuseok베이스 물려받음

보름달 금빛과 감 주황이 번지는 한가위 테마

터미널bash

npx shadcn@latest add https://dsui.vercel.app/r/chuseok.json

추석 Aa 가나다 123

아이콘notificationsuccess

소리 들어 보기

새 소식완료했어요

이름포커스하면 면이 강조색으로 바뀌어요.

이번 주 리포트

테마의 면, 선, 모서리를 그대로 써요.

라이트

blue-subtle#dbeafe
border#efe5c9직접 바꾼 값
brand-blue#eab52e직접 바꾼 값
brand-yellow#fbbf24
glow#e8772e직접 바꾼 값
ink#252729
ink-muted#6b7682
inverse-bg#1f2a4a직접 바꾼 값
inverse-fg#ffffff
market-down#1a5fd1
market-up#cc1f29
mute다른 토큰에서 계산
on-blue#2c1f04직접 바꾼 값
on-blue-muted다른 토큰에서 계산
on-yellow#252729
success#37b66c
surface#ffffff
surface-subtle#f5f7fa
surface-sunken#e7ebf0
yellow-subtle#fef3c7

다크

blue-subtle#172554
border#1f2a44직접 바꾼 값
brand-blue#f6d56a직접 바꾼 값
brand-yellow#fbbf24
glow#f6d56a직접 바꾼 값
ink#f3f5f7
ink-muted#9aa5b1
inverse-bg#16203a직접 바꾼 값
inverse-fg#f3f5f7
market-down#5c9dff
market-up#ff6b6b
mute다른 토큰에서 계산
on-blue#2c1f04직접 바꾼 값
on-blue-muted다른 토큰에서 계산
on-yellow#252729
success#59d989
surface#0c1220직접 바꾼 값
surface-subtle#171a1d
surface-sunken#0b0d0f
yellow-subtle#422006

추석 테마의 Arc 토큰과 색 외 --ds 토큰
토큰	라이트	다크
Arc 토큰
`--background` 직접 바꾼 값	`oklch(98.5% .012 95)`	`oklch(16% .03 260)`
`--surface` 직접 바꾼 값	`oklch(98.5% .012 95)`	`oklch(16% .03 260)`
`--surface-raised` 직접 바꾼 값	`oklch(100% 0 0)`	`oklch(22% .035 260)`
`--surface-muted` 직접 바꾼 값	`oklch(96% .02 92)`	`oklch(19% .032 260)`
`--surface-sunken` 직접 바꾼 값	`oklch(93% .028 88)`	`oklch(12.5% .025 260)`
`--inverse`	기본값 (foundation.css)	기본값 (foundation.css)
`--inverse-foreground`	기본값 (foundation.css)	기본값 (foundation.css)
`--foreground` 직접 바꾼 값	`oklch(26% .035 60)`	`oklch(95% .02 90)`
`--text-secondary` 직접 바꾼 값	`oklch(48% .05 60)`	`oklch(75% .04 250)`
`--text-muted` 직접 바꾼 값	`oklch(48% .05 60)`	`oklch(75% .04 250)`
`--border` 직접 바꾼 값	`oklch(90% .03 90)`	`oklch(30% .04 260)`
`--border-subtle` 직접 바꾼 값	`oklch(95% .02 90)`	`oklch(24% .035 260)`
`--border-strong` 직접 바꾼 값	`oklch(80% .045 85)`	`oklch(42% .05 260)`
`--accent` 직접 바꾼 값	`oklch(80% .15 88)`	`oklch(86% .14 92)`
`--accent-strong` 직접 바꾼 값	`oklch(54% .12 80)`	`oklch(54% .12 80)`
`--accent-subtle`	기본값 (foundation.css)	기본값 (foundation.css)
`--accent-foreground` 직접 바꾼 값	`oklch(26% .06 70)`	`oklch(22% .05 90)`
`--accent-foreground-muted`	기본값 (foundation.css)	기본값 (foundation.css)
`--highlight` 직접 바꾼 값	`oklch(52% .17 45)`	`oklch(72% .16 50)`
`--highlight-strong` 직접 바꾼 값	`oklch(45% .16 45)`	`oklch(80% .12 50)`
`--highlight-subtle`	기본값 (foundation.css)	기본값 (foundation.css)
`--highlight-foreground` 직접 바꾼 값	`oklch(100% 0 0)`	`oklch(18% .04 50)`
`--glow`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-on` 직접 바꾼 값	기본값 (foundation.css)	`var(--accent)`
`--control-glyph` 직접 바꾼 값	기본값 (foundation.css)	`var(--accent-foreground)`
`--control-track`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-track-hover`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-thumb`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-thumb-on`	기본값 (foundation.css)	기본값 (foundation.css)
`--success`	기본값 (foundation.css)	기본값 (foundation.css)
`--warning`	기본값 (foundation.css)	기본값 (foundation.css)
`--danger`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-1`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-2`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-3`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-4`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-control`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-panel`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-surface`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-pill`	기본값 (foundation.css)	기본값 (foundation.css)
`--shadow-resting`	기본값 (foundation.css)	기본값 (foundation.css)
`--shadow-raised`	기본값 (foundation.css)	기본값 (foundation.css)
`--shadow-floating`	기본값 (foundation.css)	기본값 (foundation.css)
이전 --ds 토큰
`--ds-dur-base`	`240ms`	`240ms`
`--ds-ease-out`	`cubic-bezier(0.22, 1, 0.36, 1)`	`cubic-bezier(0.22, 1, 0.36, 1)`
`--ds-font-sans`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`
`--ds-radius-full`	`9999px`	`9999px`
`--ds-radius-lg`	`20px`	`20px`
`--ds-radius-md`	`12px`	`12px`
`--ds-radius-sm`	`8px`	`8px`
`--ds-radius-xl`	`28px`	`28px`
`--ds-space-1`	`4px`	`4px`
`--ds-space-12`	`48px`	`48px`
`--ds-space-2`	`8px`	`8px`
`--ds-space-3`	`12px`	`12px`
`--ds-space-4`	`16px`	`16px`
`--ds-space-6`	`24px`	`24px`
`--ds-space-8`	`32px`	`32px`

할로윈

halloween베이스 물려받음

호박 주황과 보랏빛 밤이 어우러진 으스스하고 재미있는 테마

터미널bash

npx shadcn@latest add https://dsui.vercel.app/r/halloween.json

할로윈 Aa 가나다 123

아이콘notificationsuccess

소리 들어 보기

새 소식완료했어요

이름포커스하면 면이 강조색으로 바뀌어요.

이번 주 리포트

테마의 면, 선, 모서리를 그대로 써요.

라이트

blue-subtle#dbeafe
border#eadcd0직접 바꾼 값
brand-blue#ec7a2a직접 바꾼 값
brand-yellow#fbbf24
glow#8b3fd1직접 바꾼 값
ink#252729
ink-muted#6b7682
inverse-bg#2a1740직접 바꾼 값
inverse-fg#ffffff
market-down#1a5fd1
market-up#cc1f29
mute다른 토큰에서 계산
on-blue#2a1204직접 바꾼 값
on-blue-muted다른 토큰에서 계산
on-yellow#252729
success#37b66c
surface#ffffff
surface-subtle#f5f7fa
surface-sunken#e7ebf0
yellow-subtle#fef3c7

다크

blue-subtle#172554
border#2c1f3a직접 바꾼 값
brand-blue#ff9a3d직접 바꾼 값
brand-yellow#fbbf24
glow#b57bff직접 바꾼 값
ink#f3f5f7
ink-muted#9aa5b1
inverse-bg#1d1030직접 바꾼 값
inverse-fg#f3f5f7
market-down#5c9dff
market-up#ff6b6b
mute다른 토큰에서 계산
on-blue#2a1204직접 바꾼 값
on-blue-muted다른 토큰에서 계산
on-yellow#252729
success#59d989
surface#120a1a직접 바꾼 값
surface-subtle#171a1d
surface-sunken#0b0d0f
yellow-subtle#422006

할로윈 테마의 Arc 토큰과 색 외 --ds 토큰
토큰	라이트	다크
Arc 토큰
`--background` 직접 바꾼 값	`oklch(98% .012 70)`	`oklch(15% .03 305)`
`--surface` 직접 바꾼 값	`oklch(98% .012 70)`	`oklch(15% .03 305)`
`--surface-raised` 직접 바꾼 값	`oklch(100% 0 0)`	`oklch(21% .04 305)`
`--surface-muted` 직접 바꾼 값	`oklch(95.5% .02 65)`	`oklch(18.5% .035 305)`
`--surface-sunken` 직접 바꾼 값	`oklch(92% .028 60)`	`oklch(12% .025 305)`
`--inverse`	기본값 (foundation.css)	기본값 (foundation.css)
`--inverse-foreground`	기본값 (foundation.css)	기본값 (foundation.css)
`--foreground` 직접 바꾼 값	`oklch(24% .03 300)`	`oklch(95% .015 70)`
`--text-secondary` 직접 바꾼 값	`oklch(48% .05 300)`	`oklch(75% .04 300)`
`--text-muted` 직접 바꾼 값	`oklch(48% .05 300)`	`oklch(75% .04 300)`
`--border` 직접 바꾼 값	`oklch(89% .03 60)`	`oklch(30% .04 305)`
`--border-subtle` 직접 바꾼 값	`oklch(94% .02 60)`	`oklch(24% .035 305)`
`--border-strong` 직접 바꾼 값	`oklch(78% .045 60)`	`oklch(42% .05 305)`
`--accent` 직접 바꾼 값	`oklch(70% .17 52)`	`oklch(76% .16 55)`
`--accent-strong` 직접 바꾼 값	`oklch(54% .17 45)`	`oklch(54% .17 45)`
`--accent-subtle`	기본값 (foundation.css)	기본값 (foundation.css)
`--accent-foreground` 직접 바꾼 값	`oklch(22% .05 40)`	`oklch(20% .05 40)`
`--accent-foreground-muted`	기본값 (foundation.css)	기본값 (foundation.css)
`--highlight` 직접 바꾼 값	`oklch(48% .19 305)`	`oklch(72% .17 305)`
`--highlight-strong` 직접 바꾼 값	`oklch(40% .18 305)`	`oklch(80% .13 305)`
`--highlight-subtle`	기본값 (foundation.css)	기본값 (foundation.css)
`--highlight-foreground` 직접 바꾼 값	`oklch(100% 0 0)`	`oklch(18% .04 305)`
`--glow`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-on` 직접 바꾼 값	기본값 (foundation.css)	`var(--accent)`
`--control-glyph` 직접 바꾼 값	기본값 (foundation.css)	`var(--accent-foreground)`
`--control-track`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-track-hover`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-thumb`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-thumb-on`	기본값 (foundation.css)	기본값 (foundation.css)
`--success`	기본값 (foundation.css)	기본값 (foundation.css)
`--warning`	기본값 (foundation.css)	기본값 (foundation.css)
`--danger`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-1`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-2`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-3`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-4`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-control`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-panel`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-surface`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-pill`	기본값 (foundation.css)	기본값 (foundation.css)
`--shadow-resting`	기본값 (foundation.css)	기본값 (foundation.css)
`--shadow-raised`	기본값 (foundation.css)	기본값 (foundation.css)
`--shadow-floating`	기본값 (foundation.css)	기본값 (foundation.css)
이전 --ds 토큰
`--ds-dur-base`	`240ms`	`240ms`
`--ds-ease-out`	`cubic-bezier(0.22, 1, 0.36, 1)`	`cubic-bezier(0.22, 1, 0.36, 1)`
`--ds-font-sans`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`
`--ds-radius-full`	`9999px`	`9999px`
`--ds-radius-lg`	`20px`	`20px`
`--ds-radius-md`	`12px`	`12px`
`--ds-radius-sm`	`8px`	`8px`
`--ds-radius-xl`	`28px`	`28px`
`--ds-space-1`	`4px`	`4px`
`--ds-space-12`	`48px`	`48px`
`--ds-space-2`	`8px`	`8px`
`--ds-space-3`	`12px`	`12px`
`--ds-space-4`	`16px`	`16px`
`--ds-space-6`	`24px`	`24px`
`--ds-space-8`	`32px`	`32px`

설날

seollal베이스 물려받음

한지 빛 바탕에 다홍과 금빛을 올린 새해맞이 테마

터미널bash

npx shadcn@latest add https://dsui.vercel.app/r/seollal.json

설날 Aa 가나다 123

아이콘notificationsuccess

소리 들어 보기

새 소식완료했어요

이름포커스하면 면이 강조색으로 바뀌어요.

이번 주 리포트

테마의 면, 선, 모서리를 그대로 써요.

라이트

blue-subtle#dbeafe
border#eee2cf직접 바꾼 값
brand-blue#d6342c직접 바꾼 값
brand-yellow#fbbf24
glow#f2c14e직접 바꾼 값
ink#252729
ink-muted#6b7682
inverse-bg#4a1410직접 바꾼 값
inverse-fg#ffffff
market-down#1a5fd1
market-up#cc1f29
mute다른 토큰에서 계산
on-blue#ffffff직접 바꾼 값
on-blue-muted다른 토큰에서 계산
on-yellow#252729
success#37b66c
surface#ffffff
surface-subtle#f5f7fa
surface-sunken#e7ebf0
yellow-subtle#fef3c7

다크

blue-subtle#172554
border#3a2420직접 바꾼 값
brand-blue#ff6b5c직접 바꾼 값
brand-yellow#fbbf24
glow#f2c14e직접 바꾼 값
ink#f3f5f7
ink-muted#9aa5b1
inverse-bg#2c1411직접 바꾼 값
inverse-fg#f3f5f7
market-down#5c9dff
market-up#ff6b6b
mute다른 토큰에서 계산
on-blue#2a0806직접 바꾼 값
on-blue-muted다른 토큰에서 계산
on-yellow#252729
success#59d989
surface#1a0e0c직접 바꾼 값
surface-subtle#171a1d
surface-sunken#0b0d0f
yellow-subtle#422006

설날 테마의 Arc 토큰과 색 외 --ds 토큰
토큰	라이트	다크
Arc 토큰
`--background` 직접 바꾼 값	`oklch(98.5% .01 85)`	`oklch(17% .025 25)`
`--surface` 직접 바꾼 값	`oklch(98.5% .01 85)`	`oklch(17% .025 25)`
`--surface-raised` 직접 바꾼 값	`oklch(100% 0 0)`	`oklch(23% .035 25)`
`--surface-muted` 직접 바꾼 값	`oklch(96% .018 80)`	`oklch(20% .03 25)`
`--surface-sunken` 직접 바꾼 값	`oklch(93% .025 78)`	`oklch(13.5% .02 25)`
`--inverse`	기본값 (foundation.css)	기본값 (foundation.css)
`--inverse-foreground`	기본값 (foundation.css)	기본값 (foundation.css)
`--foreground` 직접 바꾼 값	`oklch(25% .03 30)`	`oklch(96% .012 85)`
`--text-secondary` 직접 바꾼 값	`oklch(48% .05 35)`	`oklch(76% .04 40)`
`--text-muted` 직접 바꾼 값	`oklch(48% .05 35)`	`oklch(76% .04 40)`
`--border` 직접 바꾼 값	`oklch(90% .03 80)`	`oklch(31% .04 25)`
`--border-subtle` 직접 바꾼 값	`oklch(95% .02 80)`	`oklch(25% .035 25)`
`--border-strong` 직접 바꾼 값	`oklch(80% .04 70)`	`oklch(43% .05 25)`
`--accent` 직접 바꾼 값	`oklch(54% .21 28)`	`oklch(68% .19 28)`
`--accent-strong`	기본값 (foundation.css)	기본값 (foundation.css)
`--accent-subtle`	기본값 (foundation.css)	기본값 (foundation.css)
`--accent-foreground` 직접 바꾼 값	`oklch(100% 0 0)`	`oklch(18% .04 25)`
`--accent-foreground-muted`	기본값 (foundation.css)	기본값 (foundation.css)
`--highlight` 직접 바꾼 값	`oklch(82% .15 88)`	`oklch(82% .14 88)`
`--highlight-strong` 직접 바꾼 값	`oklch(70% .15 85)`	`oklch(88% .11 88)`
`--highlight-subtle`	기본값 (foundation.css)	기본값 (foundation.css)
`--highlight-foreground` 직접 바꾼 값	`oklch(27% .05 80)`	`oklch(25% .05 80)`
`--glow`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-on` 직접 바꾼 값	기본값 (foundation.css)	`var(--accent)`
`--control-glyph` 직접 바꾼 값	기본값 (foundation.css)	`var(--accent-foreground)`
`--control-track`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-track-hover`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-thumb`	기본값 (foundation.css)	기본값 (foundation.css)
`--control-thumb-on`	기본값 (foundation.css)	기본값 (foundation.css)
`--success`	기본값 (foundation.css)	기본값 (foundation.css)
`--warning`	기본값 (foundation.css)	기본값 (foundation.css)
`--danger`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-1`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-2`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-3`	기본값 (foundation.css)	기본값 (foundation.css)
`--series-4`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-control`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-panel`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-surface`	기본값 (foundation.css)	기본값 (foundation.css)
`--radius-pill`	기본값 (foundation.css)	기본값 (foundation.css)
`--shadow-resting`	기본값 (foundation.css)	기본값 (foundation.css)
`--shadow-raised`	기본값 (foundation.css)	기본값 (foundation.css)
`--shadow-floating`	기본값 (foundation.css)	기본값 (foundation.css)
이전 --ds 토큰
`--ds-dur-base`	`240ms`	`240ms`
`--ds-ease-out`	`cubic-bezier(0.22, 1, 0.36, 1)`	`cubic-bezier(0.22, 1, 0.36, 1)`
`--ds-font-sans`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`
`--ds-radius-full`	`9999px`	`9999px`
`--ds-radius-lg`	`20px`	`20px`
`--ds-radius-md`	`12px`	`12px`
`--ds-radius-sm`	`8px`	`8px`
`--ds-radius-xl`	`28px`	`28px`
`--ds-space-1`	`4px`	`4px`
`--ds-space-12`	`48px`	`48px`
`--ds-space-2`	`8px`	`8px`
`--ds-space-3`	`12px`	`12px`
`--ds-space-4`	`16px`	`16px`
`--ds-space-6`	`24px`	`24px`
`--ds-space-8`	`32px`	`32px`

베이스

이번 주 리포트

색

라이트

다크

토큰 표

크리스마스

이번 주 리포트

색

라이트

다크

토큰 표

추석

이번 주 리포트

색

라이트

다크

토큰 표

할로윈

이번 주 리포트

색

라이트

다크

토큰 표

설날

이번 주 리포트

색

라이트

다크

토큰 표