Почти чёрный фон, фирменный фиолетовый Twitch и компактные карточки трансляций.
Контент в прямом эфире на первом месте: интерфейс уходит в чёрный, фиолетовый ведёт к действию.
Нажмите на цвет, чтобы скопировать hex.
Попробуйте свой цвет — образец и токены обновятся сразу.
Три вопроса — останутся только подходящие стили.8 из 8
:root {
--background: #0e0e10;
--surface: #18181b;
--foreground: #efeff1;
--muted: #adadb8;
--accent: #9147ff;
--palette-1: #0e0e10;
--palette-2: #18181b;
--palette-3: #1f1f23;
--palette-4: #9147ff;
--palette-5: #efeff1;
--radius: 6px;
--shadow: 0 4px 8px rgb(0 0 0 / 0.4);
--gradient: linear-gradient(180deg, #18181b 0%, #0e0e10 100%);
--font-heading: Roobert;
--font-body: Inter;
}@theme {
--color-background: #0e0e10;
--color-surface: #18181b;
--color-foreground: #efeff1;
--color-muted: #adadb8;
--color-accent: #9147ff;
--radius-style: 6px;
--shadow-style: 0 4px 8px rgb(0 0 0 / 0.4);
--font-heading: "Roobert", sans-serif;
--font-body: "Inter", sans-serif;
}{
"name": "twitch",
"color": {
"background": "#0e0e10",
"surface": "#18181b",
"foreground": "#efeff1",
"muted": "#adadb8",
"accent": "#9147ff"
},
"palette": {
"Фон": "#0e0e10",
"Поверхность": "#18181b",
"Карточка": "#1f1f23",
"Акцент": "#9147ff",
"Текст": "#efeff1"
},
"radius": "6px",
"shadow": "0 4px 8px rgb(0 0 0 / 0.4)",
"gradient": "linear-gradient(180deg, #18181b 0%, #0e0e10 100%)",
"font": {
"heading": {
"family": "Roobert",
"weight": 700,
"tracking": "-0.01em"
},
"body": {
"family": "Inter"
}
}
}