Theme-widget NPM

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:

Include the necessary files in your project's source code.
Place the <theme-widget> tag in your HTML file where you want the widget to appear.
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>

Add ?theme parmeter to your URL to active the widget.
Enjoy the flexibility and convenience of updating your application's theme on-the-fly using the theme widget!