Temas y modo oscuro
Uso de Official Temas
@univerjs/themes exporta defaultTheme (también como blueTheme), darkBlueTheme, greenTheme, orangeTheme, purpleTheme, redTheme y yellowTheme.
defaultTheme se utiliza de forma predeterminada.Instalación de complementos de tema
Modo preestablecido
En el modo preestablecido, los temas se pueden importar desde el paquete @univerjs/presets:
// import { defaultTheme } from "@univerjs/presets";import { yellowTheme } from '@univerjs/presets'const { univer } = createUniver({ theme: yellowTheme, // theme: defaultTheme,})Modo complemento
En el modo complemento, los temas los proporciona el Paquete @univerjs/themes, que debe instalar primero.
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,})Personalizar temas
Puede personalizar temas creando un objeto que se ajuste a la interfaz Theme. Consulte esta documentación para comprender cómo se definen las variables de tema predeterminadas.
import type { Theme } from '@univerjs/themes';import { defaultTheme } from '@univerjs/themes';export const customTheme: Theme = { ...defaultTheme, primary: { ...defaultTheme.primary, 50: '#F5F3FF', 100: '#EDE9FE', 200: '#DDD6FE', 300: '#C4B5FD', 400: '#A78BFA', 500: '#8B5CF6', 600: '#7C3AED', 700: '#6D28D9', 800: '#5B21B6', 900: '#4C1D95', },};// Import your custom theme hereimport { customTheme } from './custom-theme'const univer = new Univer({ theme: customTheme,})Personalizador de temas
Utilice el personalizador de temas independiente para editar tokens de temas de Univer, obtener una vista previa de los modos claro y oscuro y copiar el JSON del tema generado.
Modo oscuro
Univer admite el modo oscuro, que puede ser habilitado configurando la propiedad darkMode en true.
new Univer({ darkMode: true,})API de Facade
También puede alternar dinámicamente el modo oscuro usando la API de Facade.
import { darkBlueTheme } from '@univerjs/themes'univerAPI.setTheme(darkBlueTheme)univerAPI.toggleDarkMode(true)const currentTheme = univerAPI.getCurrentTheme()console.log(univerAPI.isDarkMode(), currentTheme)univerAPI.toggleDarkMode(false)¿Cómo es esta guía?