GrapesJS थीम और स्टाइलिंग अनुकूलन गाइड (2026)

दो चीजें जो आप थीम कर सकते हैं

GrapesJS में दो अलग-अलग सतहें हैं: संपादक यूआई (पैनल, बटन, प्रबंधक) और कैनवास (पृष्ठ संपादित, जो एक iframe में रहता है)। उन्हें स्वतंत्र रूप से स्टाइल किया गया है। यह मार्गदर्शिका UI को CSS वेरिएबल्स के साथ रीब्रांड करता है और कैनवास को अलग से थीम करता है।

1. UI रंग चर को ओवरराइड करें

GrapesJS सीएसएस कस्टम गुणों को उजागर करता है। इसके बाद अपनी स्टाइलशीट लोड करें सीएसएस GrapesJS करें और उन्हें ओवरराइड करें:

: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 */
}

ये चार चर अधिकांश ब्रांडिंग आवश्यकताओं को कवर करते हैं - संपादक क्रोम उन्हें उठाता है ज्‍यों ही।

2. बेहतर नियंत्रण के लिए लक्ष्य संपादक कक्षाएं

/* GrapesJS UI classes are prefixed with gjs- */
.gjs-pn-btn.gjs-pn-active { color: var(--gjs-tertiary-color); }
.gjs-block { border-radius: 8px; }

3. कैनवास को स्वतंत्र रूप से थीम दें

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'],
  },
});

क्योंकि कैनवास एक iframe है, इसकी शैलियाँ कभी भी संपादक UI में लीक नहीं होती हैं और इसके विपरीत - इसलिए पृष्ठ पूर्वावलोकन उत्पादन से मेल खाता है जबकि यूआई आपके ब्रांड को रखता है।

टिप्स

ऑर्डर और स्कोप को सही तरीके से प्राप्त करें। आपकी ओवरराइड स्टाइलशीट को बाद में grapes.min.css लोड करना होगा या डिफ़ॉल्ट जीत जाएगा। सीएसएस कस्टम गुण (--gjs-primary-color और मित्र) केवल संपादक यूआई को फिर से स्टाइल करते हैं - कैनवास एक अलग आईफ्रेम है जिसके माध्यम से canvas.stylesथीम पर आधारित है, इसलिए होस्ट परिवर्तनों से यह तक पहुंचने की उम्मीद न करें। डार्क यूआई का समर्थन करने के लिए, दर्जनों वर्गों को ओवरराइड करने के बजाय अपने डार्क स्कोप (उदाहरण के लिए .dark :root) के तहत चर को फिर से परिभाषित करें। और कक्षाओं को सीधे लक्षित करने gjs- से पहले चार रंग चर पर निर्भर करें - वे बहुत कम कोड के साथ अधिकांश ब्रांडिंग को कवर करते हैं।

आवश्यक शर्तें

आपको एक रनिंग GrapesJS एडिटर और एक स्टाइलशीट की आवश्यकता है जो इसके बाद लोड होती है GrapesJS सीएसएस। दो सतहों को याद रखें: संपादक यूआई (पैनल, बटन) और कैनवास (पृष्ठ संपादित किया जा रहा है, एक iframe में) - वे स्वतंत्र रूप से स्टाइल कर रहे हैं।

रंग चर पूर्ण रूप से

GrapesJS UI के लिए CSS कस्टम प्रॉपर्टी को उजागर करता है. चार कोर रंगों को ओवरराइड करें, साथ ही फ़ॉन्ट रंग, आपकी अपनी स्टाइलशीट में:

:root {
  --gjs-primary-color:    #1f2937;
  --gjs-secondary-color:  #e5e7eb;
  --gjs-tertiary-color:   #6d28d9;
  --gjs-quaternary-color: #7c3aed;
  --gjs-font-color:       #111827;
}

एक डार्क यूआई का समर्थन करें

दर्जनों वर्गों को ओवरराइड करने के बजाय अपने अंधेरे दायरे के तहत चर को फिर से परिभाषित करें:

.dark :root, :root[data-theme="dark"] {
  --gjs-primary-color: #0b1220;
  --gjs-secondary-color: #94a3b8;
}

कैनवास को स्वतंत्र रूप से थीम करें

grapesjs.init({
  container: '#gjs',
  canvas: { styles: ['/assets/site.css', 'https://fonts.googleapis.com/css2?family=Inter'] },
});

क्योंकि कैनवास एक आईफ्रेम है, इसकी शैलियाँ कभी भी संपादक यूआई में लीक नहीं होती हैं - इसलिए पूर्वावलोकन उत्पादन से मेल खाता है जबकि क्रोम आपके ब्रांड को रखता है।

सर्वोत्तम प्रथाएं

कक्षाओं को सीधे लक्षित करने gjs- से पहले रंग चर पर झुकें - वे अधिकांश ब्रांडिंग को बहुत कम कोड के साथ कवर करें और अपडेट GrapesJS बेहतर तरीके से जीवित रहें। अपना लोड करें आधार सीएसएस के बाद ओवरराइड करता है ताकि वे जीत जाएं। कैनवास फोंट रखें और रीसेट करें canvas.styles इसलिए पूर्वावलोकन वफादार है।

अगले चरण

कस्टम स्टाइल को एक कस्टम के साथ पेयर करें प्लगइन और कस्टम ब्लॉक, या स्टाइलिंग प्लगइन्स और पूर्ण का अन्वेषण करें GrapesJS प्लगइन्स कैटलॉग चालू GJS.Market।

अक्सर पूछे जाने वाले प्रश्न

मैं GrapesJS संपादक के रंग कैसे बदलूँ?

CSS कस्टम प्रॉपर्टी (,--gjs-primary-color --gjs-secondary-color, , --gjs-tertiary-color --gjs-quaternary-color) GrapesJS सीएसएस के बाद लोड की गई स्टाइलशीट में।

क्या कैनवास को यूआई से अलग स्टाइल किया गया है?

हाँ - कैनवास अपने स्वयं के दस्तावेज़ के साथ एक iframe है। उपयोग canvas.styles इसमें स्टाइलशीट जोड़ने के लिए।

क्या मैं पैनलों को पूरी तरह से फिर से स्टाइल कर सकता हूं?

हाँ - ठीक नियंत्रण के लिए उपसर्ग वर्गों को gjs- लक्षित करें, हालांकि चर अधिकांश ब्रांडिंग को कवर करते हैं।