Zwei Dinge, die du thematisieren kannst
In GrapesJS gibt es zwei separate Oberflächen: die Editor-Benutzeroberfläche (Panels, Knöpfe, Manager) und die Leinwand (die Seite ist bearbeitet, das in einem iframe lebt). Sie sind unabhängig voneinander gestaltet. Dieser Leitfaden Die Benutzeroberfläche wird mit CSS-Variablen neu gebrandet und die Canvas separat thematisiert.
1. Überschreiben Sie die UI-Farbvariablen
GrapesJS stellt benutzerdefinierte CSS-Eigenschaften zur Verfügung. Lade dein Stylesheet nach dem GrapesJS CSS und überschreiben Sie sie:
: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 */
}Diese vier Variablen decken die meisten Branding-Anforderungen ab – der Editor Chrome erfasst sie sofort.
2. Ziel-Editor-Klassen für feinere Steuerung
/* GrapesJS UI classes are prefixed with gjs- */
.gjs-pn-btn.gjs-pn-active { color: var(--gjs-tertiary-color); }
.gjs-block { border-radius: 8px; }3. Thematizieren Sie die Leinwand unabhängig
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'],
},
});Da die Leinwand ein iframe ist, dringen ihre Stile nie in die Benutzeroberfläche des Editors ein und umgekehrt – sodass die Seitenvorschau zur Produktion passt, während die Benutzeroberfläche deine Marke beibehält.
Tipps
Stellen Sie die richtige Reihenfolge und den Umfang ein. Dein Override-Stylesheet muss danach grapes.min.css geladen werden, sonst gewinnen die Standardeinstellungen. Die benutzerdefinierten CSS-Eigenschaften (--gjs-primary-color und Freunde) gestalten nur die Benutzeroberfläche des Editors neu – die Leinwand ist ein separates iframe-Thema canvas.styles, also erwarte nicht, dass Host-Änderungen sie erreichen. Um eine Dark UI zu unterstützen, definiere die Variablen unter deinem Dark Scope (z. B. .dark :root) neu, anstatt Dutzende von Klassen zu überschreiben. Und stütze dich auf die vier Farbvariablen, bevor du Klassen direkt anvisierst gjs- – sie decken die meisten Marken mit deutlich weniger Code ab.
Voraussetzungen
Du brauchst einen laufenden GrapesJS-Editor und ein Stylesheet, das nach dem GrapesJS CSS. Merke dir die beiden Oberflächen: die Editor-UI (Panels, Buttons) und die Leinwand (die Seite, die bearbeitet wird, in einem iframe) – sie sind unabhängig voneinander gestaltet.
Die Farbvariablen in voller Länge
GrapesJS stellt benutzerdefinierte CSS-Eigenschaften für die Benutzeroberfläche zur Verfügung. Überschreiben Sie die vier Kernfarben zusätzlich Die Schriftfarbe, in deinem eigenen Stylesheet:
:root {
--gjs-primary-color: #1f2937;
--gjs-secondary-color: #e5e7eb;
--gjs-tertiary-color: #6d28d9;
--gjs-quaternary-color: #7c3aed;
--gjs-font-color: #111827;
}Unterstützung einer dunklen Benutzeroberfläche
Definiere die Variablen unter deinem Dark Scope neu, anstatt Dutzende von Klassen zu überschreiben:
.dark :root, :root[data-theme="dark"] {
--gjs-primary-color: #0b1220;
--gjs-secondary-color: #94a3b8;
}Thematizieren Sie die Leinwand unabhängig
grapesjs.init({
container: '#gjs',
canvas: { styles: ['/assets/site.css', 'https://fonts.googleapis.com/css2?family=Inter'] },
});Da die Leinwand ein iframe ist, gelangen ihre Stile nie in die Benutzeroberfläche des Editors – die Vorschau entspricht also der Produktion, während Chrome Ihre Marke behält.
Best Practices
Stützen Sie sich auf die Farbvariablen, bevor Sie Klassen direkt angreifen gjs- – sie
Decke die meisten Marken mit deutlich weniger Code ab und überstehe GrapesJS-Updates besser. Laden Sie Ihre
überschreibt nach dem Basis-CSS, sodass sie gewinnen. Canvas-Schriftarten und Zurücksetzungen behalten
canvas.styles Die Vorschau ist also originalgetreu.
Nächste Schritte
Kombinieren Sie individuelles Styling mit einem maßgeschneiderten Plugin- und benutzerdefinierte Blöcke, Oder erkunde Styling-Plugins und das komplette GrapesJS-Plugins-Katalog auf GJS.Market.
FAQ
Wie ändere ich die Farben des GrapesJS-Editors?
Überschreiben der benutzerdefinierten CSS-Eigenschaften (--gjs-primary-color,
--gjs-secondary-color, --gjs-tertiary-color,
--gjs-quaternary-color) in einem Stylesheet, das nach dem GrapesJS CSS geladen wurde.
Ist die Leinwand separat von der Benutzeroberfläche gestaltet?
Ja – die Leinwand ist ein iframe mit eigenem Dokument. Verwendung
canvas.styles um Stylesheets hinzuzufügen.
Kann ich die Panels komplett neu gestalten?
Ja – ziele auf die gjs- präfixierten Klassen für Feinkontrolle, obwohl die
Variablen decken die meisten Marken ab.