You can fully customize the look and feel of your entire BeDesk application right from the admin panel. The Themes page is your central hub for branding and whitelabeling your instance. It gives you granular control over colors, fonts, and styles, allowing you to create a cohesive experience for both your agents and customers that perfectly aligns with your brand identity.
You can upload logos and change site name from Admin > Settings > General page.
This guide will walk you through all the settings available on the Admin > Settings > Themes page.
At the top of the page, you'll find general settings that apply across your BeDesk instance.
Default site theme: This dropdown menu sets the theme that users will see by default when they visit your public-facing help center. You can choose from pre-configured themes (like Light or Dark) or any custom themes you create. Setting it to "System" will automatically adapt the theme based on the visitor's operating system preference (light or dark mode).
Allow users to switch theme: When this option is enabled, a theme switcher will appear on the site, allowing visitors to choose their preferred theme from the ones you've made available.
You can create multiple themes, such as a "Light" and a "Dark" mode. This flexibility is a core part of whitelabeling the platform, as it can be adapted for different brands or user preferences.
To create a new theme, click the + (plus) icon next to the theme selection dropdown.
To manage an existing theme, select it from the dropdown. Then, click the three-dots menu to reveal more options:
Settings: This opens the theme options dialog for selecting whether this theme has light text on dark background and if it should be used as default theme for dark/light modes.
Reset to default: This will revert all your custom changes for the selected theme back to its original state.
Delete: This will permanently remove the selected theme.
When you select a theme to edit, a list of customization options will appear. These settings are crucial for branding the application with your company's specific look. Your changes will apply globally and will be reflected in the live preview panel on the right.
Font: Choose the font family for the application's text.
Radius: Control the border-radius of elements like buttons, panels, and input fields to make them more rounded or square.
Colors: A full set of color pickers allows you to define your brand's palette.
Navbar: The color of the main navigation bar.
Background: The primary background color of the application interface.
Background alt: An alternative background color, often used for separating sections or for cards.
Foreground: The main color for body text.
Accent light, Accent, Accent dark: These define your primary brand color in three shades. They are used for links, buttons, highlights, and other key interface elements.
Text on accent: The color of text that appears on top of an "Accent" colored background (e.g., text on a primary button).
Chip: The color used for tags or chip elements.
As you make changes, the preview panel on the right side of the screen updates in real-time. This panel shows how your theme will look on the public help center, but remember that the styles you define here will also apply to the admin and agent areas, ensuring a consistent brand experience.
You can switch between Desktop and mobile views using the dropdown in the top-right corner of the preview panel.
Once you are happy with your customizations, don't forget to click the Save Changes button at the top right of the page to apply your new branding across the entire BeDesk application.