> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gridix.live/llms.txt
> Use this file to discover all available pages before exploring further.

# Branding and Theme Customization

> Customize your Gridix admin panel appearance with your brand colors and logo

Customize the Gridix admin panel to match your brand identity. Configure colors, logos, and visual elements to create a consistent brand experience.

<Note>
  Branding customization is available for developers only. Managers cannot modify branding settings.
</Note>

## 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

<Steps>
  <Step title="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
  </Step>

  <Step title="Preview Changes">
    Changes are previewed in real-time. Check how the color looks in:

    * Sidebar navigation
    * Active states
    * Buttons
    * Highlights
  </Step>

  <Step title="Save Theme">
    Click "Save" to apply your color scheme. Changes take effect immediately.
  </Step>
</Steps>

### 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)

<Info>
  The color scheme automatically adjusts for accessibility, ensuring sufficient contrast for readability.
</Info>

## Logo Configuration

### Uploading Logos

Gridix supports separate logos for light and dark themes:

<Steps>
  <Step title="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
  </Step>

  <Step title="Upload Light Theme Logo">
    Click "Upload Logo" for light theme and select your dark logo file.
  </Step>

  <Step title="Upload Dark Theme Logo">
    Click "Upload Logo" for dark theme and select your light logo file.
  </Step>

  <Step title="Preview">
    Preview how logos appear in both themes using the theme toggle.
  </Step>

  <Step title="Save Logos">
    Click "Save" to apply your logos. They will appear in the top bar immediately.
  </Step>
</Steps>

### Logo Requirements

* **Format**: PNG, SVG, or JPG
* **Size**: Recommended 200x50px (or similar aspect ratio)
* **File Size**: Maximum 500KB per logo
* **Transparency**: Supported (PNG, SVG)

<Tip>
  Use SVG format for best quality at all sizes. SVG logos scale perfectly without pixelation.
</Tip>

## 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:

<Steps>
  <Step title="Prepare Favicon">
    Create a favicon file:

    * Format: ICO, PNG
    * Size: 16x16 or 32x32 pixels
    * Multiple sizes supported
  </Step>

  <Step title="Upload Favicon">
    Upload the favicon file in Settings → Branding → Favicon.
  </Step>
</Steps>

### Custom CSS (Advanced)

<Warning>
  Custom CSS is an advanced feature. Incorrect CSS can break the interface. Use with caution.
</Warning>

For advanced customization, you can add custom CSS:

* Navigate to Settings → Branding → Advanced
* Add custom CSS rules
* Preview changes before saving

## Best Practices

<Tip>
  **Consistency**: Use your brand colors consistently across all customizations to maintain brand identity.
</Tip>

<Tip>
  **Accessibility**: Ensure sufficient color contrast for readability. Test your color scheme in both light and dark modes.
</Tip>

<Tip>
  **Logo Quality**: Use high-quality logo files. SVG format is recommended for crisp display at all sizes.
</Tip>

<Tip>
  **Testing**: Preview changes before saving. Test in both light and dark modes to ensure logos look good in both.
</Tip>

## 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

<AccordionGroup>
  <Accordion title="Logo not displaying">
    * Check file format (PNG, SVG, JPG supported)
    * Verify file size (max 500KB)
    * Ensure file uploaded successfully
    * Clear browser cache
    * Try a different file format
  </Accordion>

  <Accordion title="Colors not applying">
    * Ensure you clicked "Save"
    * Check for validation errors
    * Verify color code format (hex codes)
    * Refresh the page
  </Accordion>

  <Accordion title="Logo looks pixelated">
    * Use SVG format for best quality
    * Ensure logo is high resolution
    * Check logo dimensions (recommended 200x50px)
    * Re-upload with higher quality file
  </Accordion>
</AccordionGroup>

## Next Steps

* **[Settings Overview](/en/admin-panel/settings)** - Learn about other settings
* **[Project Customization](/en/projects/editing)** - Customize project appearance
* **[Widget Configuration](/en/widgets/embedding)** - Apply branding to embedded widgets