Theme Settings

What Can Be Customized:

Theme Inheritance:

• Base theme provides defaults
• Your customizations override base
• Dark mode extends light theme
• Per-product overrides possible

Access:

Admin → Settings → Themes

Primary Colors:

Main brand colors used throughout.

Background Colors:

• Background: Main page background
• Card: Card and panel backgrounds
• Muted: Subtle backgrounds
• Border: Border colors

Setting Colors:

1. Go to Themes → Colors
2. Click color swatch to open picker
3. Enter hex code or use picker
4. Preview changes live
5. Save theme

Color Formats:

• Hex: #3B82F6
• RGB: rgb(59, 130, 246)
• HSL: hsl(217, 91%, 60%)

Light Theme:

Default theme for most users.

Configuring Light Theme:

• Set light background colors
• Choose readable text colors
• Ensure sufficient contrast
• Test on various screens

Dark Theme:

For users preferring dark mode.

Configuring Dark Theme:

1. Go to Themes → Dark Mode
2. Enable dark mode toggle
3. Set dark-specific colors
4. Preview in dark mode

Color Recommendations:

User Preference:

• System preference detection
• Manual toggle available
• Preference persisted
• Per-session option

Font Configuration:

Heading Font:

• Used for titles, section headers
• Typically bolder weight
• Good options: Inter, Poppins, Montserrat

Body Font:

• Used for paragraphs, UI text
• Optimized for readability
• Good options: Inter, Open Sans, Roboto

Setting Fonts:

1. Go to Themes → Typography
2. Select heading font family
3. Select body font family
4. Adjust base sizes if needed
5. Save changes

Available Fonts:

• Google Fonts library
• System fonts (faster loading)
• Custom font upload (Pro)

RTL Considerations:

• Arabic-optimized fonts available
• Automatic RTL text direction
• Font fallbacks configured

Logo Types:

Uploading Logos:

1. Go to Themes → Branding
2. Click upload for logo type
3. Select image file
4. Adjust sizing if needed
5. Save

Logo Requirements:

Best Practices:

✓ Use transparent PNG or SVG

✓ Provide dark mode variants

✓ Keep file sizes small

✓ Test on various backgrounds

Buttons:

• Border radius (rounded corners)
• Padding and size
• Shadow effects
• Hover animations

Cards:

• Background color/blur
• Border style
• Shadow depth
• Corner radius

Forms:

• Input border style
• Focus ring color
• Error state styling
• Placeholder text

Configuring Components:

1. Go to Themes → Components
2. Select component type
3. Adjust properties
4. Preview changes
5. Apply to theme

Border Radius Options:

Built-in Presets:

Using a Preset:

1. Go to Themes → Presets
2. Browse available presets
3. Click to preview
4. Click Apply to use
5. Customize from there

Saving Custom Preset:

1. Configure your theme
2. Click Save as Preset
3. Name your preset
4. Optionally share with team

Resetting Theme:

• Reset Section: Reset one area
• Reset All: Return to default
• Load Preset: Start from preset

Advanced Styling:

For deeper customization, use custom CSS.

Adding Custom CSS:

1. Go to Themes → Advanced → Custom CSS
2. Enter your CSS code
3. Preview changes
4. Save when satisfied

CSS Examples:

Custom button style:

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

Custom card shadow:

.glass-card {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

Limitations:

• Cannot modify core functionality
• Be careful with selectors
• Test across browsers
• Updates may require adjustment

Preview Mode:

Test themes before publishing.

Using Preview:

1. Make theme changes
2. Click Preview
3. Browse portal in preview mode
4. Test different pages
5. Check dark mode
6. Test on mobile

Publishing Theme:

When satisfied with changes:

1. Review all customizations
2. Click Publish Theme
3. Confirm publication
4. Theme goes live immediately

Version History:

• Previous themes saved
• Rollback available
• Compare versions
• Restore any version

Testing Checklist:

☐ Colors readable in both modes

☐ Logo displays correctly

☐ Forms are usable

☐ Mobile responsive

☐ RTL if applicable

☐ Email templates updated