This would change the highlight color of the buttons, links, etc.
This can be handled with CSS variables applied to a :root pseudoclass in a global stylesheet:
:root {
// among other variables:
--primary-color: #007bff;
}
// ---
// In a component:
// ---
button {
background-color: var(--primary-color);
}
By using this approach of defining CSS variables on the root pseudoclass, all other stylesheets will automatically have access to these variables without needing to import them like I'm doing with Sass.
More importantly, these variables can be modified at runtime. I should have a function somewhere in the library that does something like this:
function changePrimaryColor(newColor) {
document.documentElement.style.setProperty('--primary-color', newColor);
};
I need to look more into where this function should live.
This would change the highlight color of the buttons, links, etc.
:root
pseudoclass in a global stylesheet:By using this approach of defining CSS variables on the root pseudoclass, all other stylesheets will automatically have access to these variables without needing to import them like I'm doing with Sass.
More importantly, these variables can be modified at runtime. I should have a function somewhere in the library that does something like this:
I need to look more into where this function should live.