School Config

EduSpot — Theme Library
EduSpot · Internal Tool

Theme Color Library

All color themes for your school pages. Pick a theme, copy the CSS snippet, paste it into the school's page using the "Simple Custom CSS and JS" plugin.

7Light Themes
3Dark Themes
6CSS Variables
∞Expandable
☀️
Light Mode Themes
7 themes — for all institute types
THEME 01
Royal Blue
☀️ Light
🏫 Primary Schools · Colleges
Primary
Accent
BG
Text
Heading
Border
royal-blue.css 
/* ══ THEME 01 — Royal Blue ══
   Institute: [School Name Here]
   Use: Primary Schools, Colleges
   Mode: Light ══════════════════ */

:root {
  --color-primary: #1a56db;
  --color-accent:  #f0f4ff;
  --color-bg:      #ffffff;
  --color-text:    #1e293b;
  --color-heading: #1e3a8a;
  --color-border:  #bfdbfe;
}
THEME 02
Forest Green
☀️ Light
🌿 Eco · Nursery · Play School
Primary
Accent
BG
Text
Heading
Border
forest-green.css 
/* ══ THEME 02 — Forest Green ══
   Institute: [School Name Here]
   Use: Eco, Nursery, Play School
   Mode: Light ══════════════════ */

:root {
  --color-primary: #057a55;
  --color-accent:  #f0fdf4;
  --color-bg:      #ffffff;
  --color-text:    #1a2e1a;
  --color-heading: #065f46;
  --color-border:  #a7f3d0;
}
THEME 03
Sunrise Orange
☀️ Light
📚 Coaching Centres
Primary
Accent
BG
Text
Heading
Border
sunrise-orange.css 
/* ══ THEME 03 — Sunrise Orange ══
   Institute: [School Name Here]
   Use: Coaching Centres
   Mode: Light ═══════════════════ */

:root {
  --color-primary: #d03801;
  --color-accent:  #fff7ed;
  --color-bg:      #ffffff;
  --color-text:    #1c1917;
  --color-heading: #9a3412;
  --color-border:  #fdba74;
}
THEME 04
Deep Purple
☀️ Light
🎓 PU Colleges · Skill Training
Primary
Accent
BG
Text
Heading
Border
deep-purple.css 
/* ══ THEME 04 — Deep Purple ══
   Institute: [School Name Here]
   Use: PU Colleges, Skill Training
   Mode: Light ══════════════════ */

:root {
  --color-primary: #6c2bd9;
  --color-accent:  #f5f3ff;
  --color-bg:      #ffffff;
  --color-text:    #1e1b2e;
  --color-heading: #4c1d95;
  --color-border:  #c4b5fd;
}
THEME 05
Crimson Red
☀️ Light
🏫 High Schools · Senior Schools
Primary
Accent
BG
Text
Heading
Border
crimson-red.css 
/* ══ THEME 05 — Crimson Red ══
   Institute: [School Name Here]
   Use: High Schools, Senior Schools
   Mode: Light ══════════════════ */

:root {
  --color-primary: #c81e1e;
  --color-accent:  #fff5f5;
  --color-bg:      #ffffff;
  --color-text:    #1c0a0a;
  --color-heading: #7f1d1d;
  --color-border:  #fca5a5;
}
THEME 06
Golden Amber
☀️ Light
🏛️ Cultural · Traditional Schools
Primary
Accent
BG
Text
Heading
Border
golden-amber.css 
/* ══ THEME 06 — Golden Amber ══
   Institute: [School Name Here]
   Use: Cultural, Traditional Schools
   Mode: Light ══════════════════ */

:root {
  --color-primary: #b45309;
  --color-accent:  #fffbeb;
  --color-bg:      #ffffff;
  --color-text:    #1c1408;
  --color-heading: #78350f;
  --color-border:  #fcd34d;
}
THEME 07
Sky Blue
☀️ Light
🏛️ Government Schools
Primary
Accent
BG
Text
Heading
Border
sky-blue.css 
/* ══ THEME 07 — Sky Blue ══
   Institute: [School Name Here]
   Use: Government Schools
   Mode: Light ══════════════════ */

:root {
  --color-primary: #0284c7;
  --color-accent:  #f0f9ff;
  --color-bg:      #ffffff;
  --color-text:    #0c1a24;
  --color-heading: #0c4a6e;
  --color-border:  #7dd3fc;
}
THEME 08
Rose Pink
☀️ Light
🌸 Girls' Schools
Primary
Accent
BG
Text
Heading
Border
rose-pink.css 
/* ══ THEME 08 — Rose Pink ══
   Institute: [School Name Here]
   Use: Girls' Schools
   Mode: Light ══════════════════ */

:root {
  --color-primary: #be185d;
  --color-accent:  #fdf2f8;
  --color-bg:      #ffffff;
  --color-text:    #1a0a10;
  --color-heading: #831843;
  --color-border:  #f9a8d4;
}
🌙
Dark Mode Themes
3 themes — for modern & premium institutes
DARK 01
Dark Ocean
🌙 Dark
💻 Modern · Tech Institutes
Primary
Accent
BG
Text
Heading
Border
dark-ocean.css 
/* ══ DARK 01 — Dark Ocean ══
   Institute: [School Name Here]
   Use: Modern, Tech Institutes
   Mode: Dark ═══════════════════ */

:root {
  --color-primary: #3b82f6;
  --color-accent:  #1e3a5f;
  --color-bg:      #0f172a;
  --color-text:    #e2e8f0;
  --color-heading: #93c5fd;
  --color-border:  #1e40af;
}
DARK 02
Dark Forest
🌙 Dark
🌿 Eco · Nature Schools
Primary
Accent
BG
Text
Heading
Border
dark-forest.css 
/* ══ DARK 02 — Dark Forest ══
   Institute: [School Name Here]
   Use: Eco, Nature Schools
   Mode: Dark ═══════════════════ */

:root {
  --color-primary: #10b981;
  --color-accent:  #064e3b;
  --color-bg:      #0f172a;
  --color-text:    #d1fae5;
  --color-heading: #6ee7b7;
  --color-border:  #065f46;
}
DARK 03
Dark Royal
🌙 Dark
👑 Premium · Elite Schools
Primary
Accent
BG
Text
Heading
Border
dark-royal.css 
/* ══ DARK 03 — Dark Royal ══
   Institute: [School Name Here]
   Use: Premium, Elite Schools
   Mode: Dark ═══════════════════ */

:root {
  --color-primary: #a78bfa;
  --color-accent:  #2e1065;
  --color-bg:      #0f172a;
  --color-text:    #ede9fe;
  --color-heading: #c4b5fd;
  --color-border:  #4c1d95;
}

⚙️ How to Apply a Theme

Follow these steps every time you create a new school page on EduSpot.

1

Install the Plugin (one time only)

Go to WordPress Admin → Plugins → Add New → Search Simple Custom CSS and JS → Install & Activate.

2

Pick the Right Theme

Look at this library, choose the theme that suits the school type (e.g. Girls' School → Rose Pink).

3

Click "View CSS Snippet" & Copy

Click the snippet button on the theme card above, then click Copy.

4

Open the Plugin in WordPress

Go to Simple CSS & JS → Add CSS. Change "Where" to This Page and select the school's page.

5

Paste & Replace the School Name

Paste the snippet. Replace [School Name Here] in the comment with the actual school name. Click Publish.

6

Make Your Page Use the Variables

In your school page HTML/CSS, replace all hardcoded colors with var(--color-primary), var(--color-accent) etc. Do this once on your master template.

🚀

Adding Future Themes is Easy

To add a new theme later: copy any snippet above, change the 6 color values, give it a name, and save it here. No plugin changes needed. No existing pages affected. Takes 2–5 minutes. This library is your single source of truth — keep it bookmarked!

Scroll to Top