CSS
The button works, but its color stays gray. Help me find which style is overriding the theme color.
The button works, but its color stays gray. Help me find which style is overriding the theme color.
.primary { background: #4338ca; }.toolbar button { background: #767676; }.toolbar .primary { background: #4338ca; }background: #4338caFinal value comes from the primary ruleFirst check which rules match: A selector decides whether a rule applies to an element. A button may match general button, page-region, and themed-button rules at the same time.
Then see which declaration wins: Matching scope, priority, and source order all affect the result. DevTools Styles and Computed panels show crossed-out declarations and the final value.
Inspect the CSS rules matched by this primary button and its final computed style. Find which gray declaration overrides the theme color. Preserve the HTML structure and click behavior, fix only the styling, and verify the color, layout, and overflow at desktop and 390px widths.
Build in 3D. Put your computer to work.