Theme

You can override the default theme provided by Cosmos by using the Configuration component's theme prop. You can target your entire application, individual components, or even particuar 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 Cosmos styles, you need to make sure you are targeting the exact property as it is displayed in the examples below.

The theme tree below represents all of the theme properties that come with Cosmos. Each property can be edited below and the changes made here will reflect on all of the code examples throughout this entire site. You can toggle between the default Cosmos theme and your custom changes made on this page via the control within each demo. If you would like to permanently remove your custom theme, click the Restore Defaults button below.

This feature is currently disabled when viewing the site in dark mode.

{
}

Base

The base portion of the Cosmos 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.

Components

The components portion of the Cosmos 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.

Neutrals

colors.white#ffffff
colors.black#000000
colors.gray.extra-light#f5f5f5
colors.gray.light#cfcfcf
colors.gray.medium#939393
colors.gray.dark#676767
colors.gray.extra-dark#3f3f3f
colors.slate.extra-light#e9eef3
colors.slate.light#cbd4dc
colors.slate.medium#8397ab
colors.slate.dark#4c5a67
colors.slate.extra-dark#252c32

Reds

colors.red.extra-light#ffdbde
colors.red.light#f66f78
colors.red.medium#d91c29
colors.red.dark#a6020d
colors.red.extra-dark#570006

Oranges

colors.orange.extra-light#feede2
colors.orange.light#ffaa75
colors.orange.medium#fd6000
colors.orange.dark#b54703
colors.orange.extra-dark#5a2401

Greens

colors.green.extra-light#d4f7d5
colors.green.light#7ee791
colors.green.medium#20aa50
colors.green.dark#156f35
colors.green.extra-dark#0b381a

Blues

colors.blue.extra-light#e2f1ff
colors.blue.light#71baff
colors.blue.medium#076bc9
colors.blue.dark#054a8a
colors.blue.extra-dark#00284c

Purples

colors.purple.extra-light#f1e9fb
colors.purple.light#d6bcf5
colors.purple.medium#ac75f0
colors.purple.dark#681fc3
colors.purple.extra-dark#341061
palette.app-background#e9eef3
palette.primary-background#ffffff
palette.secondary-background#f5f5f5
palette.foreground-color#000000
palette.brand-primary#076bc9
palette.brand-secondary#ffffff
palette.urgent#d91c29
palette.warn#fd6000
palette.success#20aa50
palette.pending#ac75f0
palette.info#8397ab
palette.interactive#076bc9
palette.border-line#cfcfcf
palette.skeleton#f5f5f5
palette.light#ffffff
palette.dark#000000
palette.background-color#ffffff
palette.scrollbar-trackrgba(0, 0, 0, 0.1)
palette.scrollbar-thumbrgba(0, 0, 0, 0.6)
palette.scrollbar-thumb-hoverrgba(0, 0, 0, 0.7)
Aa
xxs0.75rem
Aa
xs0.8125rem
Aa
s0.875rem
Aa
m0.9375rem
Aa
l1rem
Aa
xl1.0625rem
Aa
xxl1.125rem
Aa
font-weight.bold700
Aa
font-weight.semi-bold600
Aa
font-weight.normal400
0.25 * border-radius0.125rem
0.5 * border-radius0.25rem
1 * border-radius0.5rem
2 * border-radius1rem
4 * border-radius2rem
0.25 * spacing0.125rem
0.5 * spacing0.25rem
1 * spacing0.5rem
2 * spacing1rem
4 * spacing2rem

Speed

0.25 * animation.speed
0.5 * animation.speed
1 * animation.speed
2 * animation.speed

Timing

animation.timing.ease
animation.timing.ease-out
animation.timing.ease-in
transparency.transparent-10.8
transparency.transparent-20.7
transparency.transparent-30.6
transparency.transparent-40.4
transparency.transparent-50.3
shadow.high0 0.125rem 1.5rem rgba(0,0,0,.3)
shadow.low0 0.125rem 0.5rem rgba(0,0,0,.2)
shadow.focus0 0 0 0.125rem rgba(0, 118, 209, 0.30)
shadow.focus-inverted0 0 0 0.125rem rgba(255, 255, 255, 0.30)