B
Bonzai 2
Administration

Theming Guide

Customize the look and feel of your Bonzai 2 intranet.

Set Up Theming in 3 Steps

15-30 minutes
1

Add Theme Manager to your homepage

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

2

Configure brand colors

Use the interactive color pickers within the Theme Manager UI (in edit mode) to set primary, background, text, and accent colors.

3

Test and publish

Preview your changes, toggle dark mode if desired, then save and publish.

Overview

Bonzai 2 uses CSS Custom Properties (CSS Variables) for theming, enabling instant color changes without waiting for CDN propagation. The Theme Manager web part provides an intuitive interface for customization.

Difference from Classic Bonzai

Classic Bonzai used Brick for theming with CDN propagation delays. Bonzai 2 uses CSS Custom Properties, applying changes without CDN wait time.

Theme Manager vs Brick

AspectClassic (Brick)Modern (Theme Manager)
AccessSeparate AWS Cognito loginOn-page, SharePoint permissions
Changes5-15 min CDN propagationInstant
PreviewBrick preview sectionLive on actual page
Dark ModeNot supportedBuilt-in toggle
User AccessRequires Brick credentialsAny page editor

Complete Theming Setup

1

Navigate to your homepage

Go to your intranet homepage. Theme Manager works best here as settings apply site-wide.
2

Edit the page

Click "Edit" in the top right to enter page edit mode.
3

Add the Theme Manager web part

Click the + button, search for "Theme Manager", and add it to a section (bottom of page works well).

Enable "Show in Edit Mode Only" to hide it from regular users.

4

Set your primary color

Use the in-page Theme Manager UI to set your brand's primary color. This affects buttons, links, and accents.
5

Set secondary and accent colors

Choose complementary colors for secondary elements and highlights.
6

Configure background and text colors

Set the page background and text colors. Ensure there's sufficient contrast for accessibility.
7

Enable dark mode (recommended)

Toggle "Enable Dark Mode" to let users switch between light and dark themes.
8

Select a preset (optional)

Use preset themes as a starting point: Corporate Blue, Modern Purple, Warm Orange, Forest Green.
9

Test and publish

Preview changes on the page, then save and publish. Changes apply immediately site-wide.

CSS Custom Properties

All Bonzai 2 web parts use these CSS variables for consistent theming:

:root {
  /* Primary brand color */
  --bonzai-primary: #0f766e;
  
  /* Secondary accent color */
  --bonzai-secondary: #14b8a6;
  
  /* Accent/highlight color */
  --bonzai-accent: #2dd4bf;
  
  /* Background colors */
  --bonzai-bg: #ffffff;
  --bonzai-bg-secondary: #f9fafb;
  
  /* Text colors */
  --bonzai-text: #1f2937;
  --bonzai-text-secondary: #6b7280;
  
  /* Border colors */
  --bonzai-border: #e5e7eb;
}

/* Dark mode overrides */
.dark {
  --bonzai-primary: #2dd4bf;
  --bonzai-secondary: #14b8a6;
  --bonzai-bg: #0f172a;
  --bonzai-bg-secondary: #1e293b;
  --bonzai-text: #f9fafb;
  --bonzai-text-secondary: #9ca3af;
  --bonzai-border: #374151;
}

Dark Mode

Bonzai 2 includes built-in dark mode support. When enabled via Theme Manager:

  • Users see a dark mode toggle on the page
  • Preference is stored in browser local storage
  • System preference is respected by default
  • All Bonzai web parts automatically adapt

Respect user preferences

Dark mode respects system settings (prefers-color-scheme). Users on devices set to dark mode will see the dark theme by default.

Best Practices

Place Theme Manager on homepage only

You only need Theme Manager on one page. Settings apply to all Bonzai web parts across the entire site.

Start with preset themes

Use one of the built-in presets (Corporate Blue, Modern Purple, etc.) as a starting point, then fine-tune individual colors.

Test accessibility contrast

Ensure text colors have at least 4.5:1 contrast ratio with backgrounds for WCAG 2.1 AA compliance. Test both light and dark modes.

Hide from regular users

Enable "Show in Edit Mode Only" to hide the Theme Manager control from regular users. Only editors will see it during page editing.

Troubleshooting

Still need help? Contact Bonzai Support

Related Resources

Previous

People & Directory

Next

Fluent Icon Directory