Thèmes et mode sombre
Utiliser les thèmes officiels
@univerjs/themes exporte defaultTheme (également sous le nom blueTheme), darkBlueTheme, greenTheme, orangeTheme, purpleTheme, redTheme et yellowTheme.
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 :
// 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.
pnpm add @univerjs/themesnpm install @univerjs/themesyarn add @univerjs/themesbun add @univerjs/themesimport { 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 pour comprendre comment sont définies les variables du thème par défaut.
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', }, // ...}// Import your custom theme hereimport { 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é.
Mode sombre
Univer prend en charge le mode sombre, que vous pouvez activer en définissant la propriété darkMode sur true.
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.
import { darkBlueTheme } from '@univerjs/themes'univerAPI.setTheme(darkBlueTheme)const currentTheme = univerAPI.getCurrentTheme()console.log(univerAPI.isDarkMode(), currentTheme)univerAPI.toggleDarkMode(false)Que pensez-vous de ce guide ?