I recommend reading the color system documentation from the main material design website for a better understanding of the color system.
Material design provides a default color palette that has 256 colors for you to pick and choose from, but you are not required to use this color palette within react-md
. This number might seem overwhelming at first, but you will never need all the colors at once and will primarily only use 3 to 6 colors. Every color will be exported as a Sass variable so you can easily use them within your stylesheets, but they will also be included in the scssVariables
bundle at @react-md/theme/dist/scssVariables
if you'd like to access them in javascript.
All the colors will be available below showing their Sass variable name as well as the hex value. When accessing the colors in javascript, you can extract all the colors with the following snippet:
import scssVariables from "@react-md/theme/dist/scssVariables";
// get all the colors from the color palette
// only the color variables in this package will not be prefixed
// with rmd-theme
const colorKeys = Object.keys(scssVariables).filter(
name => !/^rmd-theme/.test(name)
);