Bonzai 2 - Modern SharePoint Intranet

UtilityNEW in Bonzai 2

Get Theme Manager Working in 3 Steps

10-20 minutes

Add Theme Manager to your homepage

Edit your homepage, add the Bonzai Theme Manager web part to any section.

Select colors using the pickers

Use the in-page Theme Manager UI to set primary, background, text, accent, plus Mega Menu and Footer branding colors.

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

Mega Menu and Footer Branding

Set Mega Menu background/text colors, hover colors, and logo URL in the Mega Menu Branding section.
Set Footer background/text colors and logo URL in the Footer Branding section.
Fine-tune layout controls (new):
- Mega Menu: navigation bar spacing, dropdown panel spacing, and breadcrumb controls
- Footer: feedback section visibility, textarea height, and optional redirect button
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 and Footer controls live in Theme Manager under their respective sections (Mega Menu Branding and Footer 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 whetherMegaMenuNavigation 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

Set up navigation on your root site

Create the MegaMenuNavigation and FooterNavigation lists on your main/root site. Populate them with your navigation items.

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.

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.

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

Navigate to your homepage

Theme Manager works best when placed on the homepage so theme settings apply site-wide.

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.

Choose a Quick Theme preset (optional)

Select from preset themes: Bonzai Default, Corporate Blue, Warm Earth, Cool Mint, Dark Mode, or High Contrast.

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.

Configure Style Options

Toggle Dark Mode on/off and choose a Corner Style (Sharp, Rounded, or Pill).

Preview changes live

The Live Preview section shows how your theme will look. All changes apply instantly.

Save your theme

Click "Save Theme" to persist your settings site-wide (requires Site Owner permissions). Local storage is used as a fallback.

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

Primary, secondary, background, text

Dark Mode Toggle

Built-in dark mode support

Preset Themes

Quick-apply theme presets

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 for future visits. If persistToSite is enabled, it also saves site-wide so other users get the same theme. On some sites, the first site-wide save may require additional permissions (because the configuration storage is provisioned automatically).

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.

Troubleshooting

Still need help? Contact Bonzai Support

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

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

Style Options

Option	Values	Description
Dark Mode	On/Off	Toggle between light and dark themes
Corner Style	Sharp, Rounded, Pill	Border radius for cards and buttons

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