<cssvar-input>

Web Components to change your CSS variables on the fly

Demo

Use Cases

• Generators (e.g. Background generator)
• User themeing
• Plugin to color picker
• Building no code solutions

This webcomponent follows the open-wc recommendation.

Installation

npm i cssvar-input

Usage

Numeric Input

Input with numeric value, followed by unit of measurement. e.g. 4px

<script type="module">import 'cssvar-input/cssvar-numeric.js';</script>
<cssvar-numeric propertyName="CSS_VAR_NAME"></cssvar-numeric>

Color Input

Color based input. Accepts valid CSS colors

<script type="module">import 'cssvar-input/cssvar-color.js';</script>
<cssvar-color propertyName="CSS_VAR_NAME"></cssvar-color>

Theming

Possible theme values

{
  /* Color of label and focus highlight on input fields */
  --theme-color: rgb(49, 130, 206);

  /* Themeing of the input elements */
  --border-color: #E2E8F0;
  --border-radius: 6px;
  --input-padding: 6px;
}

Linting and formatting

To scan the project for linting and formatting errors, run

npm run lint

To automatically fix linting and formatting errors, run

npm run format

Local Demo with web-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html