Web Parts
Theme Manager
On-page theming with real-time preview and dark mode support.
UtilityNEW in Bonzai 2
Get Theme Manager Working in 3 Steps
10-20 minutes
1
Add Theme Manager to your homepage
Edit your homepage, add the Bonzai Theme Manager web part to any section.
2
Select colors using the pickers
Use the in-page Theme Manager UI to set primary, background, text, accent, plus Mega Menu, Footer, and Slider branding colors.
3
Publish — changes apply instantly
Save and publish. Theme changes apply immediately and can persist site-wide.
Key Benefit
Unlike Classic Bonzai which required logging into Brick and waiting 5-15 minutes for CDN propagation, Theme Manager applies changes instantly using CSS Custom Properties.
When to Use This Web Part
Use this when you need to...
- Customize your intranet brand colors
- Enable dark mode for users
- Apply preset themes quickly
- Test color schemes before committing
- Allow site owners to manage branding without admin access
Best page locations
- Homepage — centralized theme control
- Admin page — dedicated theming section
- Any page — theme applies site-wide
Consider alternatives when...
- • Per-page theming — theme applies globally
- • Complex CSS customization — use SharePoint themes
Branding Controls (Mega Menu, Footer, Slider)
- Set Mega Menu background/text colors, hover background/text colors, and logo URL in the Mega Menu Branding section.
- Set Footer background/text colors and logo URL in the Footer Branding section.
- Set Slider overlay colors (comment/like icon, overlay text, date label) in the Slider Branding section.
- Fine-tune layout controls:
- Mega Menu: navigation bar spacing (50–150%), dropdown panel spacing (50–150%), breadcrumb visibility / alignment (Left, Center, Right) / inset offset (0–40%), optional search bar with scope (Entire Tenant, Current Site Only, Specific Site), search placeholder text, quick results count (3–10), and page layout fix (master toggle plus independent Hide Left Sidebar and Center Page Content switches).
- Footer: logo size (50–200%), section title font size (10–24 px), Bold / Italic / Underline section titles, column separators on/off, section title color, items text color, feedback description color, feedback section visibility, feedback textarea height (2–10 lines), and an optional redirect button (label + URL) to replace the textarea with a link to an external form.
- Slider: comment & like icon color, overlay text color, and date label color (all default to white). These apply to the overlay of the News / Highlights slider.
- Branding changes apply instantly via CSS custom properties.
- When you click “Save Theme”, these settings persist with the saved theme.
Where to configure these controls
All Mega Menu, Footer, and Slider controls live in Theme Manager under their respective sections (Mega Menu Branding, Footer Branding, and Slider Branding). They apply in real time via CSS custom properties, and are included when you save the theme.
Navigation Source (Multi-Site Deployments)
Shared Navigation Across Sites
When your tenant has multiple sites or subsites, you can maintain a single set of Mega Menu and Footer navigation lists on one site and share them across all others. No need to duplicate lists on every subsite.
The Navigation Source Site URL field in Theme Manager tells the Mega Menu and Footer extensions where to fetch their navigation data from. When left empty (the default), they read from the current site. When set to another site's URL, they fetch from that site instead.
New: Navigation Source validation
Theme Manager validates the Navigation Source URL when you leave the field: it must be an https:// URL, and it will check whether
MegaMenuNavigation and/or FooterNavigation exist on that site. If it can't reach the site or you don't have permission, it will show an error state.Multi-Site Setup
Share Navigation Across Sites
1
Set up navigation on your root site
Create the MegaMenuNavigation and FooterNavigation lists on your main/root site. Populate them with your navigation items.
2
Configure Theme Manager on the root site
Place Theme Manager on the root site, customize colors and branding, and leave Navigation Source Site URL empty (this means "use this site").
Enable "Persist to Site" so the settings are saved site-wide on the root site.
3
Configure Theme Manager on each subsite
Place Theme Manager on each subsite. Enter the root site URL in the "Navigation Source Site URL" field (e.g., https://tenant.sharepoint.com/sites/intranet).
After you tab out of the field, Theme Manager checks that MegaMenuNavigation/FooterNavigation exist on the source site and shows a status result.
4
Save on each subsite
Click "Save Theme" so the Navigation Source setting is persisted (and applied for all users who load a page containing Theme Manager).
Feedback stays local
The footer feedback form always submits to the current site's FooterFeedback list, even when navigation is sourced from another site. This ensures feedback is collected per-site.
Navigation Source doesn’t automatically unify your theme
Navigation Source controls where Mega Menu and Footer fetch their navigation lists. You can keep theme colors/branding different per site, or intentionally standardize them — that's controlled by what you save in Theme Manager.
Step-by-Step Configuration
1
Navigate to your homepage
Theme Manager works best when placed on the homepage so theme settings apply site-wide.
2
Add the Theme Manager web part
Edit the page, click +, and add "Bonzai Theme Manager". Place it at the bottom of the page.
Enable "Show in Edit Mode Only" in the property pane to hide it from regular users.
3
Choose a Quick Theme preset (optional)
Select from preset themes: Bonzai Default, Corporate Blue, Warm Earth, Cool Mint, Dark Mode, or High Contrast.
4
Customize Core Colors
Use the color pickers directly in the web part to set Primary (links, buttons), Background (pages), Text (headings), and Accent (highlights) colors.
5
Configure Mega Menu Branding
Set Mega Menu background, text, hover background, and hover text colors. Optionally add a logo PNG URL, adjust nav/dropdown spacing, configure breadcrumb visibility/alignment/inset, enable the typeahead search bar with a scope, and turn on the Page Layout Fix if your site has CMSPUBLISHING sub-site layout issues.
Logo URLs must be absolute http(s) URLs ending with .png (recommended 160×48 desktop / 48×32 mobile, transparent, < 200 KB).
6
Configure Footer Branding
Set Footer background/text colors, optional logo URL and size, section title styling (color, font size 10–24 px, bold/italic/underline), items color, feedback description color, column separators, feedback section visibility, textarea height, and an optional redirect button for feedback.
7
Configure Slider Branding (optional)
Set the overlay colors for the News / Highlights slider: comment & like icon color, overlay text color, and date label color.
8
Configure Style Options
Toggle Dark Mode on/off and choose a Corner Style (Sharp, Rounded, or Pill).
9
Preview changes live
The Live Preview section shows how your theme will look. All changes apply instantly.
10
Save your theme
Click "Save Theme" to persist your settings. It always writes to localStorage for this browser. If "Save theme for all users on this site" is enabled, it also writes to a hidden BonzaiTheme list on the site (auto-created on first save; the first site-wide save may require Site Owner permissions).
11
Publish the page
Save and publish. The theme applies to all Bonzai web parts across the site.
Features
Real-time Preview
See color changes instantly
Color Pickers
Core, Mega Menu, Footer, Slider colors
Dark Mode Toggle
Built-in dark mode support
Preset Themes
Quick-apply theme presets
Mega Menu Search
Typeahead with tenant/site scope
Slider Overlay Colors
Brand the news slider overlay
Shared Navigation
One nav list for all sites
Best Practices
Place on homepage only
You only need Theme Manager on one page (typically the homepage). Theme settings apply to all Bonzai web parts across the site.
Hide from regular users
Enable "Show in Edit Mode Only" to hide the Theme Manager from regular users. Only editors will see it when editing.
How saving works
Theme Manager always applies changes instantly in the current session. When you click Save Theme, it stores your theme to
localStorage for future visits on the same browser. If persistToSite is enabled, it also writes to a hidden BonzaiTheme list (with a ThemeJson column) on the site so other users get the same theme. The list is auto-created on first save, which may require Site Owner permissions. When a Navigation Source Site URL is set, the theme is loaded from and saved to that source site instead of the current site.Test contrast for accessibility
Ensure your color choices meet WCAG accessibility guidelines. Text should have a contrast ratio of at least 4.5:1 with the background.
Theme affects all Bonzai web parts
Color changes apply to all Bonzai web parts site-wide. Test on multiple pages before publishing.
Reference
Property Pane Configuration
The property pane has minimal settings — color customization is done directly in the web part UI.
| Property | Type | Description |
|---|---|---|
showInEditMode | Toggle | Only show Theme Manager when page is in edit mode (default: On) |
persistToSite | Toggle | Save theme site-wide so it can be reused on that site (default: On) |
Navigation Source (configured in web part UI)
| Setting | Description |
|---|---|
| Navigation Source Site URL | Must be a valid https:// site URL. When you leave the field, Theme Manager checks for MegaMenuNavigation and FooterNavigation and shows a found/missing status (with item counts). |
Core Theme Colors (configured in web part UI)
| Color | Usage |
|---|---|
| Primary | Links, buttons, icons, accents |
| Background | Page and card backgrounds |
| Text | Headings and body text |
| Accent | Highlights, badges, notifications |
Mega Menu Branding
| Setting | Type / Range | Default | Description |
|---|---|---|---|
| Background | Color | Theme background | Mega menu background color |
| Text | Color | Theme text | Mega menu foreground text and icons |
| Hover Background | Color | Light tint of Primary | Hover background for top nav and dropdown links |
| Hover Text | Color | Theme text | Hover text color for top nav and dropdown links |
| Logo URL | Absolute http(s) URL ending in .png | — | Optional logo. Recommended 160×48 desktop / 48×32 mobile, transparent, < 200 KB |
| Navigation Bar Spacing | 50–150% (step 5) | 100% | Scales padding for the top navigation bar items |
| Dropdown Panel Spacing | 50–150% (step 5) | 100% | Scales padding inside the mega menu dropdown panels |
| Show Breadcrumb | Toggle | On | Display the site path below the navigation bar |
| Breadcrumb Alignment | Left, Center, Right | Left | Horizontal alignment of the breadcrumb |
| Breadcrumb Inset | 0–40% (step 1) | 0% | Pushes the breadcrumb inward from the edges (responsive) |
| Show Search Bar | Toggle | Off (per default preset) | Typeahead search bar in the mega menu navigation bar |
| Search Scope | Entire Tenant, Current Site Only, Specific Site | Entire Tenant | Where search results come from |
| Specific Site | Site picker (Microsoft Graph) | — | Shown only when Search Scope = Specific Site; loaded from Graph /sites |
| Search Placeholder | Text (max 50 chars) | “Search” | Custom placeholder shown in the search input |
| Quick Results Count | 3–10 | 5 | Number of results shown in the typeahead dropdown |
| Enable Page Layout Fix | Toggle | Off | Master toggle. Intended for CMSPUBLISHING sub-sites with layout issues |
| Hide Left Sidebar | Toggle | On (when layout fix enabled) | Hides the native SharePoint left navigation panel |
| Center Page Content | Toggle | On (when layout fix enabled) | Re-centers page content that full-width zones push left |
Footer Branding
| Setting | Type / Range | Default | Description |
|---|---|---|---|
| Background | Color | #4a4a4a | Footer background color |
| Text | Color | #f5f5f5 | Footer base text color |
| Section Title Color | Color | Footer text | Color for footer section headings |
| Items Text Color | Color | Footer text | Color for footer link items |
| Feedback Description Color | Color | Items text color | Color for feedback description text |
| Logo URL | Absolute http(s) URL ending in .png | — | Optional footer logo. Recommended 140×40, transparent, < 200 KB |
| Footer Logo Size | 50–200% (step 10) | 100% | Scales the footer logo |
| Section Title Font Size | 10–24 px | 12 px | Font size for footer section headings |
| Bold Section Titles | Toggle | On | Font weight 600 when on, 400 when off |
| Italic Section Titles | Toggle | Off | — |
| Underline Section Titles | Toggle | Off | — |
| Show Column Separators | Toggle | On | Vertical lines between footer columns |
| Show Feedback Section | Toggle | On | Show or hide the feedback section in the footer |
| Use Redirect Button | Toggle | Off | Replaces the textarea with a button that opens an external URL (e.g. a form) |
| Button Label / URL | Text | — | Shown when Use Redirect Button is on; URL opens in a new tab |
| Feedback Textarea Height | 2–10 lines | 3 lines | Shown when Use Redirect Button is off |
Feedback stays on the current site
The footer feedback form always submits to the current site's
FooterFeedback list, even when Navigation Source is pointing at another site. This is handled by the Footer extension, not Theme Manager.Slider Branding
| Color | Default | Description |
|---|---|---|
| Comment & Like Icon Color | #ffffff | Comment and like icons/counts on the slider overlay |
| Overlay Text Color | #ffffff | Titles, metadata, and excerpt text on the slider overlay |
| Date Label Color | #ffffff | Date label on the slider overlay |
Style Options
| Option | Values | Description |
|---|---|---|
| Dark Mode | On/Off | Toggle between light and dark themes. Automatically inverts background/text if they look like the opposite mode. |
| Corner Style | Sharp, Rounded, Pill | Border radius for cards and buttons (Sharp = 0 px, Rounded = 2/4/6 px, Pill = 8/16/24 px) |
Preset Themes
- Bonzai Default: Teal primary (#70a7af), white background
- Corporate Blue: Professional Microsoft blue (#0078d4)
- Warm Earth: Earthy brown tones (#b4663f)
- Cool Mint: Fresh teal accent (#00a69c)
- Dark Mode: Dark background with light teal accent
- High Contrast: Yellow on black for accessibility
Comparison with Classic Theming
| Aspect | Classic (Brick) | Modern (Theme Manager) |
|---|---|---|
| Access | Separate AWS login required | On-page, no login needed |
| Preview | Preview section in Brick | Real-time on actual page |
| Apply Changes | Publish to CDN, wait 5-15 min | Instant |
| Dark Mode | Not available | Built-in toggle |
| Technology | CDN-hosted CSS files | CSS Custom Properties |