docs/customization/theme.md

110 variable will change the background color for the following elements:
122 The semantic naming of this variable identifies its purpose. This color should
129 Supporting a different color palette is a simple process. The default color
130 palette is supported using the Sass variables outlined in the color guidelines
131 and color maps outlined in the theme's overview. The following sections provide
138 overrides. There are three Sass maps created to establish the color palette.
139 These include the `color` map, `theme-color` map, and `gray` map. These maps are
147 Adding, removing, or updating the color variables and map is how the application
148 color palette can be customized. Using these variables outside of the helper
152 The `color` map is not as important as the `theme-color` map. A tight-coupling
153 of the Sass variable name to the color name makes it hard to use the `color` map
159 The theme color variables and the `theme-color` map consist of a subset of the
160 color variables. This smaller color palette creates a scheme that is not
162 `theme-color` map keys are required to generate the CSS styles. The OpenBMC Web
163 UI `theme-color` map has the same keys as the Bootstrap `theme-color` map with
166 The `theme-color` map is used heavily throughout the application. The
167 Bootstrap-Vue components `variant` prop also utilizes the `theme-color` map.
168 This map is the key to customizing the application's color palette. Take a look
169 at the [color guidelines](/guide/guidelines/colors) to better understand default
174 The gray color palette contains nine shades of gray that range from light to
175 dark. Bootstrap sets a default gray color value for each color variable from
177 `$gray-300` through `gray-900`. Bootstrap does not create a color map for any of
178 the colors except gray. The Bootstrap documentation indicates that adding color
180 The OpenBMC Web UI color theme overrides all shades of the Bootstrap default
183 …earn more about Bootstrap colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color)
187 - `color('<color map key>)`
188 - `theme-color('<theme color map key>)`
189 - `gray('<gray color palette key'>)`
195   color: color("blue");
196   background: theme-color("light");