IN THIS ARTICLE

    IN THIS ARTICLE

      Custom Themes

      Create a custom palette for the project using these simple steps.

      How to Use?

      There are 2 ways to use themes in Mokkup:

      Project Level

      • Open/Create a new project.
      • Click on ‘Design’ in the left menu panel.
      • Select "Change Theme" and browse through various themes.
      • Choose a theme, and click “Apply”.

      Element Level

      • Select an element in any project. 
      • Click on the 'palette' icon in the floating toolbar above the element. 
      • Select "Color Theme" and browse through various themes.
      • Click on a theme to apply it. The change appears on that element instantly.

      How to Create?

      Creating a theme is very easy in Mokkup. Just follow the steps below.

      Create a New Theme

      • Go to ‘Design’ in the left menu panel.
      • Select "Change Theme" & then click on the “Custom Theme” card from the menu.
      • Add a name for the theme by clicking the ‘pencil’ icon near Untitled right at the top of the menu.
      • The colors are split into Primary, Secondary, Tertiary, and Tertiary sub-menus. 
      • Click on the colored square to manually edit colors, add hex codes, and adjust the opacity.
      • The hex values near the colored squares can also be edited to add custom Hex values.
      • The info icon near each colored square will indicate where the color is being applied.
      • The colors in the Default section are view only and cannot be edited.

      Tip: The Main tab has the main color palette applied to elements. The contrast tab has an additional color palette used only for Combo charts.

      Modify a Mokkup Theme

      • Click on ‘Edit’ when hovering over the colors in a pre-existing theme.
      • Edit the theme name by clicking the ‘pencil’ icon near the name of the chosen theme right at the top of the menu.
      • The colors are split into Primary, Secondary, Tertiary, and Tertiary sub-menus.
      • The Primary, Secondary, Tertiary sections are split in accordance to how the colors appear in the charts. Primary being the first 5, secondary the next 5 and so on. These are completely customizable.
      • Click on the colored square to manually edit colors, add hex codes, and adjust the opacity.
      • The hex values near the colored squares can also be edited to add custom Hex values.
      • The info icon near each colored square will indicate where the color is being applied.

      Live Preview

      • While creating or modifying a theme, a strip appears above the canvas showing "Editing Color Theme · Preview Mode".
      • Every change is previewed live on your dashboard, so you can see the result before saving.
      • Click " Save & Apply" to save the theme, or "Discard" to abandon your changes.

      Note: Clicking "Discard" opens a confirmation: "Discard your changes? You'll lose all the edits you've made to this theme. This can't be undone." Choose "Keep Editing" to go back, or "Discard" to confirm.

      Shared Themes in Team Projects

      • When you apply a custom theme to a project, it becomes visible as a Shared Theme to all collaborators in that project.
      • Shared themes help teams stay aligned on styling without needing to duplicate work.
      • All collaborators in the project can apply and edit a shared theme.

      Note: Shared themes are visible only within the specific project they were applied to. Custom themes are available across all your projects.

      The same create, edit, name, and share steps also apply to Text Themes and Effects Themes.

      This was a complete guide to using Custom Themes on Mokkup. For further questions, please ask our Chatbot or contact Support.

      Similar articles