ThemeProvider
Provides the theme context to all child components, and automatically generates CSS Variables for dynamic theming.@coinbase/cds-web@9.0.2
import { ThemeProvider } from '@coinbase/cds-web'
Related components
ThemeProvider component
The ThemeProvider provides the theme context to all child components, and automatically generates CSS Variables for dynamic theming.
You must pass the theme prop to configure the theme, and the activeColorScheme prop to set light or dark mode.
import { ThemeProvider } from '@coinbase/cds-web/system/ThemeProvider';
import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme';
const App = () => (
<ThemeProvider theme={defaultTheme} activeColorScheme="light">
{/* Your app components */}
</ThemeProvider>
);
Tip
Changing the activeColorScheme automatically updates the values returned from the useTheme hook and from CSS Variables.
useTheme hook
The useTheme hook provides access to the current theme and activeColorScheme.
The color and spectrum objects automatically change based on the activeColorScheme.
const theme = useTheme();
theme.activeColorScheme; // "light" or "dark"
theme.spectrum; // Resolves to lightSpectrum or darkSpectrum, depends on activeColorScheme
theme.color; // Resolves to lightColor or darkColor, depends on activeColorScheme
theme.color.bgPrimary; // "rgb(0,82,255)" or "rgb(87,139,250)", depends on activeColorScheme
theme.space[2]; // 16
theme.borderRadius[200]; // 8
theme.fontSize.display3; // "2.5rem"
Tip
For best performance, prefer to use CSS Variables instead of the useTheme hook whenever possible.
CSS Variables
CSS Variables are created for every value in the theme.
For best performance, prefer using CSS Variables instead of the useTheme hook whenever possible.
const theme = useTheme();
theme.color.bgPrimary; // --color-bgPrimary
theme.lightColor.bgPrimary; // --lightColor-bgPrimary
theme.darkColor.bgPrimary; // --darkColor-bgPrimary
theme.spectrum.blue10; // --blue10
theme.lightSpectrum.blue10; // --light-blue10
theme.darkSpectrum.blue10; // --dark-blue10
theme.space[2]; // --space-2
theme.space[0.25]; // --space-0_25
theme.borderRadius[400]; // --borderRadius-400
theme.fontSize.body; // --fontSize-body
You can see all the CSS Variables for the defaultTheme below.
{
"--light-blue0": "245,248,255",
"--light-blue5": "211,225,255",
"--light-blue10": "176,202,255",
"--light-blue15": "146,182,255",
"--light-blue20": "115,162,255",
"--light-blue30": "70,132,255",
"--light-blue40": "38,110,255",
"--light-blue50": "16,94,255",
"--light-blue60": "0,82,255",
"--light-blue70": "0,75,235",
"--light-blue80": "0,62,193",
"--light-blue90": "0,41,130",
"--light-blue100": "0,24,77",
"--light-green0": "245,255,251",
"--light-green5": "203,245,227",
"--light-green10": "163,235,205",
"--light-green15": "131,224,186",
"--light-green20": "101,214,167",
"--light-green30": "60,194,138",
"--light-green40": "34,173,115",
"--light-green50": "18,153,97",
"--light-green60": "9,133,81",
"--light-green70": "4,112,67",
"--light-green80": "2,83,50",
"--light-green90": "0,57,35",
"--light-green100": "0,31,18",
"--light-orange0": "255,250,245",
"--light-orange5": "254,232,210",
"--light-orange10": "253,213,176",
"--light-orange15": "251,194,147",
"--light-orange20": "249,174,118",
"--light-orange30": "244,140,76",
"--light-orange40": "237,112,47",
"--light-orange50": "225,89,27",
"--light-orange60": "207,71,14",
"--light-orange70": "181,54,6",
"--light-orange80": "145,39,2",
"--light-orange90": "100,26,0",
"--light-orange100": "51,13,0",
"--light-gray0": "255,255,255",
"--light-gray5": "247,248,249",
"--light-gray10": "238,240,243",
"--light-gray15": "222,225,231",
"--light-gray20": "206,210,219",
"--light-gray30": "177,183,195",
"--light-gray40": "137,144,158",
"--light-gray50": "113,120,134",
"--light-gray60": "91,97,110",
"--light-gray70": "70,75,85",
"--light-gray80": "50,53,61",
"--light-gray90": "30,32,37",
"--light-gray100": "10,11,13",
"--light-indigo0": "246,247,255",
"--light-indigo5": "230,232,255",
"--light-indigo10": "214,218,254",
"--light-indigo15": "198,204,253",
"--light-indigo20": "181,189,253",
"--light-indigo30": "148,161,251",
"--light-indigo40": "116,135,247",
"--light-indigo50": "89,111,242",
"--light-indigo60": "66,91,233",
"--light-indigo70": "47,74,215",
"--light-indigo80": "31,54,173",
"--light-indigo90": "17,32,107",
"--light-indigo100": "8,15,51",
"--light-pink0": "255,245,255",
"--light-pink5": "253,228,253",
"--light-pink10": "251,212,250",
"--light-pink15": "248,195,245",
"--light-pink20": "244,178,240",
"--light-pink30": "235,143,227",
"--light-pink40": "221,110,209",
"--light-pink50": "203,81,187",
"--light-pink60": "179,58,162",
"--light-pink70": "149,39,133",
"--light-pink80": "116,26,102",
"--light-pink90": "83,17,72",
"--light-pink100": "51,10,44",
"--light-purple0": "251,247,255",
"--light-purple5": "244,232,255",
"--light-purple10": "237,217,255",
"--light-purple15": "230,201,255",
"--light-purple20": "222,184,255",
"--light-purple30": "205,153,253",
"--light-purple40": "188,123,251",
"--light-purple50": "157,107,242",
"--light-purple60": "138,85,233",
"--light-purple70": "119,67,215",
"--light-purple80": "90,48,173",
"--light-purple90": "54,27,107",
"--light-purple100": "25,13,51",
"--light-red0": "255,245,246",
"--light-red5": "254,225,228",
"--light-red10": "253,206,210",
"--light-red15": "251,186,191",
"--light-red20": "249,166,173",
"--light-red30": "244,127,136",
"--light-red40": "237,89,102",
"--light-red50": "225,57,71",
"--light-red60": "207,32,47",
"--light-red70": "181,15,29",
"--light-red80": "145,5,16",
"--light-red90": "100,1,9",
"--light-red100": "51,0,4",
"--light-teal0": "240,254,255",
"--light-teal5": "188,246,253",
"--light-teal10": "136,237,251",
"--light-teal15": "93,226,248",
"--light-teal20": "51,213,244",
"--light-teal30": "0,188,235",
"--light-teal40": "0,169,221",
"--light-teal50": "0,147,203",
"--light-teal60": "0,123,179",
"--light-teal70": "0,97,149",
"--light-teal80": "0,71,116",
"--light-teal90": "0,47,83",
"--light-teal100": "0,27,51",
"--light-yellow0": "255,252,241",
"--light-yellow5": "255,244,192",
"--light-yellow10": "255,240,145",
"--light-yellow15": "255,234,100",
"--light-yellow20": "255,228,54",
"--light-yellow30": "247,210,26",
"--light-yellow40": "235,186,0",
"--light-yellow50": "207,151,0",
"--light-yellow60": "174,113,0",
"--light-yellow70": "136,76,0",
"--light-yellow80": "96,48,0",
"--light-yellow90": "58,20,0",
"--light-yellow100": "27,6,0",
"--light-chartreuse0": "245,255,250",
"--light-chartreuse5": "221,251,232",
"--light-chartreuse10": "198,247,209",
"--light-chartreuse15": "176,242,182",
"--light-chartreuse20": "159,238,155",
"--light-chartreuse30": "137,223,117",
"--light-chartreuse40": "127,208,87",
"--light-chartreuse50": "86,179,64",
"--light-chartreuse60": "53,151,48",
"--light-chartreuse70": "35,122,43",
"--light-chartreuse80": "25,93,41",
"--light-chartreuse90": "17,64,35",
"--light-chartreuse100": "7,26,17",
"--dark-blue0": "0,16,51",
"--dark-blue5": "1,29,91",
"--dark-blue10": "1,42,130",
"--dark-blue15": "3,51,154",
"--dark-blue20": "5,59,177",
"--dark-blue30": "10,72,206",
"--dark-blue40": "19,84,225",
"--dark-blue50": "33,98,238",
"--dark-blue60": "55,115,245",
"--dark-blue70": "87,139,250",
"--dark-blue80": "132,170,253",
"--dark-blue90": "185,207,255",
"--dark-blue100": "245,248,255",
"--dark-green0": "0,31,18",
"--dark-green5": "0,48,29",
"--dark-green10": "1,70,42",
"--dark-green15": "2,82,48",
"--dark-green20": "2,92,55",
"--dark-green30": "6,112,68",
"--dark-green40": "11,133,82",
"--dark-green50": "21,153,98",
"--dark-green60": "39,173,117",
"--dark-green70": "68,194,141",
"--dark-green80": "111,214,171",
"--dark-green90": "171,235,208",
"--dark-green100": "245,255,251",
"--dark-orange0": "51,13,0",
"--dark-orange5": "79,20,0",
"--dark-orange10": "107,28,1",
"--dark-orange15": "131,36,2",
"--dark-orange20": "155,44,4",
"--dark-orange30": "189,59,9",
"--dark-orange40": "213,76,18",
"--dark-orange50": "230,96,32",
"--dark-orange60": "240,120,54",
"--dark-orange70": "248,150,86",
"--dark-orange80": "252,185,131",
"--dark-orange90": "254,219,185",
"--dark-orange100": "255,250,245",
"--dark-gray0": "10,11,13",
"--dark-gray5": "20,21,25",
"--dark-gray10": "30,32,37",
"--dark-gray15": "40,43,49",
"--dark-gray20": "50,53,61",
"--dark-gray30": "70,75,85",
"--dark-gray40": "91,97,110",
"--dark-gray50": "114,120,134",
"--dark-gray60": "138,145,158",
"--dark-gray70": "165,170,182",
"--dark-gray80": "193,198,207",
"--dark-gray90": "224,226,231",
"--dark-gray100": "255,255,255",
"--dark-indigo0": "8,15,51",
"--dark-indigo5": "14,27,91",
"--dark-indigo10": "21,39,130",
"--dark-indigo15": "27,47,154",
"--dark-indigo20": "33,56,177",
"--dark-indigo30": "48,73,206",
"--dark-indigo40": "68,92,225",
"--dark-indigo50": "92,113,238",
"--dark-indigo60": "121,138,245",
"--dark-indigo70": "153,165,250",
"--dark-indigo80": "187,194,253",
"--dark-indigo90": "219,223,255",
"--dark-indigo100": "246,247,255",
"--dark-pink0": "51,10,44",
"--dark-pink5": "70,14,61",
"--dark-pink10": "89,19,78",
"--dark-pink15": "108,24,94",
"--dark-pink20": "126,30,111",
"--dark-pink30": "159,44,142",
"--dark-pink40": "187,64,170",
"--dark-pink50": "208,88,193",
"--dark-pink60": "225,117,214",
"--dark-pink70": "237,149,230",
"--dark-pink80": "246,184,243",
"--dark-pink90": "252,217,251",
"--dark-pink100": "255,245,255",
"--dark-purple0": "25,13,51",
"--dark-purple5": "43,22,89",
"--dark-purple10": "73,30,137",
"--dark-purple15": "97,37,175",
"--dark-purple20": "123,45,211",
"--dark-purple30": "142,51,234",
"--dark-purple40": "164,84,244",
"--dark-purple50": "188,123,251",
"--dark-purple60": "205,153,253",
"--dark-purple70": "217,176,254",
"--dark-purple80": "230,201,255",
"--dark-purple90": "237,217,255",
"--dark-purple100": "251,247,255",
"--dark-red0": "51,0,4",
"--dark-red5": "79,0,7",
"--dark-red10": "107,1,10",
"--dark-red15": "131,4,14",
"--dark-red20": "155,7,19",
"--dark-red30": "189,19,33",
"--dark-red40": "213,38,52",
"--dark-red50": "230,64,78",
"--dark-red60": "240,97,109",
"--dark-red70": "248,134,144",
"--dark-red80": "252,174,181",
"--dark-red90": "254,213,216",
"--dark-red100": "255,245,246",
"--dark-teal0": "0,20,38",
"--dark-teal5": "0,32,59",
"--dark-teal10": "0,45,79",
"--dark-teal15": "0,58,99",
"--dark-teal20": "0,72,118",
"--dark-teal30": "0,99,153",
"--dark-teal40": "0,125,182",
"--dark-teal50": "0,149,205",
"--dark-teal60": "0,170,223",
"--dark-teal70": "6,190,236",
"--dark-teal80": "69,217,245",
"--dark-teal90": "149,239,251",
"--dark-teal100": "240,254,255",
"--dark-yellow0": "27,6,0",
"--dark-yellow5": "49,17,0",
"--dark-yellow10": "81,40,0",
"--dark-yellow15": "96,48,0",
"--dark-yellow20": "115,64,0",
"--dark-yellow30": "147,96,0",
"--dark-yellow40": "175,128,0",
"--dark-yellow50": "199,158,0",
"--dark-yellow60": "222,189,23",
"--dark-yellow70": "229,205,48",
"--dark-yellow80": "242,222,94",
"--dark-yellow90": "255,240,145",
"--dark-yellow100": "255,252,241",
"--dark-chartreuse0": "5,22,14",
"--dark-chartreuse5": "14,54,29",
"--dark-chartreuse10": "21,79,34",
"--dark-chartreuse15": "29,103,36",
"--dark-chartreuse20": "45,128,40",
"--dark-chartreuse30": "73,152,54",
"--dark-chartreuse40": "107,176,73",
"--dark-chartreuse50": "123,200,105",
"--dark-chartreuse60": "140,209,136",
"--dark-chartreuse70": "158,217,163",
"--dark-chartreuse80": "178,222,188",
"--dark-chartreuse90": "209,238,220",
"--dark-chartreuse100": "245,255,250",
"--lightColor-fg": "rgb(10,11,13)",
"--lightColor-fgMuted": "rgb(91,97,110)",
"--lightColor-fgInverse": "rgb(255,255,255)",
"--lightColor-fgPrimary": "rgb(0,82,255)",
"--lightColor-fgWarning": "rgb(207,71,14)",
"--lightColor-fgPositive": "rgb(9,133,81)",
"--lightColor-fgNegative": "rgb(207,32,47)",
"--lightColor-bg": "rgb(255,255,255)",
"--lightColor-bgAlternate": "rgb(238,240,243)",
"--lightColor-bgInverse": "rgb(10,11,13)",
"--lightColor-bgOverlay": "rgba(50,53,61,0.33)",
"--lightColor-bgPrimary": "rgb(0,82,255)",
"--lightColor-bgPrimaryWash": "rgb(245,248,255)",
"--lightColor-bgSecondary": "rgb(238,240,243)",
"--lightColor-bgTertiary": "rgb(206,210,219)",
"--lightColor-bgSecondaryWash": "rgb(247,248,249)",
"--lightColor-bgNegative": "rgb(207,32,47)",
"--lightColor-bgNegativeWash": "rgb(255,245,246)",
"--lightColor-bgPositive": "rgb(9,133,81)",
"--lightColor-bgPositiveWash": "rgb(245,255,251)",
"--lightColor-bgWarning": "rgb(207,71,14)",
"--lightColor-bgWarningWash": "rgb(255,250,245)",
"--lightColor-currentColor": "currentColor",
"--lightColor-bgLine": "rgba(91,97,110,0.2)",
"--lightColor-bgLineHeavy": "rgba(91,97,110,0.66)",
"--lightColor-bgLineInverse": "rgb(255,255,255)",
"--lightColor-bgLinePrimary": "rgb(0,82,255)",
"--lightColor-bgLinePrimarySubtle": "rgb(115,162,255)",
"--lightColor-bgElevation1": "rgb(255,255,255)",
"--lightColor-bgElevation2": "rgb(255,255,255)",
"--lightColor-accentSubtleGreen": "rgb(245,255,251)",
"--lightColor-accentBoldGreen": "rgb(9,133,81)",
"--lightColor-accentSubtleBlue": "rgb(245,248,255)",
"--lightColor-accentBoldBlue": "rgb(0,82,255)",
"--lightColor-accentSubtlePurple": "rgb(251,247,255)",
"--lightColor-accentBoldPurple": "rgb(90,48,173)",
"--lightColor-accentSubtleYellow": "rgb(255,252,241)",
"--lightColor-accentBoldYellow": "rgb(247,210,26)",
"--lightColor-accentSubtleRed": "rgb(255,245,246)",
"--lightColor-accentBoldRed": "rgb(207,32,47)",
"--lightColor-accentSubtleGray": "rgb(238,240,243)",
"--lightColor-accentBoldGray": "rgb(50,53,61)",
"--lightColor-transparent": "rgba(255,255,255,0)",
"--darkColor-fg": "rgb(255,255,255)",
"--darkColor-fgInverse": "rgb(10,11,13)",
"--darkColor-fgMuted": "rgb(138,145,158)",
"--darkColor-fgPrimary": "rgb(87,139,250)",
"--darkColor-fgPositive": "rgb(39,173,117)",
"--darkColor-fgNegative": "rgb(240,97,109)",
"--darkColor-fgWarning": "rgb(248,150,86)",
"--darkColor-bg": "rgb(10,11,13)",
"--darkColor-bgAlternate": "rgb(20,21,25)",
"--darkColor-bgInverse": "rgb(255,255,255)",
"--darkColor-bgOverlay": "rgba(10,11,13,0.33)",
"--darkColor-bgPrimary": "rgb(87,139,250)",
"--darkColor-bgPrimaryWash": "rgb(0,16,51)",
"--darkColor-bgSecondary": "rgb(40,43,49)",
"--darkColor-bgTertiary": "rgb(50,53,61)",
"--darkColor-bgSecondaryWash": "rgb(20,21,25)",
"--darkColor-bgNegative": "rgb(240,97,109)",
"--darkColor-bgNegativeWash": "rgb(51,0,4)",
"--darkColor-bgPositive": "rgb(39,173,117)",
"--darkColor-bgPositiveWash": "rgb(0,31,18)",
"--darkColor-bgWarning": "rgb(240,120,54)",
"--darkColor-bgWarningWash": "rgb(51,13,0)",
"--darkColor-currentColor": "currentColor",
"--darkColor-bgLine": "rgba(138,145,158,0.2)",
"--darkColor-bgLineInverse": "rgb(10,11,13)",
"--darkColor-bgLineHeavy": "rgba(138,145,158,0.66)",
"--darkColor-bgLinePrimary": "rgb(87,139,250)",
"--darkColor-bgLinePrimarySubtle": "rgb(5,59,177)",
"--darkColor-bgElevation1": "rgb(20,21,25)",
"--darkColor-bgElevation2": "rgb(30,32,37)",
"--darkColor-accentSubtleGreen": "rgb(0,31,18)",
"--darkColor-accentBoldGreen": "rgb(39,173,117)",
"--darkColor-accentSubtleBlue": "rgb(0,16,51)",
"--darkColor-accentBoldBlue": "rgb(55,115,245)",
"--darkColor-accentSubtlePurple": "rgb(25,13,51)",
"--darkColor-accentBoldPurple": "rgb(230,201,255)",
"--darkColor-accentSubtleYellow": "rgb(27,6,0)",
"--darkColor-accentBoldYellow": "rgb(147,96,0)",
"--darkColor-accentSubtleRed": "rgb(51,0,4)",
"--darkColor-accentBoldRed": "rgb(240,97,109)",
"--darkColor-accentSubtleGray": "rgb(30,32,37)",
"--darkColor-accentBoldGray": "rgb(193,198,207)",
"--darkColor-transparent": "rgba(10,11,13,0)",
"--space-0": "0px",
"--space-1": "8px",
"--space-2": "16px",
"--space-3": "24px",
"--space-4": "32px",
"--space-5": "40px",
"--space-6": "48px",
"--space-7": "56px",
"--space-8": "64px",
"--space-9": "72px",
"--space-10": "80px",
"--space-0_25": "2px",
"--space-0_5": "4px",
"--space-0_75": "6px",
"--space-1_5": "12px",
"--borderWidth-0": "0px",
"--borderWidth-100": "1px",
"--borderWidth-200": "2px",
"--borderWidth-300": "4px",
"--borderWidth-400": "6px",
"--borderWidth-500": "8px",
"--borderRadius-0": "0px",
"--borderRadius-100": "4px",
"--borderRadius-200": "8px",
"--borderRadius-300": "12px",
"--borderRadius-400": "16px",
"--borderRadius-500": "24px",
"--borderRadius-600": "32px",
"--borderRadius-700": "40px",
"--borderRadius-800": "48px",
"--borderRadius-900": "56px",
"--borderRadius-1000": "100000px",
"--iconSize-xs": "12px",
"--iconSize-s": "16px",
"--iconSize-m": "24px",
"--iconSize-l": "32px",
"--avatarSize-s": "16px",
"--avatarSize-m": "24px",
"--avatarSize-l": "32px",
"--avatarSize-xl": "40px",
"--avatarSize-xxl": "48px",
"--avatarSize-xxxl": "56px",
"--controlSize-checkboxSize": "20px",
"--controlSize-radioSize": "20px",
"--controlSize-switchWidth": "52px",
"--controlSize-switchHeight": "32px",
"--controlSize-switchThumbSize": "30px",
"--controlSize-tileSize": "106px",
"--fontFamily-display1": "var(--defaultFont-sans)",
"--fontFamily-display2": "var(--defaultFont-sans)",
"--fontFamily-display3": "var(--defaultFont-sans)",
"--fontFamily-title1": "var(--defaultFont-sans)",
"--fontFamily-title2": "var(--defaultFont-sans)",
"--fontFamily-title3": "var(--defaultFont-sans)",
"--fontFamily-title4": "var(--defaultFont-sans)",
"--fontFamily-headline": "var(--defaultFont-sans)",
"--fontFamily-body": "var(--defaultFont-sans)",
"--fontFamily-label1": "var(--defaultFont-sans)",
"--fontFamily-label2": "var(--defaultFont-sans)",
"--fontFamily-caption": "var(--defaultFont-sans)",
"--fontFamily-legal": "var(--defaultFont-sans)",
"--fontFamilyMono-display1": "var(--defaultFont-mono)",
"--fontFamilyMono-display2": "var(--defaultFont-mono)",
"--fontFamilyMono-display3": "var(--defaultFont-mono)",
"--fontFamilyMono-title1": "var(--defaultFont-mono)",
"--fontFamilyMono-title2": "var(--defaultFont-mono)",
"--fontFamilyMono-title3": "var(--defaultFont-mono)",
"--fontFamilyMono-title4": "var(--defaultFont-mono)",
"--fontFamilyMono-headline": "var(--defaultFont-mono)",
"--fontFamilyMono-body": "var(--defaultFont-mono)",
"--fontFamilyMono-label1": "var(--defaultFont-mono)",
"--fontFamilyMono-label2": "var(--defaultFont-mono)",
"--fontFamilyMono-caption": "var(--defaultFont-mono)",
"--fontFamilyMono-legal": "var(--defaultFont-mono)",
"--fontSize-display1": "4rem",
"--fontSize-display2": "3rem",
"--fontSize-display3": "2.5rem",
"--fontSize-title1": "1.75rem",
"--fontSize-title2": "1.75rem",
"--fontSize-title3": "1.25rem",
"--fontSize-title4": "1.25rem",
"--fontSize-headline": "1rem",
"--fontSize-body": "1rem",
"--fontSize-label1": "0.875rem",
"--fontSize-label2": "0.875rem",
"--fontSize-caption": "0.8125rem",
"--fontSize-legal": "0.8125rem",
"--fontWeight-display1": "400",
"--fontWeight-display2": "400",
"--fontWeight-display3": "400",
"--fontWeight-title1": "600",
"--fontWeight-title2": "400",
"--fontWeight-title3": "600",
"--fontWeight-title4": "400",
"--fontWeight-headline": "600",
"--fontWeight-body": "400",
"--fontWeight-label1": "600",
"--fontWeight-label2": "400",
"--fontWeight-caption": "600",
"--fontWeight-legal": "400",
"--lineHeight-display1": "4.5rem",
"--lineHeight-display2": "3.5rem",
"--lineHeight-display3": "3rem",
"--lineHeight-title1": "2.25rem",
"--lineHeight-title2": "2.25rem",
"--lineHeight-title3": "1.75rem",
"--lineHeight-title4": "1.75rem",
"--lineHeight-headline": "1.5rem",
"--lineHeight-body": "1.5rem",
"--lineHeight-label1": "1.25rem",
"--lineHeight-label2": "1.25rem",
"--lineHeight-caption": "1rem",
"--lineHeight-legal": "1rem",
"--textTransform-display1": "none",
"--textTransform-display2": "none",
"--textTransform-display3": "none",
"--textTransform-title1": "none",
"--textTransform-title2": "none",
"--textTransform-title3": "none",
"--textTransform-title4": "none",
"--textTransform-headline": "none",
"--textTransform-body": "none",
"--textTransform-label1": "none",
"--textTransform-label2": "none",
"--textTransform-caption": "uppercase",
"--textTransform-legal": "none",
"--shadow-elevation1": "0px 8px 12px rgba(0, 0, 0, 0.12)",
"--shadow-elevation2": "0px 8px 24px rgba(0, 0, 0, 0.12)"
}
CSS Variable inheritance
When ThemeProviders are nested, the nested provider only sets CSS variables that differ from its parent. Unchanged values are inherited through the DOM via normal CSS custom property inheritance.
This optimization breaks when a ThemeProvider renders outside its parent's DOM tree — for example, inside a portal — because CSS inheritance requires DOM ancestry. In these cases, use the isolated prop to ensure the ThemeProvider writes all CSS variables:
<ThemeProvider isolated theme={theme} activeColorScheme="light">
{/* All CSS variables are written, regardless of the parent theme */}
</ThemeProvider>
Tip
CDS overlay components (Modal, Toast, Alert, etc.) handle this automatically via PortalProvider. You only need the isolated prop when rendering a ThemeProvider inside a custom portal that is not managed by CDS.
ThemeProvider classnames
The ThemeProvider renders with CSS classnames based on the activeColorScheme and the theme's id.
This allows you to style components based on the activeColorScheme or the theme's id.
// Renders with a .cds-default class and a .light class
<ThemeProvider theme={defaultTheme} activeColorScheme="light" />
Nested themes
ThemeProviders can be nested to create theme overrides for specific sections.
<ThemeProvider theme={defaultTheme} activeColorScheme="light">
{/* Default theme in light color scheme */}
<ThemeProvider theme={customTheme} activeColorScheme="dark">
{/* Custom theme in dark color scheme */}
</ThemeProvider>
</ThemeProvider>
Overriding theme values
When nesting, you may want to override specific color values from the current theme. Overrides must be conditionally applied because we don't enforce that a theme has both light and dark colors defined.
// Override parts of the parent theme
const theme = useTheme();
const customTheme = {
...theme,
...(theme.lightColor &&
theme.lightSpectrum && {
lightColor: {
...theme.lightColor,
bg: `rgb(${theme.lightSpectrum.orange50})`,
bgPrimary: `rgb(${theme.lightSpectrum.red20})`,
bgSecondary: `rgb(${theme.lightSpectrum.blue50})`,
},
}),
...(theme.darkColor &&
theme.darkSpectrum && {
darkColor: {
...theme.darkColor,
bg: `rgb(${theme.darkSpectrum.orange50})`,
bgPrimary: `rgb(${theme.darkSpectrum.red20})`,
bgSecondary: `rgb(${theme.darkSpectrum.blue50})`,
},
}),
} as const satisfies Theme;
Theme inheritance
Nested ThemeProviders do not automatically inherit the theme from their parent provider. You can manually inherit the theme with the useTheme hook.
const Example = () => {
// Pass the parent theme down to another ThemeProvider
const theme = useTheme();
return (
<ThemeProvider theme={theme} activeColorScheme={theme.activeColorScheme}>
{children}
</ThemeProvider>
);
};
InvertedThemeProvider component
The InvertedThemeProvider automatically inherits from its parent theme and flips the activeColorScheme to the opposite value.
Loading...
Live Code<ThemeProvider theme={defaultTheme} activeColorScheme="light"> {/* Default theme in light color scheme */} <Box background="bg" padding={2} borderRadius={400}> <Button>Hello world!</Button> </Box> <InvertedThemeProvider> {/* Default theme in inverse (dark) color scheme */} <Box background="bg" padding={2} borderRadius={400}> <Button>Hello world!</Button> </Box> </InvertedThemeProvider> </ThemeProvider>