ReflexKR

컴포넌트 공방: Reflex 라이브러리 100

강의 개요

레이아웃

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

타이포그래피

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

폼

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

데이터 표시

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

펼침과 전환

Tabs

Accordion

Segmented Control

오버레이

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

동적 렌더링

Cond

Match

Foreach

Auto Scroll

미디어

Image

Audio

Video

표와 데이터 그리드

Table

Data Table

Data Editor

차트

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

차트 부품

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

다른 차트 라이브러리

Plotly

Pyplot

HTML 요소

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

그 밖의 도구

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

컴포넌트 공방: Reflex 라이브러리 100

그 밖의 도구

Theme

rx.themerx.theme_panel

공식 문서

공방 주문서

사이트 전체는 그대로 두고, 이벤트 배너 상자 하나만 청록색에 알약 모양 모서리로 바꿔 주세요.

rx.theme은 Radix 컴포넌트의 색, 모서리, 크기 비율을 정하는 테마 공급자입니다. 보통 앱 전체에 한 번 걸고, 페이지 안에서 다시 감싸면 그 안쪽만 다른 테마로 덮어씁니다. 이 페이지의 예제는 모두 이 덮어쓰기라서 사이트의 다른 곳은 바뀌지 않습니다.

rx.theme(
    rx.box(
        rx.button("Teal button"),
        padding="12px",
    ),
    accent_color="teal",
)

속성 바꿔 보기

카드 하나를 rx.theme으로 감쌌습니다. 테마를 바꾸면 버튼, 배지, 스위치, 카드가 한꺼번에 따라 바뀝니다.

속성 바꿔 보기

Spring sale

Up to 30% off this week.

New

accent_color

gray_color

radius

scaling

panel_background

has_background

rx.theme(
    rx.box(
        rx.card(
            rx.flex(
                rx.heading("Spring sale", size="4"),
                rx.text("Up to 30% off this week.", color_scheme="gray"),
                rx.flex(
                    rx.button("Shop now"),
                    rx.button("Later", variant="soft"),
                    rx.badge("New"),
                    rx.switch(default_checked=True),
                    spacing="3",
                    align="center",
                ),
                direction="column",
                spacing="3",
            ),
        ),
        padding="16px",
    ),
    accent_color="teal",
    gray_color="auto",
    radius="medium",
    scaling="100%",
    panel_background="translucent",
    has_background=True,
)

accent_color는 강조색, gray_color는 회색의 색조, radius는 모서리, scaling은 전체 크기 비율입니다. has_background를 켜면 테마 영역에 배경색이 칠해집니다.

속성	값	기본값	쓰임
`accent_color`	Radix 색 이름 26가지	`"indigo"`	버튼·링크·스위치 같은 강조색
`gray_color`	`"gray"` `"mauve"` `"slate"` `"sage"` `"olive"` `"sand"` `"auto"`	`"auto"`	회색 계열. auto는 강조색에 어울리는 회색
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	`"medium"`	모든 컴포넌트의 모서리
`scaling`	`"90%"` `"95%"` `"100%"` `"105%"` `"110%"`	`"100%"`	글자·여백·컴포넌트 크기 비율
`panel_background`	`"solid"` `"translucent"`	`"translucent"`	카드·메뉴 같은 판의 배경을 비치게 할지
`has_background`	`True` / `False`	`True`	테마 영역에 배경색을 칠할지
`appearance`	`"inherit"` `"light"` `"dark"`	`"inherit"`	밝은·어두운 모드. 앱 수준에서만 쓴다(아래)
`default_open` (theme_panel)	`True` / `False`	`False`	테마 패널을 열린 채로 시작

앱 전체에 테마 걸기

공식 문서는 rx.App(theme=rx.theme(...))로 설명하지만, Reflex 0.10에서는 이 인자가 "옛 지름길"로 표시되고 rxconfig.py의 RadixThemesPlugin(theme=...)이 정식 자리입니다. 이 사이트도 이 방식으로 accent_color="indigo", gray_color="slate", radius="large"를 걸어 두었습니다. 사이트 전체가 바뀌므로 코드로만 봅니다.

# rxconfig.py (Reflex 0.10): the app-wide theme goes to the Radix Themes plugin
import reflex as rx

config = rx.Config(
    app_name="my_app",
    plugins=[
        rx.plugins.RadixThemesPlugin(
            theme=rx.theme(appearance="light", has_background=True, radius="large", accent_color="teal"),
        ),
    ],
)

# The official docs' way; in 0.10 it remains as a deprecated shortcut
app = rx.App(
    theme=rx.theme(appearance="light", has_background=True, radius="large", accent_color="teal"),
)

appearance는 앱 수준 테마에서 쓰면 기본 색 모드(밝게·어둡게)를 정합니다. 0.10에서는 페이지 안의 rx.theme에 준 appearance를 그릴 때 빼 버리므로, 일부만 어둡게 만드는 데는 쓸 수 없습니다.

일부만 덮어쓰기

rx.theme으로 감싼 곳만 새 테마가 적용되고, 감싸지 않은 쪽은 앱 테마 그대로입니다. 주지 않은 속성은 바깥 테마를 물려받습니다. rx.theme 자체에 준 padding 같은 스타일은 무시되므로, 여백은 안쪽 rx.box에 줍니다.

App theme

Draft

Override

Draft

rx.flex(
    rx.card(
        rx.flex(rx.text("App theme"), rx.button("Save"), rx.badge("Draft"), spacing="3", align="center"),
    ),
    rx.theme(
        rx.card(
            rx.flex(rx.text("Override"), rx.button("Save"), rx.badge("Draft"), spacing="3", align="center"),
        ),
        accent_color="crimson",
        radius="full",
        has_background=False,
    ),
    spacing="4",
    wrap="wrap",
)

테마 패널

rx.theme_panel()은 화면 오른쪽 위에 뜨는 테마 편집기입니다. 색과 모서리를 눌러 보며 고른 뒤, 그 값을 코드의 rx.theme에 옮겨 적습니다. 닫힌 채로 시작하고, default_open=True면 열린 채로 시작합니다. 사이트 전체의 테마를 바꾸는 도구라서 이 페이지에서는 코드로만 보입니다.

rx.theme_panel()                   # theme editor in the top-right corner (starts closed)
rx.theme_panel(default_open=True)  # starts open

rx.theme(rx.text("..."), theme_panel=True)   # shortcut that puts the panel inside the theme

주문서 완성

배너 상자만 rx.theme으로 감싸 청록색, 알약 모서리, 조금 큰 비율로 바꿨습니다. 안의 callout과 버튼은 따로 색을 주지 않아도 테마를 따릅니다.

Event week: free shipping on every order.

rx.theme(
    rx.box(
        rx.callout("Event week: free shipping on every order.", icon="party-popper"),
        rx.flex(
            rx.button(rx.icon("gift"), "See deals"),
            rx.button("Remind me", variant="outline"),
            spacing="3",
            margin_top="12px",
        ),
        padding="16px",
    ),
    accent_color="teal",
    radius="full",
    scaling="105%",
    has_background=False,
)

공방 노트

앱 전체 테마는 rxconfig.py의 RadixThemesPlugin(theme=rx.theme(...)). rx.App(theme=)은 0.10에서 옛 지름길.
페이지 안의 rx.theme은 감싼 부분만 덮어쓴다. 주지 않은 값은 물려받는다.
accent_color · gray_color · radius · scaling · panel_background · has_background.
appearance는 앱 수준에서만. rx.theme에 준 스타일은 무시되니 안쪽 상자에.
rx.theme_panel()로 고르고, 고른 값을 코드에 옮긴다.

← 이전

HTML 요소 · SVG

그 밖의 도구 · Skeleton

새 교시·새 강의 소식 받기

이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.