# Thèmes et mode sombre

- Human documentation: [https://docs.univer.ai/fr-FR/guides/fundamentals/ui/themes](https://docs.univer.ai/fr-FR/guides/fundamentals/ui/themes)

- Agent Markdown: [https://docs.univer.ai/fr-FR/guides/fundamentals/ui/themes.md](https://docs.univer.ai/fr-FR/guides/fundamentals/ui/themes.md)

- Requested language: `fr-FR`

- Content language: `fr-FR`

- Documentation version: `1.2.0`

- Source: [fundamentals/ui/themes.fr-FR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/fundamentals/ui/themes.fr-FR.mdx)

---

## Utiliser les thèmes officiels

`@univerjs/themes` exporte `defaultTheme` (également sous le nom `blueTheme`), `darkBlueTheme`, `greenTheme`, `orangeTheme`, `purpleTheme`, `redTheme` et `yellowTheme`.

> [!NOTE]
> Si aucun thème n’est spécifié, 
> 
> `defaultTheme`
> 
>  est utilisé par défaut.

### Installer les plugins de thème

#### Mode preset

En mode preset, les thèmes peuvent être importés depuis le package `@univerjs/presets` :

```typescript
// import { defaultTheme } from "@univerjs/presets";
import { yellowTheme } from '@univerjs/presets'

const { univer } = createUniver({
  theme: yellowTheme,
  // theme: defaultTheme,
})
```

#### Mode plugin

En mode plugin, les thèmes sont fournis par le package `@univerjs/themes`, que vous devez d’abord installer.

#### npm

```bash
npm install @univerjs/themes
```

#### pnpm

```bash
pnpm add @univerjs/themes
```

#### yarn

```bash
yarn add @univerjs/themes
```

#### bun

```bash
bun add @univerjs/themes
```

```typescript
import { yellowTheme } from '@univerjs/themes'
// import { defaultTheme } from "@univerjs/themes";

const univer = new Univer({
  theme: yellowTheme,
  // theme: defaultTheme,
})
```

## Personnaliser les thèmes

Vous pouvez personnaliser les thèmes en créant un objet conforme à l’interface `Theme`. Consultez [cette documentation](https://docs.univer.ai/fr-FR/reference/types/theme.md) pour comprendre comment sont définies les variables du thème par défaut.

```typescript title="custom-theme.ts"
import type { Theme } from '@univerjs/presets'
// import type { Theme } from "@univerjs/themes";

export const customTheme: Theme = {
  white: '#FEFEFE',
  black: '#1C1C1C',
  primary: {
    50: '#F6F5FF',
    100: '#EDEBFE',
    200: '#DCD7FE',
    300: '#CABFFD',
    400: '#AC94FA',
    500: '#9061F9',
    600: '#7E3AF2',
    700: '#6C2BD9',
    800: '#5521B5',
    900: '#4A1D96',
  },
  // ...
}
```

```typescript
// Import your custom theme here
import { customTheme } from './custom-theme'

const univer = new Univer({
  theme: customTheme,
})
```

### Outil de personnalisation des thèmes

Utilisez l’outil autonome de personnalisation des thèmes pour modifier les tokens de thème d’Univer, prévisualiser les modes clair et sombre et copier le JSON du thème généré.

- [Ouvrir l’outil de personnalisation des thèmes](/tools/theme-customizer)
  Ajustez les tokens de palette, les couleurs de boucle et les surbrillances, puis exportez un thème personnalisé.

## Mode sombre

Univer prend en charge le mode sombre, que vous pouvez activer en définissant la propriété `darkMode` sur `true`.

```typescript
new Univer({
  darkMode: true,
})
```

### Facade API

Vous pouvez également activer ou désactiver le mode sombre de manière dynamique à l’aide de la Facade API.

```typescript
import { darkBlueTheme } from '@univerjs/themes'

univerAPI.setTheme(darkBlueTheme)
const currentTheme = univerAPI.getCurrentTheme()
console.log(univerAPI.isDarkMode(), currentTheme)

univerAPI.toggleDarkMode(false)
```