# @sckyzo/cosmos-theme 中文文档

规范地址：https://npmcn.com/package/%40sckyzo/cosmos-theme/

版本：0\.6\.0
npm 元数据更新时间：2026-11-02T09:30:19.919Z
中文译文更新时间：2026-11-02T10:19:39.417Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40sckyzo/cosmos-theme
原文对照：https://npmcn.com/package/%40sckyzo/cosmos-theme/?lang=original
项目主页：https://github.com/SckyzO/cosmos/tree/main/packages/theme
源码仓库：https://github.com/SckyzO/cosmos

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：43.4 kB，11 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：6 个
- 首次发布：2026-05-20T22:36:41.584Z
- 最新版本发布：2026-11-02T09:30:19.499Z
- 已发布版本数：9（近 12 个月 9 个）

## 中文简介

宇宙设计系统的顺风4主题和设计令牌-调色板，排版，半径和CSS变量为其浅色，沙子，深色和深蓝色主题。

## 安装

```sh
npm install @sckyzo/cosmos-theme
```

也可以使用：`pnpm add @sckyzo/cosmos-theme`、`yarn add @sckyzo/cosmos-theme`、`bun add @sckyzo/cosmos-theme`

## README

# @sckyzo / cosmos-theme

[![npm](https://img.shields.io/npm/v/@sckyzo/cosmos-theme)](https://www.npmjs.com/package/@sckyzo/cosmos-theme)

Cosmos设计代币，仅CSS：一个顺风4 `@theme` 积木，四个主题，十二个重音，六个 字体，以及文本大小，密度和角半径设置。是什么？ `@sckyzo/cosmos-react` 和 `@sckyzo/cosmos-charts` 的样式，并且它在任何框架中都可以自己工作。

| 进口 | 目的 |
| --- | --- |
| `@sckyzo/cosmos-theme/tailwind` | 顺风4 `@theme` 块（调色板，字体，阴影，品牌颜色） `dark:` 和 `rtl:` 变体，焦点实用程序 |
| `@sckyzo/cosmos-theme/vars` | CSS自定义属性（bg，文本，边框，重音），主题和重音 |
| `@sckyzo/cosmos-theme/fonts` | `@fontsource` 字体导入（Outfit + JetBrains Mono） |
| `@sckyzo/cosmos-theme/fonts/<name>` | 一个字体变量 `data-font`： `inter`， `plex`， `montserrat`， `open-sans` |

## 安装

```bash
npm install @sckyzo/cosmos-theme
```

三个Cosmos包共享一个版本号：安装每个包的相同版本。

## 使用

### 使用Tailwind 4（推荐用于React应用程序）

进口订单事项： `tailwindcss` 首先是Cosmos代币，然后是var。

```css
/* src/index.css */
@import 'tailwindcss';
@import '@sckyzo/cosmos-theme/tailwind';
@import '@sckyzo/cosmos-theme/vars';
@import '@sckyzo/cosmos-theme/fonts';
```

与 `@sckyzo/cosmos-react`，还要加上 `@source` 行，所以顺风扫描组件：看到 [开始](https://github.com/SckyzO/cosmos/blob/main/docs/getting-started.md#set-up-the-styles).

### 没有顺风（如Docusaurus）

```css
@import '@sckyzo/cosmos-theme/fonts';
@import '@sckyzo/cosmos-theme/vars';
/* Then reference vars: var(--color-brand-500), var(--color-bg-base), etc. */
```

### 设置外观

主题是上一堂课 `<html>`;重音，字体，文字大小，密度和角 半径是 `data-accent`， `data-font`， `data-text-size`， `data-density` 和 `data-radius` 属性, 阅读方向为母语 `dir`.

```html
<html class="sand" data-accent="teal"></html>
```

## 文档

-   [外观](https://github.com/SckyzO/cosmos/blob/main/docs/guides/appearance.md)：每一个主题，重音，字体，文字大小，密度和半径。
-   [令牌和焦点](https://github.com/SckyzO/cosmos/blob/main/docs/guides/tokens.md)：设计令牌和焦点实用程序。
-   [开始](https://github.com/SckyzO/cosmos/blob/main/docs/getting-started.md).

## 许可证

麻省理工学院,看到 [许可证](https://github.com/SckyzO/cosmos/blob/main/LICENSE).

## 常见问题

### @sckyzo/cosmos-theme 是什么？

宇宙设计系统的顺风4主题和设计令牌-调色板，排版，半径和CSS变量为其浅色，沙子，深色和深蓝色主题。

### 如何安装 @sckyzo/cosmos-theme？

在项目目录运行 npm install @sckyzo/cosmos-theme，或使用 pnpm add / yarn add / bun add。

### @sckyzo/cosmos-theme 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/sckyzo\_\_cosmos-theme 是否存在。

### @sckyzo/cosmos-theme 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @sckyzo/cosmos-theme 可以商用吗？

@sckyzo/cosmos-theme 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @sckyzo/cosmos-theme 还在维护吗？

最新版本 0\.6\.0 发布于 2026/11/02（1 天前）；至今共发布 9 个版本，其中过去 12 个月发布了 9 个；首次发布于 2026/05/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。