Theme Widget README

This repository contains a custom theme widget that provides a user-friendly interface for adjusting various design elements of your application's theme. The widget is designed to facilitate easy customization of color variables in you application. This widget is developed to provide sales personal with a visual tool, that they can use when showing themes to a client.

Usage

To integrate the theme widget into your project, follow these steps:

1. Include the necessary files in your project's source code.

2. Place the <theme-widget> tag in your HTML file where you want the widget to appear.

3. Customize the theme using the widget's interface. It provides the following options:

<theme-widget>
  <widget-group title="Darkmode">
    <darkmode-switch ></darkmode-switch>
  </widget-group>
  <widget-group title="Primary colors">
    <color-picker variableName="--color-primary-light" color="#5c43b6"></color-picker>
    <color-picker variableName="--color-primary-dark" color="#603eda"></color-picker>
    <color-picker variableName="--color-primary" color="#3e2a89"></color-picker>
  </widget-group>
  <widget-group title="Secondary colors">
    <color-picker variableName="--color-secondary-light" color="#c7c7c7"></color-picker>
    <color-picker variableName="--color-secondary-dark" color="#5c5c5c"></color-picker>
    <color-picker variableName="--color-secondary" color="#878787"></color-picker>
  </widget-group>
</theme-widget>

4. Add ?theme parmeter to your URL to active the widget.

5. Enjoy the flexibility and convenience of updating your application's theme on-the-fly using the theme widget!

Contributions

Contributions are welcome! If you have any improvements or suggestions for the theme widget, please open an issue or submit a pull request.

License

This project is licensed under the MIT License.