Part 2. How to customize theme’s color scheme

Read the following tutorial and learn how you can customize theme colors in the Domino Plone theme.

Make sure that plone.app.theming is installed and activated (via Site Setup -> Add-ons).

The Domino Plone Theme design has three color schemes: blue, orange, and grey. To change the color scheme navigate to Site Setup > Theming and choose one of the available options:

  • Domino Theme (blue, chosen by default)
  • Orange Domino Theme
  • Grey Domino Theme

Domino Plone theme colors

To add custom colors go to “Advanced settings” and insert proper CSS color code for:

Domino Plone theme colors customization

Theme colors

Blue color scheme (out-of-the-box, default)

color_first = context/color_first | string:#1e579d 
color_second = context/color_second | string:#1b3a65
color_third = context/color_third | string:#dbe3ee
color_fourth = context/color_fourth | string:#cfd7e0

Grey color scheme (out-of-the-box)

color_first = context/color_first | string:#097867 
color_second = context/color_second | string:#109581
color_third = context/color_third | string:#e1e1e1
color_fourth = context/color_fourth | string:#f1f1f1

Orange color scheme (out-of-the-box)

color_first = context/color_first | string:#fd5126 
color_second = context/color_second | string:#2c2c2c
color_third = context/color_third | string:#ffd2c7
color_fourth = context/color_fourth | string:#ffeee9

Yellow color scheme (example)

color_first = context/color_first | string:#1e1c41 
color_second = context/color_second | string:#ada410
color_third = context/color_third | string:#dad137
color_fourth = context/color_fourth | string:#f8f5c5

Follow