Design Customizations
Mokkup lets you control how your dashboard looks through three separate theme systems. Color, Text, and Effects. Each can be applied to your whole project or to a single element.
Where to Find?
Navigate to the Design tab in the left menu. You'll see three cards stacked in order:
-
Active Colour Theme → Change Colour Theme
-
Text Theme → Change Text Theme
-
Active Effects Theme → Change Effects Theme
Tip: To style a single element instead of your whole project, click it on the canvas. You can then apply the same three themes either from the palette icon in the floating toolbar or from the element's panel in the left sidebar. Both are scoped to that element only.
How to Use?
Each theme has its own gallery with Default and Custom tabs. Hover any card to reveal Apply (use it as-is) or Edit (open it in the theme editor).
a. Color Theme
Controls every chart color in your dashboard, including titles, chart series, and data columns, across Primary, Secondary, and Tertiary palettes, plus a Contrast palette for combo charts.
Read this article to know more about colour themes.
b. Text Theme
Controls typography for every element type, including font family, size, style, and color. Presets include Crisp, Bold, Vintage, Editorial, Classic, and Compact, each suited to a light or dark background.
Read this article to know more about text themes.
c. Effects Theme
Controls how your elements are treated. This includes rounded corners, padding, element and canvas backgrounds, drop shadow, and stroke. Presets include Aurora, Glow, Sketch, Flat, Depth, and Outline.
Read this article to know more about effects themes.
Tip: When you edit any theme, a Preview Mode strip appears above the canvas with Discard and Apply. Changes preview live but aren't saved until you apply them, and if you customize a theme without saving, use Save Current Theme so you don't lose it.