Background Color
Class | Properties | |
---|---|---|
t.bgTransparent | backgroundColor: 'transparent' | |
t.bgBlack | backgroundColor: '#000' | |
t.bgWhite | backgroundColor: '#fff' | |
t.bgGray100 | backgroundColor: '#f7fafc' | |
t.bgGray200 | backgroundColor: '#edf2f7' | |
t.bgGray300 | backgroundColor: '#e2e8f0' | |
t.bgGray400 | backgroundColor: '#cbd5e0' | |
t.bgGray500 | backgroundColor: '#a0aec0' | |
t.bgGray600 | backgroundColor: '#718096' | |
t.bgGray700 | backgroundColor: '#4a5568' | |
t.bgGray800 | backgroundColor: '#2d3748' | |
t.bgGray900 | backgroundColor: '#1a202c' | |
t.bgRed100 | backgroundColor: '#fff5f5' | |
t.bgRed200 | backgroundColor: '#fed7d7' | |
t.bgRed300 | backgroundColor: '#feb2b2' | |
t.bgRed400 | backgroundColor: '#fc8181' | |
t.bgRed500 | backgroundColor: '#f56565' | |
t.bgRed600 | backgroundColor: '#e53e3e' | |
t.bgRed700 | backgroundColor: '#c53030' | |
t.bgRed800 | backgroundColor: '#9b2c2c' | |
t.bgRed900 | backgroundColor: '#742a2a' | |
t.bgOrange100 | backgroundColor: '#fffaf0' | |
t.bgOrange200 | backgroundColor: '#feebc8' | |
t.bgOrange300 | backgroundColor: '#fbd38d' | |
t.bgOrange400 | backgroundColor: '#f6ad55' | |
t.bgOrange500 | backgroundColor: '#ed8936' | |
t.bgOrange600 | backgroundColor: '#dd6b20' | |
t.bgOrange700 | backgroundColor: '#c05621' | |
t.bgOrange800 | backgroundColor: '#9c4221' | |
t.bgOrange900 | backgroundColor: '#7b341e' | |
t.bgYellow100 | backgroundColor: '#fffff0' | |
t.bgYellow200 | backgroundColor: '#fefcbf' | |
t.bgYellow300 | backgroundColor: '#faf089' | |
t.bgYellow400 | backgroundColor: '#f6e05e' | |
t.bgYellow500 | backgroundColor: '#ecc94b' | |
t.bgYellow600 | backgroundColor: '#d69e2e' | |
t.bgYellow700 | backgroundColor: '#b7791f' | |
t.bgYellow800 | backgroundColor: '#975a16' | |
t.bgYellow900 | backgroundColor: '#744210' | |
t.bgGreen100 | backgroundColor: '#f0fff4' | |
t.bgGreen200 | backgroundColor: '#c6f6d5' | |
t.bgGreen300 | backgroundColor: '#9ae6b4' | |
t.bgGreen400 | backgroundColor: '#68d391' | |
t.bgGreen500 | backgroundColor: '#48bb78' | |
t.bgGreen600 | backgroundColor: '#38a169' | |
t.bgGreen700 | backgroundColor: '#2f855a' | |
t.bgGreen800 | backgroundColor: '#276749' | |
t.bgGreen900 | backgroundColor: '#22543d' | |
t.bgTeal100 | backgroundColor: '#e6fffa' | |
t.bgTeal200 | backgroundColor: '#b2f5ea' | |
t.bgTeal300 | backgroundColor: '#81e6d9' | |
t.bgTeal400 | backgroundColor: '#4fd1c5' | |
t.bgTeal500 | backgroundColor: '#38b2ac' | |
t.bgTeal600 | backgroundColor: '#319795' | |
t.bgTeal700 | backgroundColor: '#2c7a7b' | |
t.bgTeal800 | backgroundColor: '#285e61' | |
t.bgTeal900 | backgroundColor: '#234e52' | |
t.bgBlue100 | backgroundColor: '#ebf8ff' | |
t.bgBlue200 | backgroundColor: '#bee3f8' | |
t.bgBlue300 | backgroundColor: '#90cdf4' | |
t.bgBlue400 | backgroundColor: '#63b3ed' | |
t.bgBlue500 | backgroundColor: '#4299e1' | |
t.bgBlue600 | backgroundColor: '#3182ce' | |
t.bgBlue700 | backgroundColor: '#2b6cb0' | |
t.bgBlue800 | backgroundColor: '#2c5282' | |
t.bgBlue900 | backgroundColor: '#2a4365' | |
t.bgIndigo100 | backgroundColor: '#ebf4ff' | |
t.bgIndigo200 | backgroundColor: '#c3dafe' | |
t.bgIndigo300 | backgroundColor: '#a3bffa' | |
t.bgIndigo400 | backgroundColor: '#7f9cf5' | |
t.bgIndigo500 | backgroundColor: '#667eea' | |
t.bgIndigo600 | backgroundColor: '#5a67d8' | |
t.bgIndigo700 | backgroundColor: '#4c51bf' | |
t.bgIndigo800 | backgroundColor: '#434190' | |
t.bgIndigo900 | backgroundColor: '#3c366b' | |
t.bgPurple100 | backgroundColor: '#faf5ff' | |
t.bgPurple200 | backgroundColor: '#e9d8fd' | |
t.bgPurple300 | backgroundColor: '#d6bcfa' | |
t.bgPurple400 | backgroundColor: '#b794f4' | |
t.bgPurple500 | backgroundColor: '#9f7aea' | |
t.bgPurple600 | backgroundColor: '#805ad5' | |
t.bgPurple700 | backgroundColor: '#6b46c1' | |
t.bgPurple800 | backgroundColor: '#553c9a' | |
t.bgPurple900 | backgroundColor: '#44337a' | |
t.bgPink100 | backgroundColor: '#fff5f7' | |
t.bgPink200 | backgroundColor: '#fed7e2' | |
t.bgPink300 | backgroundColor: '#fbb6ce' | |
t.bgPink400 | backgroundColor: '#f687b3' | |
t.bgPink500 | backgroundColor: '#ed64a6' | |
t.bgPink600 | backgroundColor: '#d53f8c' | |
t.bgPink700 | backgroundColor: '#b83280' | |
t.bgPink800 | backgroundColor: '#97266d' | |
t.bgPink900 | backgroundColor: '#702459' |
Usage
Control the background color of an element using the t.bg{Color}
utilities.