How to use the Booking Theme Editor
Themes allow you to bring additional customization to your booking type pages and team booking pages. Perfect to match your brand colors, tone, and layout — especially for embedding on your website!
Accessing the Theme Editor
To use the Booking Theme Editor, first go to Booking Types in the top navigation menu.
Click the booking type you want to edit the theme for.
Because you're logged in, you'll see a theme editor on the left side of your Booking Type that looks like below.
This theme editor will only be available when you're logged in — your prospects/attendees will not see the editor (you can verify by loading the booking type incognito or in private mode).
Auto-Opening the Theme Editor with URL Parameter
You can automatically open the theme editor by adding ?theme-editor=1 to your booking page URL. This is particularly useful when:
- Sharing a direct link to edit the theme with team members
- Bookmarking a quick access link to theme customization
- Creating workflow shortcuts for theme editing
Example: https://tidycal.com/yourusername/booking-type?theme-editor=1
The theme editor will automatically expand when you load the page with this parameter.
Customizing Team Booking Page Themes
If you're using the Agency Plan with Teams, you can now customize the theme for your team booking pages. As a team owner, your theme preferences will automatically apply to:
- Your main team booking page
- Individual team member booking pages
- Team booking types
To customize your team's theme, simply access any team booking page while logged in as the team owner, and the theme editor will appear on the left side, just like with individual booking types.
Theme Customization Options
After accessing the theme editor, you'll see a powerful set of customization tools. Here's everything you can customize:
Colors & Appearance
Primary Color
Your primary color is the main accent color that appears throughout your booking page for buttons, links, and highlighted elements. The theme editor includes an intelligent color system that automatically:
- Calculates contrast ratios to ensure text readability (WCAG AA compliance)
- Adjusts button text to black or white depending on your primary color
- Generates safe color variants for borders and backgrounds
To change your primary color, click the color picker labeled "Primary color" and select your brand color.
Background Color
The background color sets the overall page backdrop. This works in conjunction with your background image (if you add one). The theme editor ensures your background color has sufficient contrast with all text elements on the page.
Dark Mode Toggle
Enable dark mode to invert your color scheme for better viewing in low-light conditions. When dark mode is enabled:
- Text automatically switches to light colors (90% white opacity)
- Backgrounds darken while maintaining your chosen color scheme
- Form controls adjust to dark-friendly styling
- Border colors update for visibility
Dark mode is perfect for:
- Professional booking pages targeting tech-savvy audiences
- Evening/night-time bookings (coaches, consultants, international time zones)
- Reducing eye strain for long booking forms
- Matching dark-themed websites when embedding
Background Images
Adding a Background Image
You can upload a custom background image to add visual interest to your booking page. Click the "Background image" section to upload an image.
Image Requirements:
- Maximum file size: 2 MB (2048 KB)
- Supported formats: JPG, PNG, GIF, SVG
- Recommended dimensions: 1920×1080px or higher for best quality
- Best practices: Use subtle, low-contrast images that don't compete with text
Background Image Opacity
After uploading an image, use the opacity slider to control how prominently the image appears:
- 0%: Image is completely transparent (invisible)
- 25%: Subtle watermark effect (recommended for busy images)
- 50%: Balanced visibility
- 75%: Prominent image with slight transparency
- 100%: Fully opaque image
The opacity control helps ensure your background image enhances rather than distracts from your booking content.
Removing Background Images
Click the "Clear" button next to the background image preview to remove the image and return to a solid color background.
Typography (Font Selection)
TidyCal offers 20+ professionally selected Google Fonts to match your brand identity:
Title Font - Used for headings, booking type names, and section headers
Body Font - Used for descriptive text, form labels, and general content
Available Fonts:
- Classic Serif: Lora, Merriweather, PT Serif, Playfair Display, Libre Baskerville, Crimson Pro, Domine, Gentium Book Basic, Cormorant Garamond
- Modern Sans-Serif: Roboto, Open Sans, Source Sans Pro, Montserrat, Raleway, Inter, Nunito Sans, Rubik, Lato
- Tech-Focused: IBM Plex Sans, IBM Plex Serif
Font Pairing Tips:
- Professional Services: PT Serif (title) + Roboto (body)
- Creative Agencies: Playfair Display (title) + Open Sans (body)
- Tech Companies: IBM Plex Sans (title + body for consistency)
- Wellness/Coaching: Lora (title) + Nunito Sans (body)
All fonts are loaded from Google Fonts with preloading for fast page performance.
Creating and Managing Multiple Themes
Creating a New Theme
At the top of the theme editor, select "+ Create new theme" from the dropdown menu. This starts a fresh theme with default settings that you can customize.
Theme Name
Give your theme a descriptive name that helps you identify its purpose:
- "Brand Primary" for your main company colors
- "Dark Mode - Tech" for dark-themed pages
- "Client Name - Custom" for client-specific embedding
- "High Contrast" for accessibility-focused designs
Saving Themes
After customizing your theme settings, click the "Create theme" button (for new themes) or "Update theme" button (for existing themes). Your theme is automatically saved and associated with the current booking type.
Loading Existing Themes
Use the dropdown menu at the top of the theme editor to select from your saved themes. When you select a theme, all settings (colors, fonts, background image, dark mode) instantly update to match the saved configuration.
Duplicating Themes
To create a variation of an existing theme:
- Load the theme you want to copy
- Make your modifications
- Change the theme name
- Click "Create theme" to save as a new theme
Deleting Themes
To remove a theme you no longer need:
- Load the theme in the theme editor
- Click the "Delete theme" button at the bottom
- Confirm the deletion
Note: Deleting a theme will unassign it from all booking types currently using it. Those booking types will revert to default styling until you assign a new theme.
Common Use Cases
Use Case 1: Matching Company Branding
If your company uses #3B82F6 (blue) with white backgrounds:
- Set Primary Color to #3B82F6
- Set Background Color to #FFFFFF (white)
- Choose your brand fonts (e.g., "Roboto" for both)
- Upload your logo as a subtle background image at 15-20% opacity
- Save as "Company Brand - Light"
Use Case 2: High-Contrast for Accessibility
For maximum readability:
- Set Primary Color to #000000 (black) or #1A1A1A (near-black)
- Set Background Color to #FFFFFF (white)
- Choose highly legible fonts like "Roboto" or "Open Sans"
- Avoid background images
- Test with screen readers and keyboard navigation
Use Case 3: Dark Mode for Tech Services
For a modern, developer-friendly appearance:
- Enable Dark Mode toggle
- Set Primary Color to #10B981 (bright green) or #3B82F6 (bright blue)
- Background will auto-adjust to dark tones
- Choose "IBM Plex Sans" for a technical feel
- Save as "Dark - Developer"
Theme Customization Options
After accessing the theme editor, you'll see a powerful set of customization tools. Here's everything you can customize:
Colors & Appearance
Primary Color
Your primary color is the main accent color that appears throughout your booking page for buttons, links, and highlighted elements. The theme editor includes an intelligent color system that automatically:
- Calculates contrast ratios to ensure text readability (WCAG AA compliance)
- Adjusts button text to black or white depending on your primary color
- Generates safe color variants for borders and backgrounds
To change your primary color, click the color picker labeled "Primary color" and select your brand color.
Background Color
The background color sets the overall page backdrop. This works in conjunction with your background image (if you add one). The theme editor ensures your background color has sufficient contrast with all text elements on the page.
Dark Mode Toggle
Enable dark mode to invert your color scheme for better viewing in low-light conditions. When dark mode is enabled:
- Text automatically switches to light colors (90% white opacity)
- Backgrounds darken while maintaining your chosen color scheme
- Form controls adjust to dark-friendly styling
- Border colors update for visibility
Dark mode is perfect for:
- Professional booking pages targeting tech-savvy audiences
- Evening/night-time bookings (coaches, consultants, international time zones)
- Reducing eye strain for long booking forms
- Matching dark-themed websites when embedding
Background Images
Adding a Background Image
You can upload a custom background image to add visual interest to your booking page. Click the "Background image" section to upload an image.
Image Requirements:
- Maximum file size: 2 MB (2048 KB)
- Supported formats: JPG, PNG, GIF, SVG
- Recommended dimensions: 1920×1080px or higher for best quality
- Best practices: Use subtle, low-contrast images that don't compete with text
Background Image Opacity
After uploading an image, use the opacity slider to control how prominently the image appears:
- 0%: Image is completely transparent (invisible)
- 25%: Subtle watermark effect (recommended for busy images)
- 50%: Balanced visibility
- 75%: Prominent image with slight transparency
- 100%: Fully opaque image
The opacity control helps ensure your background image enhances rather than distracts from your booking content.
Removing Background Images
Click the "Clear" button next to the background image preview to remove the image and return to a solid color background.
Typography (Font Selection)
TidyCal offers 20+ professionally selected Google Fonts to match your brand identity:
Title Font - Used for headings, booking type names, and section headers
Body Font - Used for descriptive text, form labels, and general content
Available Fonts:
- Classic Serif: Lora, Merriweather, PT Serif, Playfair Display, Libre Baskerville, Crimson Pro, Domine, Gentium Book Basic, Cormorant Garamond
- Modern Sans-Serif: Roboto, Open Sans, Source Sans Pro, Montserrat, Raleway, Inter, Nunito Sans, Rubik, Lato
- Tech-Focused: IBM Plex Sans, IBM Plex Serif
Font Pairing Tips:
- Professional Services: PT Serif (title) + Roboto (body)
- Creative Agencies: Playfair Display (title) + Open Sans (body)
- Tech Companies: IBM Plex Sans (title + body for consistency)
- Wellness/Coaching: Lora (title) + Nunito Sans (body)
All fonts are loaded from Google Fonts with preloading for fast page performance.
Creating and Managing Multiple Themes
Creating a New Theme
At the top of the theme editor, select "+ Create new theme" from the dropdown menu. This starts a fresh theme with default settings that you can customize.
Theme Name
Give your theme a descriptive name that helps you identify its purpose:
- "Brand Primary" for your main company colors
- "Dark Mode - Tech" for dark-themed pages
- "Client Name - Custom" for client-specific embedding
- "High Contrast" for accessibility-focused designs
Saving Themes
After customizing your theme settings, click the "Create theme" button (for new themes) or "Update theme" button (for existing themes). Your theme is automatically saved and associated with the current booking type.
Loading Existing Themes
Use the dropdown menu at the top of the theme editor to select from your saved themes. When you select a theme, all settings (colors, fonts, background image, dark mode) instantly update to match the saved configuration.
Duplicating Themes
To create a variation of an existing theme:
- Load the theme you want to copy
- Make your modifications
- Change the theme name
- Click "Create theme" to save as a new theme
Deleting Themes
To remove a theme you no longer need:
- Load the theme in the theme editor
- Click the "Delete theme" button at the bottom
- Confirm the deletion
Note: Deleting a theme will unassign it from all booking types currently using it. Those booking types will revert to default styling until you assign a new theme.
Common Use Cases
Use Case 1: Matching Company Branding
If your company uses #3B82F6 (blue) with white backgrounds:
- Set Primary Color to #3B82F6
- Set Background Color to #FFFFFF (white)
- Choose your brand fonts (e.g., "Roboto" for both)
- Upload your logo as a subtle background image at 15-20% opacity
- Save as "Company Brand - Light"
Use Case 2: High-Contrast for Accessibility
For maximum readability:
- Set Primary Color to #000000 (black) or #1A1A1A (near-black)
- Set Background Color to #FFFFFF (white)
- Choose highly legible fonts like "Roboto" or "Open Sans"
- Avoid background images
- Test with screen readers and keyboard navigation
Use Case 3: Dark Mode for Tech Services
For a modern, developer-friendly appearance:
- Enable Dark Mode toggle
- Set Primary Color to #10B981 (bright green) or #3B82F6 (bright blue)
- Background will auto-adjust to dark tones
- Choose "IBM Plex Sans" for a technical feel
- Save as "Dark - Developer"
Managing Your Themes
You can find and manage all your created themes in your settings page at the following link: https://tidycal.com/dashboard/themes
From this page, you can:
- View all created themes
- Apply themes to different booking types
- Edit existing themes
- Create new themes from scratch
Troubleshooting
Theme editor not appearing?
- Make sure you're logged into your TidyCal account
- Verify you're on Individual Plan or Agency Plan (theme customization requires a paid plan)
- Try adding
?theme-editor=1to the URL to force the editor to appear - Clear your browser cache and reload the page
Changes not saving?
- Ensure you have a stable internet connection
- Check that you have permission to edit the booking type (team members need appropriate permissions)
- Try refreshing the page and making changes again
Frequently Asked Questions
Can I use the same theme across multiple booking types?
Yes! Once you create a theme, you can apply it to any of your booking types from the themes management page at https://tidycal.com/dashboard/themes.
Do themes work with embedded booking pages?
Absolutely! Themes are designed to work seamlessly when you embed TidyCal on your website, making it easy to match your brand.
Can team members customize themes?
Only the team owner can customize themes for team booking pages. Team members can customize themes for their individual booking types.
Is theme customization available on the Free Plan?
Theme customization requires the Individual Plan or Agency Plan.