ThemeProvider
Provides the theme context to all child components, and automatically generates CSS Variables for dynamic theming.@coinbase/cds-web@8.13.6
ImportSourceView source codeStorybookView Storybook
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.
ThemeProvider CSS Variables
CSS Variables are created for every value in the theme.
For best performance, prefer to use 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(237,112,47)",
"--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(199,158,0)",
"--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)"
}
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>
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 inheritence
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>