I'm currently grappling with understanding why my alterations to the system colors aren't reflecting as expected.
When viewing in Chrome, this is the image I see.
https://i.sstatic.net/H6YbW.png
However, this is what I anticipate should be visible.
https://i.sstatic.net/Jncdj.png
In my Angular project, I have three files: variables.scss, bootstrap.scss, and branding.scss. Below is how they are imported in the main styles.scss file.
This is my import list.
@import "styles/variables";
@import "../../../node_modules/bootstrap/scss/bootstrap";
@import "styles/branding";
A snippet of my variables file:
/* =====================================
General Colours
===================================== */
$color-black: rgb(0,0,0);
$color-white: rgb(255,255,255);
...
/* System Tints
===================================== */
$color-lm-blue: #007AFF;
$color-lm-green: #34C759;
$color-lm-indigo: #5856D6;
Finally, here is my branding.scss content:
:root {
...
}
html,
body {
background-color: var(--bg-primary-color);
color: var(--color-text);
}
/* Button Classes
===================================== */
...
I'm baffled by why the changes are not being applied. Upon inspecting with Chrome's developer tools, I noticed a discrepancy in the button class appearance.
Here is the button class image:
https://i.sstatic.net/Nbj8j.png
And here is Bootstrap's colors:
https://i.sstatic.net/NXonE.png
While I plan on incorporating light and dark themes in the future, that's a project for later. Any assistance would be greatly appreciated.