Theme Generator

Effortlessly create a comprehensive theme by customising a pre-defined scheme or building one from scratch.

Try experimenting with your theme to personalize it and see your scheme build as your changes are loaded in real time.

Hello There

If you're a new user, we suggest checking out the guide on how to navigate and utilize this website.

How to use the theme generator

The theme generator has been designed to help you make decisions on your colour scheme and select complementary colours and shades. As you choose colour and theme options you will see a preview of how these colours and shades work together.

You can either start by choosing one of the pre-defined themes from the list below and updating or start a new theme from scratch.

(Optional) Change your starting theme

Alternatively, you can import code from a previously created theme and update as necessary. See notes on importing and exporting your theme.

There are two segments within this website:

Color Selector
Component Builder

Color Selector

In the Color Selector section, you have the ability to handpick and experiment with different colors. Visualize how these colors interact with demo content, allowing you to choose a palette that resonates with your vision.

View the colour selector guide for more information.

Component Builder

In the Component Builder section, you can seamlessly select and personalize your theme components. These components are the building blocks of your theme, and they'll harmonize perfectly with the colors you've chosen from the Color Selector. Tailor your buttons, links, and cards to your exact specifications to create a theme that's uniquely yours.

View the component builder guide for more information.

We recommend getting started by selecting your colours then choosing your components.

Import

{
    "label": "Default",
    "groups": {
        "primary": {
            "color": "#47ada7",
            "onColor": "#0c0c0c",
            "isReversed": false,
            "description": "the primary colour will often be your main brand colour. It accounts for approx. 9% of the colour on your page."
        },
        "secondary": {
            "color": "#e68153",
            "onColor": "#020202",
            "isReversed": false,
            "description": "the secondary colour of your site typically accounts for 1% of the colour on your page. Most brands include an accent colour which would be your secondary colour. "
        },
        "surface": {
            "color": "#f7f7f7",
            "onColor": "#0c0c0c",
            "isReversed": false,
            "description": "the background colour of your website is approx. 90% of the screen. Therefore background colours will usually be white or a pale shade of another neutral colour. "
        },
        "success": {
            "color": "#39cd97",
            "onColor": "#0c0c0c",
            "isReversed": false,
            "description": "confirmation that the action has been completed successfully e.g. your form has been submitted, or the record has been updated etc. "
        },
        "warning": {
            "color": "#f0b728",
            "onColor": "#0c0c0c",
            "isReversed": false,
            "description": "a warning or an alert will usually ask the user to confirm their action e.g. are you sure you want to submit the form again? "
        },
        "error": {
            "color": "#f47d7d",
            "onColor": "#0c0c0c",
            "isReversed": false,
            "description": "an error message will inform users that something is incorrect or missing e.g. the record has not been saved.  "
        }
    },
    "components": {
        "btnOutline": {
            "paddingX": "8",
            "paddingY": "2",
            "borderRadius": "2",
            "borderSize": "2px",
            "shadowSize": "0",
            "animationShrink": "4",
            "animationShadow": "2"
        },
        "btnSink": {
            "paddingX": "8",
            "paddingY": "2",
            "borderRadius": "2",
            "borderSize": "2px",
            "depth": "4px"
        },
        "textFieldStandard": {
            "paddingX": "4",
            "paddingY": "2",
            "borderRadius": "2",
            "borderSize": "0px",
            "shadowSize": "1"
        },
        "checkbox": {
            "size": "8",
            "borderSize": "2px",
            "borderRadius": "2",
            "shadowSize": "4px"
        },
        "switch": {
            "size": "8",
            "borderSize": "2px",
            "borderRadius": "2",
            "shadowSize": "4px"
        },
        "card": {
            "lgPadding": "8",
            "lgSpacing": "2",
            "smPadding": "4",
            "smSpacing": "2",
            "borderSize": "0",
            "borderRadius": "4",
            "shadowSize": "4px"
        }
    }
}

Import

To update a theme, simply copy the exported text and paste it into the left-hand textarea. The current page will be automatically updated with the new theme.

Export

You can export themes by either copying them to the clipboard or downloading them as a file. It's recommended that you download the file. You can access both options through the buttons provided below.