Customize theme colors, dark mode, and custom code
Theme Settings
Customize your platform's appearance, theme colors, dark mode settings, and add custom code to head and footer sections.
Location: Dashboard → Settings → Theme
Theme Selection
Choose a color theme for your platform.
- Go to Dashboard → Settings → Theme
- Find "Theme Name" dropdown
- Select a theme:
- Deep (default)
- Slate
- Stone
- Zinc
- Neutral
- Gray
- Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, Rose
- Click "Save"
The selected theme applies to both frontend and admin panel.
Dark Mode Settings
Configure dark mode behavior.
- Go to Dashboard → Settings → Theme
- Find "Dark Switch Enabled" toggle
- Enable or disable dark mode toggle for users
- Set "Default Theme":
- Light - Default to light mode
- Dark - Default to dark mode
- Click "Save"
When enabled, users can toggle between light and dark modes.
Custom Code
Add custom HTML, CSS, or JavaScript code to your site.
Frontend Custom Code
Add code to the frontend (public pages).
Head Code:
- Add custom CSS, meta tags, or scripts
- Code is added before
</head> tag
- Useful for analytics, custom fonts, or styles
Footer Code:
- Add custom JavaScript or tracking codes
- Code is added before
</body> tag
- Useful for analytics, chat widgets, or scripts
- Go to Dashboard → Settings → Theme
- Find "Frontend Custom Head Code" or "Frontend Custom Footer Code"
- Paste your code
- Click "Save"
Admin Custom Code
Add code to the admin panel.
Head Code:
- Add custom CSS or scripts for admin panel
- Code is added before
</head> tag
Footer Code:
- Add custom JavaScript for admin panel
- Code is added before
</body> tag
- Go to Dashboard → Settings → Theme
- Find "Admin Custom Head Code" or "Admin Custom Footer Code"
- Paste your code
- Click "Save"
Default Image
Set a default image for your theme.
- Go to Dashboard → Settings → Theme
- Find "Default Image" upload field
- Upload an image
- Click "Save"
Best Practices
Theme Selection:
- Choose a theme that matches your brand
- Test theme on both light and dark modes
- Consider accessibility (contrast, readability)
- Preview changes before saving
Custom Code:
- Only add code you understand
- Test custom code thoroughly
- Keep code organized and commented
- Remove unused code regularly
Dark Mode:
- Enable dark mode for better user experience
- Test both light and dark themes
- Ensure all pages look good in both modes
- Set default based on your brand preference