Dashboard Customization: Themes & Fonts
Tailor the visual experience of your ML Clever dashboards to match your preferences, enhance readability, or align with your organization's branding. The platform provides powerful yet easy-to-use customization options, primarily focusing on Themes (color schemes) and Fonts (typography).
Customizing the look and feel not only improves aesthetics but can also significantly impact usability. Choosing appropriate colors and fonts ensures that data is presented clearly, insights are easily digestible, and users have a comfortable and productive experience while interacting with their dashboards.
Accessing Design Settings
Global design settings for a specific dashboard, including theme and font selection, are typically managed within a dedicated modal or panel.
Opening the Design Settings Modal
Look for a "Design", "Appearance", or "Theme" button in the main Dashboard Command Bar at the top or side of your dashboard view. This button often uses a palette () or similar visual icon.
Clicking this button (often linked to a function like toggleDesignSettingsModal) will open the Design Settings Modal, which contains the selectors for both themes and fonts.
Working with Themes
Themes control the overall color scheme of your dashboard. Applying a theme instantly changes background colors, text colors, border styles, and, importantly, the default color palettes used within your charts and other visualization components. This ensures a consistent and harmonious look across the entire dashboard.
The Theme Selector
Inside the Design Settings modal, you'll find the Theme Selector. It displays available themes as interactive cards:
- Each card shows the Theme Name (e.g., "Oceanic Blue", "Dark Mode").
- A Color Palette Preview displays the primary colors associated with that theme, giving you a quick visual indication of its style.
- The currently active theme is highlighted (e.g., with a border or background change).
Selecting a Theme
Simply click on the card corresponding to the theme you want to apply. The following happens:
- Optimistic UI Update: The dashboard's appearance in the background (and potentially the modal itself) will immediately update to reflect the selected theme. This allows for instant preview.
- Saving to Server (): Simultaneously, the selection is automatically sent to the ML Clever backend and saved specifically for this dashboard (
dashboardId). - Confirmation: A temporary status message usually confirms successful saving or indicates if an error occurred.
Available Themes
ML Clever provides a curated set of themes to choose from. Common examples include:
(Exact themes and palettes may vary)
Choosing Dashboard Fonts
Typography plays a critical role in dashboard readability and overall aesthetic appeal. You can select a global font family that will be applied to titles, labels, axes, tooltips, and other text elements across your dashboard components.
The Font Selector
Also located within the Design Settings modal, the Font Selector presents available fonts as clickable cards:
- Each card displays the Font Name rendered in its own typeface, providing an immediate preview of its style.
- The currently active font is highlighted.
Selecting a Font
Click on the card for the font you wish to apply. Similar to theme selection:
- Optimistic UI Update: The typography on the dashboard components will update instantly to use the selected font family.
- Saving to Server (): The chosen font class is saved to the backend for this specific dashboard.
- Confirmation: A status message indicates success or failure.
Available Fonts
A selection of modern, readable web fonts is available. Examples include:
(The specific font list may be updated)
How Customization Works (Under the Hood)
Understanding the mechanism behind themes and fonts can be helpful:
- CSS Class Application: When you select a theme (e.g., "Oceanic Blue") or a font (e.g., "Manrope"), a corresponding CSS class (e.g.,
theme-oceanic-blue,font-manrope) is added to the HTML<body>element (or a main container) of the dashboard page. - CSS Styling Rules: The platform's stylesheets contain rules that target these body/container classes. These rules define specific styles (colors, background colors, font families, etc.) for various UI elements and dashboard components when a particular theme or font class is active.
- Persistence: Your selection (e.g.,
theme-oceanic-blue,font-manrope) is saved in the dashboard's settings on the server. When you reload the dashboard, these classes are automatically applied to the<body>(or main container) based on the saved settings.
Tips for Effective Customization
Prioritize Readability & Contrast
Choose themes and fonts that ensure text is easily readable against backgrounds. Pay attention to color contrast, especially for data labels and axes.
Consider Your Audience & Context
Is the dashboard for internal quick analysis (where default might be fine) or a client presentation (where branding consistency matters)? Choose accordingly.
Leverage Theme Palettes
Themes come with predefined chart color palettes. Relying on these helps maintain visual consistency across different visualizations within the dashboard.
Test Across Components
After selecting a theme or font, quickly scan your dashboard components (especially different chart types) to ensure the new style works well universally.
Troubleshooting Customization Issues
If your theme or font changes aren't applying correctly, try these steps:
| Problem | Troubleshooting Steps |
|---|---|
| Theme/Font Selector is Disabled | • Permissions: You might lack the necessary permissions to modify dashboard settings. Check with your administrator. • Locked Dashboard State: The dashboard might be in a read-only state for other reasons. |
| Selection Doesn't Apply Visually | • Browser Cache: Try a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to clear cached styles. • Console Errors: Check the browser's developer console (F12) for JavaScript errors related to theme/font application. • Conflicting Styles: (Rare) Custom CSS overrides or browser extensions could interfere. Try in an incognito window. |
| Changes Don't Persist After Reload | • Saving Error: Check if an error message appeared when you made the selection. Network issues or server problems might have prevented saving. • Check Network Tab: Use the browser's developer tools (Network tab) to see if the POST request to • Permissions Issue: Verify you have save permissions for the dashboard. • Try Again: Retry the selection, ensuring you see a success confirmation. |
| Specific Component Doesn't Reflect Theme/Font | • Component Styling: Some components might have specific internal styling that overrides global themes/fonts in certain areas. Check the component's own settings if available. • Theme Compatibility: Ensure the component is designed to fully respect the theme variables. |
Next Steps
With your dashboard visually customized, continue refining its content and layout:
Data Visualization Components
Dive deeper into configuring individual components, understanding their specific options and best use cases.
Explore ComponentsDashboard Layout & Interaction
Learn how to effectively arrange components on the grid, manage pages, and utilize interactive dashboard features.
Master Dashboard Layout