Colors
Customize Colors
The global stylesheet that you imported from bubbles-ui/css/app.css added all of the supported colors as variables. You're able to add a stylesheet after the Bubbles stylesheet to override those styles and add your own.
With the exception of black and white, every color has a base color, three lighter variations, and three darker variations. Below is an example for primary, which you should use in your css as a color variable: color: var(--primary) or background: var(--primary-dark).
| Name | Hex |
|---|---|
| primary-lightest | #DAD6F4 |
| primary-lighter | #B5AEE9 |
| primary-light | #9186DE |
| primary | #6C5DD3 |
| primary-dark | #50459E |
| primary-darker | #352E69 |
| primary-darkest | #1B1734 |
Color Options
Like most kits, Bubbles uses descriptive words for colors that describe the action to which that color will apply. For example the default red color is called error. Below is a list of all of the color variables included with Bubbles.
| Variable | Description | Default |
|---|---|---|
| primary | The main color for buttons, hovers, sidebar | #DAD6F4 |
| secondary | Secondary buttons and colors | #FF98E5 |
| error | Error states on inputs and toasts | #FF6628 |
| warning | Useful to caution a user about something | #FF9F38 |
| success | Used by default for success toasts | #4FBF67 |
| info | Useful for letting users know what is clickable | #355DFF |
| gray | Shades of gray are used everywhere for borders and outlines | #808191 |
| dark | If you want a dark color that isn't black, use dark. | #1B1D21 |