Themes
Advanced
Utils
Theme

Color

색상 시스템과 테마에서의 적용 방법을 이해합니다.

Confy-ui Themes는 각기 다른 밝기, 어두움 및 알파 변형을 가진 여러 색상 스케일을 제공합니다.

Accents

강조 색상은 테마에서 가장 지배적인 색상입니다. 이는 기본 버튼, 링크 및 기타 상호작용 요소에 사용됩니다. accentColor는 Theme 컴포넌트에서 직접 지정됩니다:

<Theme accentColor="indigo">

	<MyApp />

</Theme>

Available accent colors

선택할 수 있는 다양한 강조 색상이 있습니다:

Gray
Gold
Bronze
Brown
Yellow
Amber
Orange
Tomato
Red
Ruby
Crimson
Pink
Plum
Purple
Violet
Iris
Indigo
Blue
Cyan
Teal
Jade
Green
Grass
Lime
Mint
Sky

Accent scale anatomy

각 강조 색상은 12단계 스케일로, 각 색상의 고체 및 투명 변형을 포함합니다. 예를 들어, indigo 색상 스케일은 다음과 같습니다:

1
2
3
4
5
6
7
8
9
10
11
12

Accent scale tokens

강조 색상 토큰은 CSS 변수를 사용하여 접근할 수 있습니다. 이러한 토큰을 사용하여 사용자 정의 구성 요소를 스타일링하여 테마의 나머지 부분과 일관되게 유지할 수 있습니다.

/* Backgrounds */

var(--accent-1);

var(--accent-2);



/* Interactive components */

var(--accent-3);

var(--accent-4);

var(--accent-5);



/* Borders and separators */

var(--accent-6);

var(--accent-7);

var(--accent-8);



/* Solid colors */

var(--accent-9);

var(--accent-10);



/* Accessible text */

var(--accent-11);

var(--accent-12);



/* Functional colors */

var(--accent-surface);

var(--accent-indicator);

var(--accent-track);

var(--accent-contrast);

Grays

순수 회색 또는 여러 가지 색조의 회색 중에서 선택할 수 있습니다. 강조 색상은 자동으로 이를 보완하는 회색 음영과 쌍을 이루게 됩니다. 그러나 Theme 컴포넌트에서 직접 사용자 정의 grayColor를 지정할 수도 있습니다:

<Theme grayColor="mauve">

	<MyApp />

</Theme>

Available gray colors

선택할 수 있는 6가지 회색이 있습니다. 차이는 미세할 수 있지만, 텍스트가 많은 페이지나 밀집된 UI에서는 영향력이 큽니다.

Gray
Mauve
Slate
Sage
Olive
Sand

Gray scale anatomy

회색은 고체 및 투명 변형을 포함하는 12단계 색상 스케일을 기반으로 합니다. 예를 들어, slate 색상 스케일은 다음과 같습니다:

1
2
3
4
5
6
7
8
9
10
11
12

Gray scale tokens

회색 색상 토큰은 CSS 변수를 사용하여 접근할 수 있습니다. 이러한 토큰을 사용하여 사용자 정의 구성 요소를 스타일링하여 테마의 나머지 부분과 일관되게 유지할 수 있습니다.

/* Backgrounds */

var(--gray-1);

var(--gray-2);



/* Interactive components */

var(--gray-3);

var(--gray-4);

var(--gray-5);



/* Borders and separators */

var(--gray-6);

var(--gray-7);

var(--gray-8);



/* Solid colors */

var(--gray-9);

var(--gray-10);



/* Accessible text */

var(--gray-11);

var(--gray-12);



/* Functional colors */

var(--gray-surface);

var(--gray-indicator);

var(--gray-track);

var(--gray-contrast);

Color overrides

사용 가능한 경우, 구성 요소의 color prop을 사용하여 테마 강조 색상을 오버라이드할 수 있습니다. 중첩된 구성 요소는 새 강조 색상을 자동으로 상속받습니다.

There are new commits.

There are new commits.

<Theme accentColor="indigo">

	<Flex align="start" direction={{ initial: "column", sm: "row" }} gap="4">

		<Callout.Root>

			<Callout.Icon>

				<InfoCircledIcon />

			</Callout.Icon>

			<Callout.Text>

				<Flex as="span" align="center" gap="4">

					<Text>There are new commits.</Text>

					<Button variant="surface" size="1" my="-2">

						Refresh

					</Button>

				</Flex>

			</Callout.Text>

		</Callout.Root>



		<Callout.Root color="gray">

			<Callout.Icon>

				<InfoCircledIcon />

			</Callout.Icon>

			<Callout.Text>

				<Flex as="span" align="center" gap="4">

					<Text>There are new commits.</Text>

					<Button variant="surface" size="1" my="-2">

						Refresh

					</Button>

				</Flex>

			</Callout.Text>

		</Callout.Root>

	</Flex>

</Theme>

Individual color tokens

개별 색상은 해당 이름에 따라 --red-1, --red-2 등으로 직접 접근할 수 있습니다.

High contrast

대부분의 경우, color prop이 있는 구성 요소는 페이지 배경에 대비되는 외관을 달성하는 highContrast 옵션을 제공합니다:

<Flex gap="4">

	<Button variant="classic" color="gray">

		Edit profile

	</Button>

	<Button variant="classic" color="gray" highContrast>

		Edit profile

	</Button>

</Flex>

Focus and selection

Confy-ui Themes는 현재 구성 요소의 강조 색상에 따라 포커스 및 선택 색상을 자동으로 조정합니다. 대부분의 경우, color prop을 설정하면 충돌하는 색상을 피하기 위해 포커스 및 선택 색상을 지능적으로 변경합니다:

Complete your account setup in settingsComplete your account setup in settingsComplete your account setup in settings
<Theme accentColor="indigo">

	<Flex direction="column" gap="4">

		<Text>

			Complete your account setup in <Link href="#">settings</Link>

		</Text>

		<Text color="gray">

			Complete your account setup in <Link href="#">settings</Link>

		</Text>

		<Text color="red">

			Complete your account setup in <Link href="#">settings</Link>

		</Text>

	</Flex>

</Theme>

Focus scale tokens

포커스 색상 토큰은 다른 스케일과 유사한 명명 구조를 따르는 CSS 변수를 사용하여 접근할 수 있습니다. 대부분의 구성 요소는 포커스 윤곽선 색상으로 --focus-8을 사용합니다.

Alpha colors

모든 색상에는 페이지 배경 위에 놓였을 때 시각적으로 동일하게 보이도록 설계된 알파 변형이 있습니다. 이는 다른 배경 위에 색상이 자연스럽게 보이도록 하는 강력한 도구입니다. 모든 숫자 색상 단계에는 해당 알파 변형이 있습니다.

/* Solid colors */

var(--red-1);

var(--red-2);

...

var(--red-12);



/* Alpha colors */

var(--red-a1);

var(--red-a2);

...

var(--red-a12);

알파 색상은 Confy-ui Themes 구성 요소 내에서 자동으로 사용되며, 추가 구성은 필요하지 않습니다.

Backgrounds

여러 배경 색상은 Confy-ui Themes UI에서 시각적 계층 구조를 생성하는 데 사용됩니다. 이러한 색상은 배경, 카드 및 기타 표면에 사용됩니다.

/* Page background */

var(--color-background);



/* Panel backgrounds, such as cards, tables, popovers, dropdown menus, etc. */

var(--color-panel-solid);

var(--color-panel-translucent);



/* Form component backgrounds, such as text fields, checkboxes, select, etc. */

var(--color-surface);



/* Dialog overlays */

var(--color-overlay);

Panel background

panelBackground prop은 패널 요소가 고체 또는 반투명 배경 색상을 사용하도록 제어합니다. 기본값인 translucent 값은 미세한 오버레이 효과를 생성합니다:

<Theme panelBackground="translucent">

	<MyApp />

</Theme>

Sign up

Forgot password?

정보를 방해받지 않고 제공하고 싶을 때는 solid가 유용합니다.

<Theme panelBackground="solid">

	<MyApp />

</Theme>

Sign up

Forgot password?

Customization

Confy-ui Themes 색상은 해당 CSS 변수의 토큰 시스템을 오버라이드하여 사용자 정의할 수 있습니다.

CSS가 Confy-ui Themes 스타일 뒤에 적용되도록 하여 우선권을 가질 수 있도록 하세요.

Brand color

특정 색상을 브랜드 색상으로 교체하려면 해당 토큰을 다시 매핑하여 사용하세요. 일반적으로 테마 강조로 사용하는 스케일의 9단계를 오버라이드합니다.

.radix-themes {

	--my-brand-color: #3052f6;

	--indigo-9: var(--my-brand-color);

	--indigo-a9: var(--my-brand-color);

}

이 예제에서는 고체 색상 indigo 구성 요소가 이제 사용자 정의 색상을 참조하게 됩니다.

Custom palette

사용자 정의 색상 팔레트 도구를 사용하여 몇 가지 참조 색상만으로 사용자 정의 팔레트를 생성할 수 있습니다. 결과에 만족하면 생성된 CSS를 프로젝트에 붙여넣으세요. 생성된 색상의 이름을 테마에서 사용하고자 하는 강조 색상에 맞게 변경할 수 있습니다.

어두운 테마 색상을 생성하려면 외관을 어두운 테마로 전환하세요. 생성된 CSS를 붙여넣기 전에 밝은 테마 색상 오버라이드를 붙여넣으세요.

Create a custom palette →

Color aliasing

일반 색상 이름을 사용하여 사용하고자 하는 색상 음영을 참조하는 것이 좋습니다. 예를 들어, crimson, jade, indigo를 각각 red, green, blue로 참조하는 것이 일반적입니다.

이 경우 Confy-ui Themes 토큰을 서로 대체하여 원하는 색상 이름을 사용할 수 있습니다:

.confy-themes {

	--red-1: var(--ruby-1);

	--red-2: var(--ruby-2);

	--red-3: var(--ruby-3);

	--red-4: var(--ruby-4);

	--red-5: var(--ruby-5);

	--red-6: var(--ruby-6);

	--red-7: var(--ruby-7);

	--red-8: var(--ruby-8);

	--red-9: var(--ruby-9);

	--red-10: var(--ruby-10);

	--red-11: var(--ruby-11);

	--red-12: var(--ruby-12);



	--red-a1: var(--ruby-a1);

	--red-a2: var(--ruby-a2);

	--red-a3: var(--ruby-a3);

	--red-a4: var(--ruby-a4);

	--red-a5: var(--ruby-a5);

	--red-a6: var(--ruby-a6);

	--red-a7: var(--ruby-a7);

	--red-a8: var(--ruby-a8);

	--red-a9: var(--ruby-a9);

	--red-a10: var(--ruby-a10);

	--red-a11: var(--ruby-a11);

	--red-a12: var(--ruby-a12);



	--red-surface: var(--ruby-surface);

	--red-indicator: var(--ruby-indicator);

	--red-track: var(--ruby-track);

	--red-contrast: var(--ruby-contrast);

}

이 예제에서는 Confy-ui Themes 구성 요소와 토큰에서 red 색상을 사용할 경우 원래 ruby 스케일을 참조하게 됩니다.

Individual CSS files

색상 정의는 Confy-ui Themes가 제공하는 총 CSS 크기의 약 20%를 차지합니다.

사용하는 색상만으로 CSS 번들 크기를 줄이고 싶다면 각 색상 모듈에 대한 개별 CSS 파일을 가져올 수 있습니다. 다음은 샘플 설정입니다:

// 기본 테마 토큰

import "@confy-ui/react/themes/tokens/base.css";



// 사용하는 색상만 포함합니다. 예를 들어 `ruby`, `teal`, `slate`.

// 테마 설정에 맞는 회색 음영을 가져오는 것을 잊지 마세요.

import "@confy-ui/react/themes/tokens/colors/ruby.css";

import "@confy-ui/react/themes/tokens/colors/teal.css";

import "@confy-ui/react/themes/tokens/colors/slate.css";



// 나머지 CSS

import "@confy-ui/react/themes/components.css";

import "@confy-ui/react/themes/utilities.css";

가져오지 않은 색상은 React에서 color prop에 의해 여전히 수용됩니다. 또한 가져온 CSS 파일의 순서를 유지하는지 확인하세요.

PreviousOverview
NextDark mode
Edit this page on GitHub.