Dos cosas que puedes temar
En GrapesJS hay dos superficies separadas: la interfaz del editor (viñetas, botones, managers) y el lienzo (la página es editado, que vive en un iframe). Están diseñados de forma independiente. Esta guía renombra la interfaz con variables CSS y temas en el lienzo por separado.
1. Anular las variables de color de la interfaz
GrapesJS expone propiedades personalizadas de CSS. Carga tu hoja de estilo después de la GrapesJS CSS y anularlas:
:root {
--gjs-primary-color: #1f2937; /* top bars / base */
--gjs-secondary-color: #e5e7eb; /* icons / text */
--gjs-tertiary-color: #6d28d9; /* active / accents */
--gjs-quaternary-color: #7c3aed; /* highlights */
}Estas cuatro variables cubren la mayoría de las necesidades de marca — el editor Chrome las detecta Inmediatamente.
2. Clases de editor de destino para un control más fino
/* GrapesJS UI classes are prefixed with gjs- */
.gjs-pn-btn.gjs-pn-active { color: var(--gjs-tertiary-color); }
.gjs-block { border-radius: 8px; }3. Tema el lienzo de forma independiente
grapesjs.init({
container: '#gjs',
canvas: {
// Stylesheets injected into the canvas iframe (your site's CSS, fonts, etc.)
styles: ['/assets/site.css', 'https://fonts.googleapis.com/css2?family=Inter'],
},
});Como el lienzo es un iframe, sus estilos nunca se filtran en la interfaz del editor y viceversa — así que la vista previa de la página coincide con la producción mientras la interfaz mantiene tu marca.
Consejos
Acierta con el orden y el alcance. Tu hoja de estilo de anulación debe cargarse después grapes.min.css o ganan los valores por defecto. Las propiedades personalizadas de CSS (--gjs-primary-color y sus amigos) solo rediseñan la interfaz del editor — el lienzo es un iframe separado con temática a canvas.stylestravés de , así que no esperes que los cambios del host lleguen a él. Para soportar una interfaz oscura, redefine las variables bajo tu ámbito oscuro (por ejemplo .dark :root, ) en lugar de anular decenas de clases. Y apóyate en las cuatro variables de color antes de dirigirte gjs- directamente a las clases: cubren la mayoría de la marca con mucho menos código.
Requisitos previos
Necesitas un editor GrapesJS en funcionamiento y una hoja de estilos que se cargue después de GrapesJS CSS. Recuerda las dos superficies: la interfaz del editor (paneles, botones) y la Lienzo (la página que se edita, en un iframe) — están estilizados de forma independiente.
Las variables de color completas
GrapesJS expone propiedades personalizadas de CSS para la interfaz. Anular los cuatro colores principales, además El color de la fuente, en tu propia hoja de estilo:
:root {
--gjs-primary-color: #1f2937;
--gjs-secondary-color: #e5e7eb;
--gjs-tertiary-color: #6d28d9;
--gjs-quaternary-color: #7c3aed;
--gjs-font-color: #111827;
}Soporte para una interfaz oscura
Redefine las variables bajo tu ámbito oscuro en lugar de anular decenas de clases:
.dark :root, :root[data-theme="dark"] {
--gjs-primary-color: #0b1220;
--gjs-secondary-color: #94a3b8;
}Tema el lienzo de forma independiente
grapesjs.init({
container: '#gjs',
canvas: { styles: ['/assets/site.css', 'https://fonts.googleapis.com/css2?family=Inter'] },
});Como el lienzo es un iframe, sus estilos nunca se filtran en la interfaz del editor — así que la vista previa coincide con la producción mientras que el Chrome mantiene tu marca.
Mejores prácticas
Aprovecha las variables de color antes de dirigirte gjs- directamente a las clases — ellas
cubre la mayoría de la marca con mucho menos código y sobrevive mejor a las actualizaciones de GrapesJS. Carga tu
anula después del CSS base para que ganen. Mantén las fuentes y reinicios de canvas
canvas.styles Así que el avance es fiel.
Próximos pasos
Combina un estilo personalizado con uno personalizado bloques de plugin y personalizados, o explorar plugins de estilismo y el conjunto completo Catálogo de plugins GrapesJS en GJS. Mercado.
Preguntas frecuentes
¿Cómo cambio los colores del editor de GrapesJS?
Anular las propiedades personalizadas CSS (--gjs-primary-color,
--gjs-secondary-color, --gjs-tertiary-color,
--gjs-quaternary-color) en una hoja de estilos cargada después del CSS GrapesJS.
¿El lienzo está diseñado por separado de la interfaz?
Sí — el lienzo es un iframe con su propio documento. Uso
canvas.styles para añadir hojas de estilo.
¿Puedo reestilizar completamente los paneles?
Sí — apunta a las gjs- clases prefijadas para control fino, aunque el
Las variables cubren la mayoría de la marca.