IN THIS ARTICLE

    IN THIS ARTICLE

      Mokkup Themes

      Color Theme is one of three theme types on the Design tab, alongside Text Theme and Effects Theme. This article covers Color Theme; see the Text Themes and Effects Themes articles for the other two.

      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.
      • Under 'Active Color Theme', click 'Change Color Theme' and browse through various themes.
      • Hover over a theme card and click "Apply" to use it as is, or click "Edit" to customize it first.

      Element Level

      There are two ways to reach Color Theme options for a single element:

      Way 1: From the element's edit panel

      1. Select an element on the canvas to open its edit panel.
      2. Near the bottom of the left panel, expand 'Element Color Theme'. (Elements that also support text and effects theming show 'Element Text' and 'Element Effects' as separate rows alongside it.)
      3. This opens an Element Colors editor for just that element, with the same Primary, Secondary, and Tertiary swatches under Main/Contrast tabs, pre-filled from the project's active Color Theme.
      4. Edit any swatch or hex code to override that element's colors, or click 'Reset to default' to match the project theme again.

      Way 2: From the floating toolbar

      1. Click any element on the canvas to select it.
      2. In the floating toolbar above the element, click the 'Theme & Customization' icon.
      3. Select 'Color Theme' from the menu.

      Note: Unlike Project Level, there's no theme gallery to pick from here. You're changing the element's colors directly, and the changes apply right away. 

      How to Customize?

      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.

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

      Note: Color Themes are now free for every user to view, apply, and edit, including creating and editing your own custom themes.

      Note: Themes are organized under two tabs: Default, which holds Mokkup's ready-made themes, and Custom, which holds themes you've created and saved yourself. Read our  Creating Custom Themes article to learn more. 

      Note: Editing a theme from 'Change Color Theme' opens Live Preview Mode, with a Discard/Apply bar at the top of the canvas. Clicking Discard prompts a confirmation dialog asking you to confirm you want to discard your changes, since this can't be undone.

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

       

      Similar articles