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/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,})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)const currentTheme = univerAPI.getCurrentTheme()console.log(univerAPI.isDarkMode(), currentTheme)univerAPI.toggleDarkMode(false)¿Cómo es esta guía?