# @cloud-ru/ds-theme 中文文档

规范地址：https://npmcn.com/package/%40cloud-ru/ds-theme/

版本：2\.1\.0
npm 元数据更新时间：2026-10-05T20:09:39.069Z
中文译文更新时间：2026-11-10T02:28:48.140Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40cloud-ru/ds-theme
原文对照：https://npmcn.com/package/%40cloud-ru/ds-theme/?lang=original
项目主页：https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/theme
源码仓库：https://github.com/cloud-ru-tech/snack-v2

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

- 包体积（解压后）：506 kB，247 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2026-08-18T12:38:39.795Z
- 最新版本发布：2026-10-05T20:09:38.887Z
- 近 30 天下载量：24053（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：22（近 12 个月 22 个）

## 中文简介

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080} - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080} - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080} - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080} - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080} - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080} - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080} - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx6\\fs22\\bord1\\shad0\\3aHBE\\4cH808080}.

## 安装

```sh
npm install @cloud-ru/ds-theme
```

也可以使用：`pnpm add @cloud-ru/ds-theme`、`yarn add @cloud-ru/ds-theme`、`bun add @cloud-ru/ds-theme`

## README

# 主题

`@cloud-ru/ds-theme` —— ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————.

`@cloud-ru/ds-theme` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢. **{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}======================================================================================================================================================================================================================================= `sn-*` эмитится DOMграницу.** `RootThemeProvider` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢`colorScheme`, (中文(简体) ), `brand`, (中文(简体) ), `platform`, (中文(简体) ), `density`, (中文(简体) ), `acrylic`), эмитя `sn-*` на `rootRef` 页:1 `<html>`) (中文(简体) ). {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `ChildThemeProvider`、 а 、 ось 、 себя `useThemeClassnames`。 。 。 .

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `@cloud-ru/ds-theme` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 **种子 种子 种子 种子** (白色标签): `--sn-brand-color-primary-*`, \\ \\ \\ \\ \\ \\ \\ \\.

\# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # [————————————————————](https://npmcn.com/patterns/theme)。 。 。 .

## Когда

-   {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `RootThemeProvider value={{ colorScheme, brand, density }}` 页:1 `store` для多根/MFEчерез `getGlobalThemeStore().store`) (中文(简体) ).
-   轻/暗 `useColorScheme` (单位:千美元)`prefers-color-scheme` # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # `value.colorScheme`。 。 。 .
-   /плотность/схему- `ChildThemeProvider` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢.
-   Компонент фиксирует ось ( `density: 'comfort'`(b) —— `useThemeClassnames({ density })` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你喜欢什么.
-   {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}(白色标签) {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}(白色标签) `RootThemeProvider brandColor='#RRGGBB'` (декларативно)либо `useApplyCustomTheme({ color })` (императивно.

> Полный `sn-*` (原始内容存档于2018-10-29). QQ: классы CSS-каскад. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `sn-comfort` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢? Старый `ThemeProvider` 编号 : `useThemeConfig` (произвольные `themeMap`——遗产———————————————————————————————————————— `RootThemeProvider`。 。 。 .

## Установка

```bash
pnpm add @cloud-ru/ds-theme
```

```tsx
import {
  RootThemeProvider,
  ChildThemeProvider,
  useThemeClassnames,
  useColorScheme,
  useApplyCustomTheme,
  getGlobalThemeStore,
} from '@cloud-ru/ds-theme'
```

## Примеры

### {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢

`ChildThemeProvider` сливает `brand` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 `sn-*` на.

```tsx
import { Block } from '@cloud-ru/ds-block';
import { Button } from '@cloud-ru/ds-button';
import { Counter } from '@cloud-ru/ds-counter';
import { SegmentControl } from '@cloud-ru/ds-segment-control';
import { Tag } from '@cloud-ru/ds-tag';
import { BRAND, Brand, ChildThemeProvider } from '@cloud-ru/ds-theme';
import { Flex } from '@cloud-ru/ds-uikit-product-flex';
import { useState } from 'react';

const BRAND_ITEMS = [BRAND.CloudConsole, BRAND.SnackUI, BRAND.Gitverse, BRAND.HrGreen, BRAND.SiteBlue].map(value => ({
  value,
  label: value,
}));

export function BrandSwitch() {
  const [brand, setBrand] = useState<Brand>(BRAND.CloudConsole);

  return (
    <Flex direction='column' gap='2m' align='flex-start'>
      <SegmentControl items={BRAND_ITEMS} value={brand} onChange={value => setBrand(value as Brand)} />

      {/* ChildThemeProvider сливает ось `brand` с ближайшим контекстом и реэмитит полный набор
          sn-* на своей границе — акцентные цвета компонентов ниже меняются вслед за брендом. */}
      <ChildThemeProvider value={{ brand }}>
        <Block>
          <Flex gap='2m' align='center' wrap>
            <Button appearance='primary' label='Действие' />
            <Tag appearance='primary' label='Бренд' />
            <Counter value={8} appearance='primary' />
          </Flex>
        </Block>
      </ChildThemeProvider>
    </Flex>
  );
}
```

### {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢`sn-light` 编号 : `sn-dark`) (中文(简体) ). В `useColorScheme`。 。 。 .

```tsx
import { Block } from '@cloud-ru/ds-block';
import { Button } from '@cloud-ru/ds-button';
import { SegmentControl } from '@cloud-ru/ds-segment-control';
import { Tag } from '@cloud-ru/ds-tag';
import { ChildThemeProvider, COLOR_SCHEME, ColorScheme } from '@cloud-ru/ds-theme';
import { Flex } from '@cloud-ru/ds-uikit-product-flex';
import { useState } from 'react';

const SCHEME_ITEMS = [
  { value: COLOR_SCHEME.Light, label: 'Светлая' },
  { value: COLOR_SCHEME.Dark, label: 'Тёмная' },
];

export function ColorSchemeToggle() {
  const [colorScheme, setColorScheme] = useState<ColorScheme>(COLOR_SCHEME.Light);

  return (
    <Flex direction='column' gap='2m' align='flex-start'>
      <SegmentControl
        items={SCHEME_ITEMS}
        value={colorScheme}
        onChange={value => setColorScheme(value as ColorScheme)}
      />

      {/* В приложении colorScheme — источник истины `useColorScheme` (cookie + prefers-color-scheme),
          а корень держит RootThemeProvider. Здесь ChildThemeProvider переключает схему для поддерева:
          материал-подложка Block и компоненты на ней перекрашиваются вслед за схемой. */}
      <ChildThemeProvider value={{ colorScheme }}>
        <Block>
          <Flex gap='2m' align='center' wrap>
            <Button appearance='primary' label='Действие' />
            <Button appearance='neutral' view='outline' label='Отмена' />
            <Tag appearance='blue' label='Метка' />
          </Flex>
        </Block>
      </ChildThemeProvider>
    </Flex>
  );
}
```

### Локальная

Компонент `density` через `useThemeClassnames({ density })` -=YTET -伊甸园字幕组=- 翻译:.

```tsx
import { Button } from '@cloud-ru/ds-button';
import { SegmentControl } from '@cloud-ru/ds-segment-control';
import { Tag } from '@cloud-ru/ds-tag';
import { DENSITY, Density, useThemeClassnames } from '@cloud-ru/ds-theme';
import { Flex } from '@cloud-ru/ds-uikit-product-flex';
import { useState } from 'react';

const DENSITY_ITEMS = Object.values(DENSITY).map(value => ({ value, label: value }));

function DensitySurface({ density }: { density: Density }) {
  // useThemeClassnames({ density }) подмешивает текущие colorScheme/brand из контекста и навешивает
  // ПОЛНЫЙ набор sn-* (а не одиночный sn-comfort) — внутренние отступы компонентов меняются вслед
  // за плотностью, а тёмная тема при этом не ломается.
  const className = useThemeClassnames({ density });

  return (
    <div className={className}>
      <Flex gap='2m' align='center' wrap>
        <Button appearance='primary' label='Кнопка' />
        <Button appearance='neutral' view='outline' label='Ещё' />
        <Tag appearance='primary' label='Тег' />
      </Flex>
    </div>
  );
}

export function LocalDensity() {
  const [density, setDensity] = useState<Density>(DENSITY.Compact);

  return (
    <Flex direction='column' gap='2m' align='flex-start'>
      <SegmentControl items={DENSITY_ITEMS} value={density} onChange={value => setDensity(value as Density)} />
      <DensitySurface density={density} />
    </Flex>
  );
}
```

## 道具

### 根主题

**根主题**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `brandColor` | `string` | —— 说 | \-=YTET -伊甸园字幕组=- 翻译: `#rrggbb`{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢? {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢  
种子 - ======================================================================================================================================================================================================== - ================== - ============================== `<style>` на:"классы也. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢  
{\\fn黑体\\fs20\\shad2\\2ah82\\3ah20\\4ah33\\fscx95\\3ch592001\\be1}你觉得怎样 `sn-*` вложенными(表и,  
{\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}你觉得呢? {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢? Глобальная  
{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 `useApplyCustomTheme`。 。 。 . |
| `children` | `string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined` | —— 说 |  |
| `className` | `string` | —— 说 | 包装..`<div>` (паддинги/фон. # # # # # # # # 包装 # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # `rootRef`) (中文(简体) ). |
| `nonce` | `string` | —— 说 | 社区支助方案`nonce` для `<style>` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢. |
| `rootRef` | `RefObject<HTMLElement | null>` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `sn-*` 页:1 `<html>`编号 :`<body>`) (中文(简体) ). . . . .  
儿童节 `<div>` с набором. |
| `store` | `ThemeAppearanceStore` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢`getGlobalThemeStore().store`) (中文(简体) ). . . .  
`value`; ; ; ; ; ; ; ; ; Так  
{\\fn华文仿宋\\fs16\\1cHD1D1D1}好! 贝壳.. `getGlobalThemeStore().setAppearance`。 。 。 . |
| `value` | `ThemeAppearance` | —— 说 | Оформление. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}=================================================================================================================================================================== (===================================================================  
{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. `colorScheme` из `useColorScheme`) (中文(简体) ). Для多根  
(单-spa)——-. `store`。 。 。 . |

#### 相关类型

-   `Brand` =: `"agents-space"` | `"cloudConsole"` | `"giga-id"` | `"gitverse"` | `"hrBlue"` | `"hrGraphite"` | `"hrGreen"` | `"hrPurple"` | `"hrYellow"` | `"siteBlue"` | `"siteGraphite"` | `"siteGreen"` | `"sitePurple"` | `"siteYellow"` | `"snackUI"`
    
-   `ColorScheme` =: `"dark"` | `"light"`
    
-   `Density` =: `"comfort"` | `"compact"` | `"spacious"`
    
-   `Platform` =: `"webDesktop"` | `"webMobile"`
    

**主题附录**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `acrylic` | `boolean | undefined` | —— 说 | ——(blur-материал `sn-yes` при `true`时 `sn-no`。 。 。 . |
| `brand` | `"agents-space"` | `"cloudConsole"` | `"giga-id"` | `"gitverse"` | `"hrBlue"` | `"hrGraphite"` | `"hrGreen"` | `"hrPurple"` | `"hrYellow"` | `"siteBlue"` | `"siteGraphite"` | `"siteGreen"` | `"sitePurple"` | `"siteYellow"` | `"snackUI"` | —— 说 | Бренд- `sn-cloudConsole` 编号 : `sn-hrBlue` . |
| `colorScheme` | `"dark"` | `"light"` | —— 说 | – Цветовая – `sn-light` 编号 : `sn-dark`。 。 。 . |
| `density` | `"comfort"` | `"compact"` | `"spacious"` | —— 说 | Плотность- `sn-comfort` 编号 : `sn-compact` 编号 : `sn-spacious`。 。 。 . |
| `platform` | `"webDesktop"` | `"webMobile"` | —— 说 | Платформа- `sn-webDesktop` 编号 : `sn-webMobile`。 。 。 `webDesktop`。 。 。 `@cloud-ru/ds-adaptive`  
{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 `AdaptiveProvider`{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢. |

**主题助理**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `getServerSnapshot` | `(() => ThemeAppearanceContextValue) | undefined` | —— 说 | (原始内容存档于2018-09-29) (英语). SSR/. . . . . `getSnapshot`。 。 。 . |
| `getSnapshot` | `() => ThemeAppearanceContextValue` | —— 说 | Текущее. {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}你觉得怎样 `Object.is`ссылку,пока也. |
| `subscribe` | `(onStoreChange: () => void) => () => void` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. |

### 儿童主题

**儿童主题 提供工具**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `children` | `string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined` | —— 说 |  |
| `className` | `string` | —— 说 | 包装..`<div>` (паддинги/фон. # # # # # # # # 包装 # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # `rootRef`) (中文(简体) ). |
| `rootRef` | `RefObject<HTMLElement | null>` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `sn-*`. не  
儿童节 `<div>` с набором. |
| `value` | `ThemeAppearance` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢? {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得怎样. |

#### 相关类型

-   `Brand` =: `"agents-space"` | `"cloudConsole"` | `"giga-id"` | `"gitverse"` | `"hrBlue"` | `"hrGraphite"` | `"hrGreen"` | `"hrPurple"` | `"hrYellow"` | `"siteBlue"` | `"siteGraphite"` | `"siteGreen"` | `"sitePurple"` | `"siteYellow"` | `"snackUI"`
    
-   `ColorScheme` =: `"dark"` | `"light"`
    
-   `Density` =: `"comfort"` | `"compact"` | `"spacious"`
    
-   `Platform` =: `"webDesktop"` | `"webMobile"`
    

**主题附录**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `acrylic` | `boolean | undefined` | —— 说 | ——(blur-материал `sn-yes` при `true`时 `sn-no`。 。 。 . |
| `brand` | `"agents-space"` | `"cloudConsole"` | `"giga-id"` | `"gitverse"` | `"hrBlue"` | `"hrGraphite"` | `"hrGreen"` | `"hrPurple"` | `"hrYellow"` | `"siteBlue"` | `"siteGraphite"` | `"siteGreen"` | `"sitePurple"` | `"siteYellow"` | `"snackUI"` | —— 说 | Бренд- `sn-cloudConsole` 编号 : `sn-hrBlue` . |
| `colorScheme` | `"dark"` | `"light"` | —— 说 | – Цветовая – `sn-light` 编号 : `sn-dark`。 。 。 . |
| `density` | `"comfort"` | `"compact"` | `"spacious"` | —— 说 | Плотность- `sn-comfort` 编号 : `sn-compact` 编号 : `sn-spacious`。 。 。 . |
| `platform` | `"webDesktop"` | `"webMobile"` | —— 说 | Платформа- `sn-webDesktop` 编号 : `sn-webMobile`。 。 。 `webDesktop`。 。 。 `@cloud-ru/ds-adaptive`  
{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 `AdaptiveProvider`{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢. |

## Смотри

-   [————————————————————](https://npmcn.com/patterns/theme) - полная подключения темы темы темы.
-   **适应性** . . . . . `layoutType`{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢.
-   **语言** ——рантайм.
-   **门户连接** {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢.

## {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢

Помимо(предустановленных)`agents-space`, (中文(简体) ), `cloudConsole`, (中文(简体) ), `giga-id`, (中文(简体) ), `gitverse`, (中文(简体) ), `snackUI`时 `hr*` и `site*`(中文(简体) ) `@cloud-ru/ds-theme` -=YTET -伊甸园字幕组=- 翻译: 种子 种子 种子 `--sn-brand-color-primary-*` (OKLCH: ? ? ? ? ? ? ? ? ? ? `--sn-theme-color-primary-*` каскадит. {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}♪############################### #####################################################################################################################################################################################################.

Палитра **CSS - правилом - классы** (单位:千美元)`.sn-cloudConsole`, (中文(简体) ), `.sn-hrBlue` {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}你觉得怎样? {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}你觉得怎么样 Это:компоненты也 `sn-*` {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}♪ {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}♪ {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}♪ {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}♪ `useThemeClassnames`),"бренд"("бренд"),"бренд"("бренд"),"бренд"("бренд")等. 说吧

-   **Декларативно** . . . . . `brandColor` у `RootThemeProvider`。 。 。
    
    ```tsx
    <RootThemeProvider value={{ colorScheme }} brandColor={brand.primaryColor}>
      {app}
    </RootThemeProvider>
    ```
    
-   **Императивно** . . . . . `useApplyCustomTheme`。 。 。 `scope` добавляет **глобальное** - правило `scope` ограничивает. # # # # # # # # # # # # # # # # # ## ## ###########################################################################################################################################################################################################################################
    
    ```tsx
    useApplyCustomTheme({ color: brand.primaryColor, enabled: Boolean(brand), nonce })
    ```
    
    {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}你觉得呢 **глобальный** `useApplyCustomTheme` # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # `scope`), ^ 范围 -`brandColor`。 。 。 .
    

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `colorScheme`{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 校对:Soup `generateBrandPalette(color)` 编号 : `buildBrandPaletteVars(color)` из `@cloud-ru/ds-theme/ssr` (===================================================================================================== (=============================================================.

### Бренд-цвет-种子

`brandColor` генерирует `--sn-brand-color-primary-*` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得怎么样.

```tsx
import { Block } from '@cloud-ru/ds-block';
import { Button } from '@cloud-ru/ds-button';
import { Counter } from '@cloud-ru/ds-counter';
import { SegmentControl } from '@cloud-ru/ds-segment-control';
import { Tag } from '@cloud-ru/ds-tag';
import { RootThemeProvider } from '@cloud-ru/ds-theme';
import { Flex } from '@cloud-ru/ds-uikit-product-flex';
import { useState } from 'react';

const COLOR_ITEMS = [
  { value: '#ff7a00', label: 'Оранжевый' },
  { value: '#8a2be2', label: 'Фиолетовый' },
  { value: '#0077ff', label: 'Синий' },
  { value: '#e5006e', label: 'Розовый' },
];

export function CustomBrandColor() {
  const [color, setColor] = useState('#ff7a00');

  return (
    <Flex direction='column' gap='2m' align='flex-start'>
      <SegmentControl items={COLOR_ITEMS} value={color} onChange={value => setColor(String(value))} />

      {/* brandColor генерирует палитру `--sn-brand-color-primary-*` из одного seed-цвета — акцент
          компонентов ниже перекрашивается вслед за выбором. */}
      <RootThemeProvider value={{ colorScheme: 'light', brand: 'cloudConsole' }} brandColor={color}>
        <Block>
          <Flex gap='2m' align='center' wrap>
            <Button appearance='primary' label='Действие' />
            <Tag appearance='primary' label='Бренд' />
            <Counter value={8} appearance='primary' />
          </Flex>
        </Block>
      </RootThemeProvider>
    </Flex>
  );
}
```

### 范围

`useApplyCustomTheme({ color, scope })` инжектит,скоупленное也 `#brand-hook-scope` . . . . . . Без `scope` {\\fn黑体\\fs20\\shad2\\2ah82\\3ah20\\4ah33\\fscx95\\3ch592001\\be1}你觉得呢.

```tsx
import { Block } from '@cloud-ru/ds-block';
import { Button } from '@cloud-ru/ds-button';
import { Counter } from '@cloud-ru/ds-counter';
import { SegmentControl } from '@cloud-ru/ds-segment-control';
import { Tag } from '@cloud-ru/ds-tag';
import { RootThemeProvider, useApplyCustomTheme } from '@cloud-ru/ds-theme';
import { Flex } from '@cloud-ru/ds-uikit-product-flex';
import { useState } from 'react';

const COLOR_ITEMS = [
  { value: '#8a2be2', label: 'Фиолетовый' },
  { value: '#ff7a00', label: 'Оранжевый' },
  { value: '#0077ff', label: 'Синий' },
];

// `scope` — CSS-селектор корня поддерева. Здесь правило скоуплено на `#brand-hook-scope`, поэтому
// бренд-акцент перекрашивается только внутри этого блока (и во всех компонентах ниже по дереву — Button,
// Tag, Counter). Без `scope` правило было бы глобальным и перекрасило бы всю страницу, включая порталы.
const SCOPE_ID = 'brand-hook-scope';

export function CustomBrandColorHook() {
  const [color, setColor] = useState('#8a2be2');

  useApplyCustomTheme({ color, scope: `#${SCOPE_ID}` });

  return (
    <Flex direction='column' gap='2m' align='flex-start'>
      <SegmentControl items={COLOR_ITEMS} value={color} onChange={value => setColor(String(value))} />

      <div id={SCOPE_ID}>
        <RootThemeProvider value={{ colorScheme: 'light', brand: 'cloudConsole' }}>
          <Block>
            <Flex gap='2m' align='center' wrap>
              <Button appearance='primary' label='Внутри scope' />
              <Tag appearance='primary' label='Бренд' />
              <Counter value={8} appearance='primary' />
            </Flex>
          </Block>
        </RootThemeProvider>
      </div>
    </Flex>
  );
}
```

## 常见问题

### @cloud-ru/ds-theme 是什么？

\{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080\} - \{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080\} - \{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080\} - \{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080\} - \{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080\} - \{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080\} - \{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080\} - \{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx6\\fs22\\bord1\\shad0\\3aHBE\\4cH808080\}\.

### 如何安装 @cloud-ru/ds-theme？

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

### @cloud-ru/ds-theme 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cloud-ru/ds-theme 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @cloud-ru/ds-theme 可以商用吗？

@cloud-ru/ds-theme 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @cloud-ru/ds-theme 的下载量有多少？

根据 npm 官方下载统计，@cloud-ru/ds-theme 在 2026/10/10 – 2026/11/08 这 30 天内被下载 24,053 次，日均约 802 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cloud-ru/ds-theme 还在维护吗？

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