Theming

I used CSS variables to style each component with a fallback value. What this means is that you can directly use the component without any theming if you like the blue theme that I followed. Or you can choose to override them by setting values to each of these variable in :root selector.

Example

:root {
    --primary: darkorange;
    --primary-light: orange;
}
Copy

Further, these variables can also be overriden at a block level.

Example

.block {
    --primary: darkgreen;
    --primary-light: green;
}
Copy

You can also style each component by passing a style prop or if you like you can set a className and then override style to these class. This should work fine for small tweaks like overriding width of the component. But if you want to do it for a lot of styles, your code quality may take a hit. For such cases refer our extending styles guide.

CodeSandbox

URL: https://codesandbox.io/s/theming-etdbq?file=/src/ItemCard.js

It showcases following features:

• How easy it is to apply custom theme to the components at various levels.
• Each component plays nicely with one another and can be customized easily.
• The DOM is also comparitively clean as only required nodes are mounted.

CSS Color Variables

--primary

--primary-light

--primary-lighter

--backdrop-color

--info

--info-light

--success

--success-light

--warning

--warning-light

--error

--error-light

--border-color

--toast

--disabled

--tooltip-color

--disabled-border

--light-grey

--border-light-color

--disabled-background

--background

CSS Shadow Variables

--shadow

--hover-shadow

--modal-shadow