Configure Appearance

To customize the appearance of your Privacy Center, prepare a CSS stylesheet with your desired styles. You can then apply these styles in two ways:

1. Through the API
2. By uploading the file as config.css to /privacy-center/config

Chakra UI CSS

By default, Fides uses the Chakra UI (opens in a new tab) framework to speed up styling.

Example: customizing heading text CSS

In order to modify the heading text, Chakra has a default chakra-heading class style that is assigned to h1, h2, h3, h4 and so on. To modify this style you can apply to all headings to specify a heading size:

/* Apply changes to all headings of the site */
.chakra-heading {
    color: #0000FF; /* Set text color to blue */
    font-size: 1.5em; /* Increase font size by 50% */
    font-weight: 300; /* Lighten font weight */
}
/* Apply changes only to heading 2 <h2> */
h2.chakra-heading {
    color: #0000FF; /* Set text color to blue */
    font-size: 1.5em; /* Increase font size by 50% */
    font-weight: 300; /* Lighten font weight */
}

You can read a helpful list of the styled Chakra properties (opens in a new tab) here.