How to Enable Dark Mode in BoldDesk Web Forms & Widgets
BoldDesk web forms support advanced customization, allowing you to add custom JavaScript (and optional custom CSS) to modify the form’s behavior and appearance. This article walks you through enabling a dark theme by using custom JavaScript.
Prerequisites
- You must have access to Admin settings in BoldDesk.
- You must be able to edit the target Web Form (or Widget, if you are using a widget-based form).
- Basic familiarity with CSS/JavaScript is recommended.
Step-by-Step Instructions
-
Go to Admin and open Web Forms.
-
Select the web form you want to update.
-
Locate Advanced Customization and open Custom JS.
-
Add the following script and save the changes.
document.body.classList.add('dark-mode');
After customization
Frequently Asked Questions
1) Do I need Custom CSS if I add document.body.classList.add('dark-mode');?
No. Simply adding this script will enable the dark theme for the web form or web widget by default. Custom CSS is optional and only required if you wish to further customize or override specific styles to meet your design requirements.
2) Where do I add this code in BoldDesk?
Add it in the Custom JS section under Advanced Customization for the specific Web Form (or Widget) you want to style.
3) Can I enable dark mode for only one web form but not others?
Yes. Advanced Customization is configured per web form/widget, so changes apply only where you add the script/CSS.
4) Will BoldDesk support troubleshoot my custom JS/CSS?
Custom code is customer-managed. If issues occur, remove or correct the custom code and validate it in a safe test environment.
