Extending Simple Colors to Custom Elements

You can extend the styles, properties, behaviors of simple colors to any custom element, so that the element can be styled based on its own accent-color and dark attributes.

See SimpleColorsSwatches for a real-world example.

        import { SimpleColors } from "path/to//simple-colors.js"; 
        class MyElement extends SimpleColors {
          static get styles() {
            return [
              super.styles, //required to get colors
              css`
                :host {
                  display: block;
                  /* 
                    example CSS setting the background to the default accent color 
                    and a contrasting greyscale text color 
                  */
                  background-color: var(--simple-colors-default-theme-accent-1);
                  color: var(--simple-colors-default-theme-grey-12);
                  ...
                }`
            ];
          }

          ...

          /**
            * life cycle, element is afixed to the DOM
            */
          constructor() {
            super();
            /* example that make component dark pink by default */
            this.accentColor = "pink";
            this.dark = true;
            ...
          }
          
          ...
        
        export { MyElement };
        
        customElements.define(MyElement.tag, MyElement);