使用方法

如何与各种样式解决方案一起使用 Radix Colors。

Radix Colors 的色彩规模只是简单的 JavaScript 对象，因此您可以轻松地将它们与您喜欢的样式解决方案配合使用。以下是流行样式解决方案的使用示例。

原生 CSS

Radix Colors 提供了作为原始 CSS 文件打包的颜色。您可以在使用打包器（如 Parcel 或 Webpack）时直接在文件中导入它们。

/* 仅导入您需要的色彩规模 */
@import "@radix-ui/colors/gray.css";
@import "@radix-ui/colors/blue.css";
@import "@radix-ui/colors/green.css";
@import "@radix-ui/colors/red.css";
@import "@radix-ui/colors/gray-dark.css";
@import "@radix-ui/colors/blue-dark.css";
@import "@radix-ui/colors/green-dark.css";
@import "@radix-ui/colors/red-dark.css";

/* 将颜色用作 CSS 变量 */
.button {
	background-color: var(--blue-4);
	color: var(--blue-11);
	border-color: var(--blue-7);
}
.button:hover {
	background-color: var(--blue-5);
	border-color: var(--blue-8);
}

<!-- 对于暗模式，将 `.dark` 类应用于 <body> 或父元素。 -->
<body class="dark">
	<button class="button">按钮</button>
</body>

styled-components

import {
	gray,
	blue,
	red,
	green,
	grayDark,
	blueDark,
	redDark,
	greenDark,
} from "@radix-ui/colors";
import styled, { ThemeProvider } from "styled-components";

// 创建您的主题
const theme = {
	colors: {
		...gray,
		...blue,
		...red,
		...green,
	},
};

// 创建您的暗色主题
const darkTheme = {
	colors: {
		...grayDark,
		...blueDark,
		...redDark,
		...greenDark,
	},
};

// 在样式中使用颜色
const Button = styled.button`
	background-color: ${(props) => props.theme.colors.blue4};
	color: ${(props) => props.theme.colors.blue11};
	border-color: ${(props) => props.theme.colors.blue7};
	&:hover {
		background-color: ${(props) => props.theme.colors.blue5};
		border-color: ${(props) => props.theme.colors.blue8};
	}
`;

// 用主题提供者包装您的应用，并将主题应用于它
export default function App() {
	return (
		<ThemeProvider theme={theme}>
			<Button>Radix Colors</Button>
		</ThemeProvider>
	);
}

emotion

与上面 styled-components 文档的用法几乎相同，除了导入不同。

import {
	gray,
	blue,
	red,
	green,
	grayDark,
	blueDark,
	redDark,
	greenDark,
} from "@radix-ui/colors";
import { ThemeProvider } from "@emotion/react";
import styled from "@emotion/styled";

vanilla-extract

import {
	gray,
	blue,
	red,
	green,
	grayDark,
	blueDark,
	redDark,
	greenDark,
} from "@radix-ui/colors";
import { createTheme } from "@vanilla-extract/css";

export const [theme, vars] = createTheme({
	colors: {
		...gray,
		...blue,
		...red,
		...green,
	},
});

export const darkTheme = createTheme(vars, {
	colors: {
		...grayDark,
		...blueDark,
		...redDark,
		...greenDark,
	},
});

// 在样式中使用颜色
export const styles = {
	button: style({
		backgroundColor: vars.colors.blue4,
		color: vars.colors.blue11,
		borderColor: vars.colors.blue7,
		":hover": {
			backgroundColor: vars.colors.blue5,
			borderColor: vars.colors.blue8,
		},
	}),
};

// 将您的主题应用于它
export default function App() {
	return (
		<body className={theme}>
			<button className={styles.button}>Radix Colors</button>
		</body>
	);
}

上一篇Installation

下一篇Aliasing

在 GitHub 上编辑此页面