{"componentChunkName":"component---src-templates-simple-markdown-js","path":"/developer-portal/colors/","matchPath":"","result":{"data":{"markdownRemark":{"html":"

Colors

\n
\n

“Color is a power which directly influences the soul.” - Wassily Kandinsky

\n
\n

Colors are set within the theme.ts file.\nThe theme.ts file contains a typescript variable named theme which controls the colors, styles and typography.

\n
\n
\n
Copy
\n
Copied
\n
\n 
export const theme = {
\n
\n

The included theme.ts includes all of the configuration options (most are commented out as default settings with two slashes //).\nUncomment them to override the theme.

\n

Change the primary color

\n

Find this section of the theme file.

\n
\n
lighten(colors.tonalOffset, colors.primary.main),\n // dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main),\n // contrastText: ({ colors }) => readableColor(colors.primary.main),\n },`, `32276605636221633000`)\"\n >\n
Copy
\n
Copied
\n
\n 
  colors: {\n    // tonalOffset: 0.2,\n    primary: {\n      main: '#FFFFFF',\n      // light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main),\n      // dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main),\n      // contrastText: ({ colors }) => readableColor(colors.primary.main),\n    },
\n
\n

Change the color.\nNot sure what to change it to?\nTry randomly guessing a hexadecimal value (0-9 and a-f are valid values).\nIt also accepts human friendly colors like orange.

\n

Change the primary text color

\n

Or not...

\n
\n
\n
Copy
\n
Copied
\n
\n 
    text: {\n      primary: '#FFFFFF',\n      // secondary: '#4e566d',\n    },
\n
\n

Change the footer background color

\n

Pick a color.

\n

Or change any other colors you want.

\n
\n
colors.primary.main,\n contrastText: 'white'\n },`, `46792541170445844000`)\"\n >\n
Copy
\n
Copied
\n
\n 
    footer: {\n      main: '#FFFFFF',\n      // main: ({ colors }) => colors.primary.main,\n      contrastText: 'white'\n    },
\n
\n

Free time

\n

Play with some various colors.

\n

Notice you can use typescript to calculate colors, if you wish.\nThat is beyond the scope of this training exercise.

","headings":[{"value":"Colors","depth":1},{"value":"Change the primary color","depth":2},{"value":"Change the primary text color","depth":2},{"value":"Change the footer background color","depth":2},{"value":"Free time","depth":2}]},"contentItem":{"data":{"lastModified":"2025-12-17T21:55:39.000Z","enableToc":null,"disableLastModified":null,"tocMaxDepth":null,"requestLogin":false}},"siteConfig":{"enableToc":true,"disableLastModified":false,"tocMaxDepth":4}},"pageContext":{"matchPath":"","id":"a3eab4a0-49ce-5850-9c11-eb7b982febc8__redocly content/developer-portal/colors/","seo":{"title":"Colors","description":null,"image":"","keywords":null,"jsonLd":null,"lang":null},"pageId":"developer-portal/colors.md","pageBaseUrl":"/developer-portal/colors","type":"markdown","toc":{"enable":true,"maxDepth":4,"headings":[{"depth":1,"value":"Colors","id":"colors"},{"depth":2,"value":"Change the primary color","id":"change-the-primary-color"},{"depth":2,"value":"Change the primary text color","id":"change-the-primary-text-color"},{"depth":2,"value":"Change the footer background color","id":"change-the-footer-background-color"},{"depth":2,"value":"Free time","id":"free-time"}]},"data":{"title":""},"catalogInfo":null,"link":"/developer-portal/colors/","sidebarName":"","isLanding":false,"showPrevButton":null,"showNextButton":null,"apiVersions":null,"apiVersionId":null,"isDefaultApiVersion":null}},"staticQueryHashes":["1123603147","1180902673","1302185487","1344209882","1398840060","1520077861","1975142765","2667623876","2950305614","3743992808","561138138"]}