The Theme Manager is where you control the visual identity of your brand guide — colors, typography, logos, and even the appearance of your admin dashboard. Every change you make here updates the styling across all pages of your guide, keeping everything consistent and on‑brand.

If you’re building a polished, professional brand guide, this is one of the most important tools in MyStyleGuide.io.

🌟 What You Can Customize

Inside the Theme Manager, you can adjust:

• Navigation colors (menu background, text, buttons, hover states)
• Page colors (light/dark backgrounds, highlight color, typography color)
• Typography (font families, weights, and custom font imports)
• Brand images (favicon and navigation logo)
• Admin theme (light, dark, or brand‑colored dashboard)
• Uploaded media (images and videos for use in your theme)

All settings are grouped into collapsible sections so you can work cleanly and focus on one area at a time.

🧭 Page Overview

When you open the Theme Manager, you’ll see:

Theme Options Panel

A set of accordion sections that organize all theme settings:

1. Theme Colors
2. Theme Typography
3. Theme Images
4. Admin Theme Options

Each section can be expanded or collapsed to keep your workspace tidy.

Save & Upload Buttons

Pinned to the bottom-right corner for quick access:

• Save Theme Settings
• Media Upload

These stay visible as you scroll so you never lose your place.

🎨 Theme Colors

This section controls the color palette for your entire brand guide.

Each color field includes:

• A color picker
• A hex value input
• Real‑time syncing between the two

You can customize:

Navigation Colors

• Background
• Font color
• Button background
• Button font color
• Button hover background
• Button hover font

Page Colors

• Dark background
• Light background
• Highlight color
• Typography color

Typography Colors

• Headline color
• Paragraph color

These settings define the overall mood and readability of your guide.

✍️ Theme Typography

This section lets you control the fonts used throughout your brand guide.

Custom Font Import

Paste any @import CSS from Google Fonts or another provider.
Example:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap")

Font Families

Set the font family for:

• Headlines
• Paragraphs
• Special text

Font Weights

Choose the weight (e.g., 300, 400, 700) for each text type.

This gives you full control over your brand’s typographic voice.

🖼 Theme Images

This section lets you assign brand‑specific images:

Favicon

A small icon that appears in browser tabs.
Recommended: 512×512 PNG for best clarity.

Navigation Logo

A logo displayed in your brand guide’s navigation bar.

Both dropdowns automatically list all files you’ve uploaded to your brand’s /uploads/ folder.

📁 Uploading Media

Click Media Upload to open the upload modal.

You can upload:

• JPG / JPEG
• PNG
• WEBP
• MP4
• Other standard image formats

Once uploaded, files appear in your Theme Images dropdowns.

⚙️ Admin Theme Options

This section controls how your admin dashboard looks — not the public brand guide.

Choose from:

• Light
• Dark
• Brand Colors (uses your theme palette)

This is purely for your own comfort while working.

💾 Saving Your Theme

When you’re done customizing:

1. Click Save Theme Settings
2. Your theme updates instantly
3. The page reloads to prevent accidental resubmission

Your brand guide will now reflect your new styling everywhere.

🔐 Access & Permissions

Only owners and editors can access the Theme Manager.

If a user is not listed in the brand’s permissions, they cannot open this page.

🎯 Summary

The Theme Manager gives you complete control over your brand’s visual identity:

• Set your color palette
• Choose your fonts
• Upload and assign brand images
• Customize your admin dashboard
• Keep your entire guide visually consistent

It’s intuitive, powerful, and designed to help you create a polished, professional brand experience.