{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/develop/theme/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"Theme","navTitle":null,"slug":"develop/theme/","hidePage":false,"collapsibleGroup":"","group":"","seoDescription":null,"cosmosComponent":{"component":{"component":"Theme","package":"core"}},"childStrapiDeveloperComponentPageOverviewTextnode":{"overview":"You can override the default theme provided by Constellation by using the [Configuration](/versions/8/develop/configuration) component's theme prop. You can target your entire application, individual components, or even particular sections of code. In order to override the theme, you must pass along a JSON file or an inline JS object that contains your theme declaration. If you wish to override Constellation styles, you need to make sure you are targeting the exact property as it is displayed in the examples below."},"body":[{"id":"b941e37c-b26e-5fbf-be1e-2c0340a216bb","strapi_component":"layout.section","title":"Usage","subSections":[{"id":"49e037b9-a0b5-53f4-8715-b85ce13a5945","title":"Base","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The _base_ portion of the Constellation theme contains styles that are widely used by other components. This is a great place if you would like to change the entire look and feel of your application, since a change here will most likely affect many other components you may be using."}}],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"e4324f22-73ef-5159-a267-dede8659f514","strapi_component":"demo.code-editor","demo":{"demoName":"ConfigurableBaseTheme","component":"Configuration","package":"core"}},{"id":"e7c81263-db02-508a-9907-d5c302ce27c0","strapi_component":"layout.sub-section","title":"Components","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The _components_ portion of the Constellation theme contains styles that apply to specific components. If you want to only modify the styling of a couple components without changing the theme on a larger scale, you should be applying your changes here.\n\n**Disclaimer:** Properties of the theme nested within the _components_ section are more volatile and should be avoided unless absolutely necessary. Components are constantly updated within the library, and there may be tokens within the theme that the components themselves no longer use. The theme is not routinely cleaned for these deprecations as the possibility of the components using those tokens again in the future always exists."}},{"id":"ab2c9a66-4543-5393-ab7d-9e5a731e5745","strapi_component":"layout.section","title":"Colors","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"#### Neutrals"}},{"id":"48cf257e-7632-5aae-885e-cafb5df02626","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"neutral"},{"id":"af260bab-21ea-55f5-9c80-a9c249e77b3c","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Reds"}},{"id":"162eb9a8-11bc-501b-ba91-501f2b9359aa","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"red"},{"id":"fccb8677-eab6-56b2-8067-60a8ff5a81f5","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Oranges"}},{"id":"fc19b78b-c464-58c1-ad3d-d2d1fe8fd21f","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"orange"},{"id":"d8fc3193-a94e-5628-9b9c-2aff4845f38d","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Greens"}},{"id":"41d7c096-0795-56f3-9aa0-75cc3412f74a","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"green"},{"id":"08d403bd-1cab-5f1e-b719-1ac85ad633b7","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Blues"}},{"id":"80bebd75-0bcc-599c-815a-1b1c1733fa8b","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"blue"},{"id":"d5902b99-34ad-502b-9b32-72afc183525b","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Purples"}},{"id":"1c962534-03b8-5d33-9083-e17791ff7bbb","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"purple"},{"id":"2cc803f4-6edb-59a8-9645-147cb96922b9","strapi_component":"layout.section","title":"Palette","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"01f9370f-c4de-5617-818f-dd8d5366fe62","strapi_component":"content.theme-properties-card","type":"palette","colorGroup":null},{"id":"c57b3f82-131b-5fcc-a5a0-896266f5a7c2","strapi_component":"layout.section","title":"Font size","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"dd20e94d-75f3-59aa-b328-92de59848f02","strapi_component":"content.theme-properties-card","type":"fontSize","colorGroup":null},{"id":"0cfb71ca-2cdc-5b98-b20a-70f22049778c","strapi_component":"layout.section","title":"Font weight","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"02fa7c14-bb50-5812-aba0-58cbf84eaaba","strapi_component":"content.theme-properties-card","type":"fontWeight","colorGroup":null},{"id":"3861674a-5bca-5eee-b4d8-f42671ab5a6a","strapi_component":"layout.section","title":"Border radius","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"fb3faabe-f884-55e8-8ef2-cfab8cbd17b7","strapi_component":"content.theme-properties-card","type":"borderRadius","colorGroup":null},{"id":"9c6d8102-ce94-5472-815a-d3fe2351bdee","strapi_component":"layout.section","title":"Spacing","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"48649b18-6b54-5984-bca7-f4d27edf7769","strapi_component":"content.theme-properties-card","type":"spacing","colorGroup":null},{"id":"4dc49222-485f-53c7-8748-143ce39dbb2e","strapi_component":"layout.section","title":"Animation","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"924aba58-022b-5188-9b37-80450e832d86","strapi_component":"content.theme-properties-card","type":"animation","colorGroup":null},{"id":"43754d9c-b097-578a-960e-58245a6360e9","strapi_component":"layout.section","title":"Transparency","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"9b04c185-bb1c-5198-92cc-9c508ec9d256","strapi_component":"content.theme-properties-card","type":"transparency","colorGroup":null},{"id":"a9dc26d9-998c-5592-9b73-7dcfdb6001dc","strapi_component":"layout.section","title":"Shadow","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"4ae86552-853f-55e1-bcce-b82d4af14a26","strapi_component":"content.theme-properties-card","type":"shadow","colorGroup":null}],"relatedComponents":[],"propsTable":false,"themeTree":{"editable":true,"component":false,"target":null}}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}}},"pageContext":{"page":{"node":{"title":"Theme","navTitle":null,"slug":"develop/theme/","hidePage":false,"collapsibleGroup":"","group":"","seoDescription":null,"cosmosComponent":{"component":{"component":"Theme","package":"core"}},"childStrapiDeveloperComponentPageOverviewTextnode":{"overview":"You can override the default theme provided by Constellation by using the [Configuration](/versions/8/develop/configuration) component's theme prop. You can target your entire application, individual components, or even particular sections of code. In order to override the theme, you must pass along a JSON file or an inline JS object that contains your theme declaration. If you wish to override Constellation styles, you need to make sure you are targeting the exact property as it is displayed in the examples below."},"body":[{"id":"b941e37c-b26e-5fbf-be1e-2c0340a216bb","strapi_component":"layout.section","title":"Usage","subSections":[{"id":"49e037b9-a0b5-53f4-8715-b85ce13a5945","title":"Base","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The _base_ portion of the Constellation theme contains styles that are widely used by other components. This is a great place if you would like to change the entire look and feel of your application, since a change here will most likely affect many other components you may be using."}}],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"e4324f22-73ef-5159-a267-dede8659f514","strapi_component":"demo.code-editor","demo":{"demoName":"ConfigurableBaseTheme","component":"Configuration","package":"core"}},{"id":"e7c81263-db02-508a-9907-d5c302ce27c0","strapi_component":"layout.sub-section","title":"Components","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The _components_ portion of the Constellation theme contains styles that apply to specific components. If you want to only modify the styling of a couple components without changing the theme on a larger scale, you should be applying your changes here.\n\n**Disclaimer:** Properties of the theme nested within the _components_ section are more volatile and should be avoided unless absolutely necessary. Components are constantly updated within the library, and there may be tokens within the theme that the components themselves no longer use. The theme is not routinely cleaned for these deprecations as the possibility of the components using those tokens again in the future always exists."}},{"id":"ab2c9a66-4543-5393-ab7d-9e5a731e5745","strapi_component":"layout.section","title":"Colors","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"#### Neutrals"}},{"id":"48cf257e-7632-5aae-885e-cafb5df02626","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"neutral"},{"id":"af260bab-21ea-55f5-9c80-a9c249e77b3c","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Reds"}},{"id":"162eb9a8-11bc-501b-ba91-501f2b9359aa","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"red"},{"id":"fccb8677-eab6-56b2-8067-60a8ff5a81f5","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Oranges"}},{"id":"fc19b78b-c464-58c1-ad3d-d2d1fe8fd21f","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"orange"},{"id":"d8fc3193-a94e-5628-9b9c-2aff4845f38d","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Greens"}},{"id":"41d7c096-0795-56f3-9aa0-75cc3412f74a","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"green"},{"id":"08d403bd-1cab-5f1e-b719-1ac85ad633b7","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Blues"}},{"id":"80bebd75-0bcc-599c-815a-1b1c1733fa8b","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"blue"},{"id":"d5902b99-34ad-502b-9b32-72afc183525b","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Purples"}},{"id":"1c962534-03b8-5d33-9083-e17791ff7bbb","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"purple"},{"id":"2cc803f4-6edb-59a8-9645-147cb96922b9","strapi_component":"layout.section","title":"Palette","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"01f9370f-c4de-5617-818f-dd8d5366fe62","strapi_component":"content.theme-properties-card","type":"palette","colorGroup":null},{"id":"c57b3f82-131b-5fcc-a5a0-896266f5a7c2","strapi_component":"layout.section","title":"Font size","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"dd20e94d-75f3-59aa-b328-92de59848f02","strapi_component":"content.theme-properties-card","type":"fontSize","colorGroup":null},{"id":"0cfb71ca-2cdc-5b98-b20a-70f22049778c","strapi_component":"layout.section","title":"Font weight","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"02fa7c14-bb50-5812-aba0-58cbf84eaaba","strapi_component":"content.theme-properties-card","type":"fontWeight","colorGroup":null},{"id":"3861674a-5bca-5eee-b4d8-f42671ab5a6a","strapi_component":"layout.section","title":"Border radius","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"fb3faabe-f884-55e8-8ef2-cfab8cbd17b7","strapi_component":"content.theme-properties-card","type":"borderRadius","colorGroup":null},{"id":"9c6d8102-ce94-5472-815a-d3fe2351bdee","strapi_component":"layout.section","title":"Spacing","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"48649b18-6b54-5984-bca7-f4d27edf7769","strapi_component":"content.theme-properties-card","type":"spacing","colorGroup":null},{"id":"4dc49222-485f-53c7-8748-143ce39dbb2e","strapi_component":"layout.section","title":"Animation","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"924aba58-022b-5188-9b37-80450e832d86","strapi_component":"content.theme-properties-card","type":"animation","colorGroup":null},{"id":"43754d9c-b097-578a-960e-58245a6360e9","strapi_component":"layout.section","title":"Transparency","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"9b04c185-bb1c-5198-92cc-9c508ec9d256","strapi_component":"content.theme-properties-card","type":"transparency","colorGroup":null},{"id":"a9dc26d9-998c-5592-9b73-7dcfdb6001dc","strapi_component":"layout.section","title":"Shadow","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"4ae86552-853f-55e1-bcce-b82d4af14a26","strapi_component":"content.theme-properties-card","type":"shadow","colorGroup":null}],"relatedComponents":[],"propsTable":false,"themeTree":{"editable":true,"component":false,"target":null}}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}},"staticQueryHashes":["1103706436","2075638250","2949869146","3642924123","793757994"]}