Skip to main content

​
Branding and Theme Customization

Customize the Gridix admin panel to match your brand identity. Configure colors, logos, and visual elements to create a consistent brand experience.
Branding customization is available for developers only. Managers cannot modify branding settings.

​
Accessing Branding Settings

Navigate to Settings → Branding in the admin dashboard. The branding section allows you to customize:
  • Color scheme
  • Logo settings
  • Theme preferences
  • Visual elements

​
Color Customization

​
Primary Colors

The primary color is the main brand color used throughout the admin panel:
  • Navigation highlights
  • Active states
  • Buttons and CTAs
  • Section headers
1

Select Primary Color

Use the color picker to choose your brand’s primary color. You can:
  • Enter a hex color code (e.g., #000000)
  • Use the color picker interface
  • Select from preset colors
2

Preview Changes

Changes are previewed in real-time. Check how the color looks in:
  • Sidebar navigation
  • Active states
  • Buttons
  • Highlights
3

Save Theme

Click “Save” to apply your color scheme. Changes take effect immediately.

​
Color Scheme Options

Gridix uses a black-based theme by default, but you can customize:
  • Primary Color: Main brand color (#000000 default)
  • Primary Hover: Color on hover states (#1a1a1a default)
  • Primary Active: Color for active states (#333333 default)
  • Text on Primary: Text color on primary backgrounds (#ffffff default)
The color scheme automatically adjusts for accessibility, ensuring sufficient contrast for readability.

​
Logo Configuration

​
Uploading Logos

Gridix supports separate logos for light and dark themes:
1

Prepare Logo Files

Prepare your logo in two versions:
  • Light theme logo: Dark logo for light backgrounds (PNG, SVG)
  • Dark theme logo: Light logo for dark backgrounds (PNG, SVG)
Recommended format: SVG for scalability Recommended size: 200x50px or similar aspect ratio
2

Upload Light Theme Logo

Click “Upload Logo” for light theme and select your dark logo file.
3

Upload Dark Theme Logo

Click “Upload Logo” for dark theme and select your light logo file.
4

Preview

Preview how logos appear in both themes using the theme toggle.
5

Save Logos

Click “Save” to apply your logos. They will appear in the top bar immediately.

​
Logo Requirements

  • Format: PNG, SVG, or JPG
  • Size: Recommended 200x50px (or similar aspect ratio)
  • File Size: Maximum 500KB per logo
  • Transparency: Supported (PNG, SVG)
Use SVG format for best quality at all sizes. SVG logos scale perfectly without pixelation.

​
Theme Selection

​
Dark Mode vs Light Mode

Gridix admin panel supports both themes:
  • Light Mode: Light background with dark text
  • Dark Mode: Dark background with light text
Users can toggle between themes using the theme switcher in the top bar.

​
Customizing Theme Colors

For each theme, you can customize: Light Mode:
  • Background colors
  • Text colors
  • Border colors
  • Card backgrounds
Dark Mode:
  • Background colors
  • Text colors
  • Border colors
  • Card backgrounds

​
Visual Elements

​
Favicon

Set a custom favicon for the admin panel:
1

Prepare Favicon

Create a favicon file:
  • Format: ICO, PNG
  • Size: 16x16 or 32x32 pixels
  • Multiple sizes supported
2

Upload Favicon

Upload the favicon file in Settings → Branding → Favicon.

​
Custom CSS (Advanced)

Custom CSS is an advanced feature. Incorrect CSS can break the interface. Use with caution.
For advanced customization, you can add custom CSS:
  • Navigate to Settings → Branding → Advanced
  • Add custom CSS rules
  • Preview changes before saving

​
Best Practices

Consistency: Use your brand colors consistently across all customizations to maintain brand identity.
Accessibility: Ensure sufficient color contrast for readability. Test your color scheme in both light and dark modes.
Logo Quality: Use high-quality logo files. SVG format is recommended for crisp display at all sizes.
Testing: Preview changes before saving. Test in both light and dark modes to ensure logos look good in both.

​
Branding Impact

Your branding customization affects:
  • Admin Dashboard: Colors and logos appear in the admin interface
  • Project Widgets: Brand colors can be applied to embedded widgets
  • Email Communications: Logo appears in system emails
  • Invoices: Company branding on generated invoices

​
Troubleshooting

  • Check file format (PNG, SVG, JPG supported)
  • Verify file size (max 500KB)
  • Ensure file uploaded successfully
  • Clear browser cache
  • Try a different file format
  • Ensure you clicked “Save”
  • Check for validation errors
  • Verify color code format (hex codes)
  • Refresh the page
  • Use SVG format for best quality
  • Ensure logo is high resolution
  • Check logo dimensions (recommended 200x50px)
  • Re-upload with higher quality file

​
Next Steps