jaohara / ui-component-library

A Component library for various UI elements that I have built for use in my personal projects.
0 stars 0 forks source link

Implement changeable primary UI color #8

Open jaohara opened 7 months ago

jaohara commented 7 months ago

This would change the highlight color of the buttons, links, etc.

: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.