Customize Theme

This page is a work in progress.

How to customize your theme:

1. Follow the instructions below to customize your theme.
2. Download your theme.css file. (The download button is at the bottom of this page.)
3. Place your theme.css file in your project. (See the Get Started page for details).

FYI: The Fanny Pack UI color palette borrows colors from the Metro UI color palette. The neutral colors in the Fanny Pack UI color palette are shades and tints of purple taupe).

Color palette

You can use any or all of the pre-defined color sets below or create your own custom color sets. When creating custom color variables, the names of those variables need to follow the CSS variable naming convention – i.e. the name needs to begin with double hyphens (--) and each word in the name should be separated by a hyphen.

In the “Main color variables” section (after this “Color palette” section) you will use your color palette to define your main component colors, including the neutral colors, which are used throughout the components. The Fanny Pack UI color palette uses seven neutral colors (black, white, and five shades and tints of purple taupe), so you will need to have at least seven neutral colors in your color palette. Click the button below to read some ideas on how to create your set of neutral colors.

Main color variables

These styles are used throughout the Fanny Pack UI components. Updating these variables will handle almost all of your theme customizations. If you want to customize individual components, then you can change the values for any of the individual components in the theme.css file that you download at the bottom of this page.

To set your main color variables:

1. Select the color sets that you want to include in your theme.css file.
2. In the table below, set the main colors that you want to use throughout your theme. (You can then browse to the different component pages to see how the components will look with your theme.)

NOTE: After you select your color sets you will see that the main colors below are initially set to the Fanny Pack main colors. That is intentional to provide an example for you to follow.

Size variables

The size variables are used to set values for things like padding (for buttons and other elements), the roundness or squareness of borders (i.e. border-radius), font sizes, etc. You are welcome to keep the default sizes for each of the following variables or change them however you want.

You need to select and set your main colors before you can download your theme