테마

@theme는 유틸리티 정의에 사용할 토큰을 등록합니다. 수정자는 전달할 토큰 선언과 생성 값에 var()를 사용할지 작성한 값을 치환할지를 독립적으로 제어합니다. 프로젝트 설정은 테마 토큰, 범위와 상속 및 해석은 변수와 모드를 참고하세요.

@theme

유틸리티 토큰을 사용자 지정 속성으로 선언합니다. 테마 블록은 최상위에 있어야 하며 사용자 지정 속성 토큰 선언만 허용합니다. 키프레임은 블록 밖의 네이티브 CSS에 선언하세요.

@theme {  --color-brand: #4f46e5;  --spacing-card: 1.5rem;}

알 수 없거나 중복된 수정자는 오류입니다. static과 inline은 어느 순서로든 쓸 수 있습니다.

토큰은 @layer theme의 :root, :host에 출력됩니다. 컴파일러는 선언 순서와 중복 값을 유지합니다. 사용하는 토큰은 전이적 변수 의존성을 유지합니다. 선택자와 조건 규칙은 블록 밖의 네이티브 CSS에 둡니다.

유틸리티 패턴의 명명 토큰을 등록하는 것은 @theme뿐입니다. :root { --app-brand: red; } 같은 네이티브 선언은 일반 CSS로 유지됩니다. (color:var(--app-brand))로 직접 사용하거나 inline 테마 토큰으로 연결하세요.

각 경우는 brand와 spare를 선언하고 bg-brand만 사용합니다. inline만 있으면 두 토큰 모두 선언이 필요하지 않습니다. static을 추가하면 치환된 클래스 값을 바꾸지 않고 둘 다 유지합니다.

텍스트 설명

1. 네 경우 모두 --color-brand: #4f46e5와 --color-spare: #0d9488을 선언합니다. bg-brand가 유일한 사용처이며 네이티브 토큰 참조는 없습니다.
2. 일반 @theme는 사용하는 brand 토큰과 background-color: var(--color-brand)를 출력하고 사용하지 않는 spare 토큰은 생략합니다.
3. @theme inline은 생성 선언에 #4f46e5를 치환합니다. 유틸리티가 두 토큰을 모두 읽지 않으므로 이 경우 두 토큰 선언은 출력되지 않습니다.
4. @theme static은 두 토큰을 유지합니다. @theme static inline도 둘 다 유지하면서 생성 background-color는 #4f46e5로 남습니다. 유지와 치환은 독립적입니다.

@theme inline

inline을 사용해 토큰의 선언 값을 Master가 생성하는 선언에 치환합니다.

@theme inline {  --color-brand: var(--app-brand);}:root {  --app-brand: #4f46e5;}[data-theme="ocean"] {  --app-brand: #0369a1;}

bg-brand는 background-color:var(--app-brand)를 출력하여 클래스를 사용하는 요소에서 네이티브 변수를 해석합니다. 직접 선언 클래스, 유틸리티 클래스, 네이티브 @apply 확장에도 같은 치환을 적용합니다. 직접 작성한 네이티브 선언은 원래의 var() 참조를 유지합니다.

치환은 한 번만 실행합니다. 치환 값 안의 변수, 함수, 대체 값은 네이티브 CSS 의미를 유지합니다. 의존성은 결과 선언에서 수집하므로 inline 유틸리티 사용만으로는 치환된 토큰의 출력을 강제하지 않습니다. 토큰을 직접 네이티브 방식으로 참조하면 그 선언을 유지할 수 있습니다.

테마 정의가 반복되면 중요도 다음 소스 순서로 inline 값과 모드를 선택합니다. 사용자 지정 속성의 !important는 생성 유틸리티를 중요하게 만들지 않습니다. 일반 별칭은 선언한 범위에서 해석됩니다. 연결 값이 사용 위치에서 다른 변수를 읽어야 한다면 inline을 사용하세요.

@theme static

클래스나 네이티브 참조가 없어도 토큰을 출력해야 할 때 static을 사용합니다.

@theme static {  --color-integration: #4f46e5;}@theme static inline {  --color-brand: var(--app-brand);}

static은 토큰 전달을, inline은 생성 값을 제어하며 어느 순서로든 조합할 수 있습니다. static 선언이 하나라도 있는 토큰은 정의를 제거할 때까지 의존성과 함께 유지됩니다. 참조 스타일시트는 토큰이 static이라는 이유만으로 출력 루트가 되지 않습니다.

네이티브 테마 재정의

@theme에 기본값을 등록한 뒤 네이티브 선택자나 쿼리로 변수를 재정의합니다.

@theme {  --color-panel: white;}[data-theme="ocean"] {  --color-panel: #082f49;}@media (prefers-color-scheme: dark) {  :root {    --color-panel: #111827;  }}

네이티브 재정의는 작성한 범위, 레이어, 스타일시트 전달을 유지합니다. 같은 요소에서는 레이어 없는 일반 재정의가 theme 레이어의 일반 선언보다 우선합니다. defaults 같은 뒤쪽 레이어도 재정의를 우선하면서 components와 utilities 레이어에 더 높은 우선순위를 허용합니다. 재정의가 필요한 곳에 네이티브 스타일시트를 가져오세요. @reference는 정의만 제공하며 규칙을 전달하지 않습니다.

프리셋은 적응형 색상과 그림자에 네이티브 light-dark()를 사용하며 두 변수 분기를 모두 의존성으로 유지합니다. 네이티브 기본 CSS는 루트에 color-scheme: light dark를 설정하고 요소와 섀도 호스트에 밝음/어두움 data-theme 선택자를 제공합니다. 색상을 참고하세요.

@theme { --color-brand: #4f46e5; }  .dark { --color-brand: #111827; } .card { color: var(--color-brand); }

.dark {  --color-brand: #111827;}.card {  color: var(--color-brand);}@layer theme {  :root,  :host {    --color-brand: #4f46e5  }}