CSS and themes.

Added `Theme Variables` and `CSS Elements` to documentation.
Renamed `custom-bar-card-color` theme variable to `bar-card-color`.
Removed unused element.

README.md

@@ -72,6 +72,36 @@ Bar Card is a customizable animated card for the Home Assistant Lovelace front-e
 | minmax | string | off | `inside`, `outside`, `off`
 | value | string | inside | `inside`, `outside`, `off`
 
+## Theme Variables
+
+| Name | Description
+| ---- | ----
+| bar-card-color | Defines the default bar color.
+| bar-card-border-radius | Defines the border radius of the bar.
+| bar-card-disabled-color | Defines the bar color when state is `unavailable`.
+
+## CSS Elements
+
+| Name | Description
+| ---- | ----
+| bar-card-card | The root bar of each defined entity containing all elements.
+| bar-card-background | Contains bar and any elements `outside` of the bar.
+| bar-card-backgroundbar | The background of the bar.
+| bar-card-current | The filled part of the bar.
+| bar-card-contentbar | Contains all elements `inside` of the bar.
+| ha-icon | Icon element.
+| bar-card-iconbar | Contains ha-icon.
+| bar-card-title | Title element.
+| bar-card-minvalue | Min value element.
+| bar-card-divider | Min/Max divider element.
+| bar-card-maxvalue | Max value element.
+| bar-card-value | Value element.
+| bar-card-animationbar | Animated part of the bar.
+| bar-card-targetbar | Target bar element.
+| bar-card-targetmarker | Target marker element.
+| bar-card-indicator | Indicator element.
+
+
 ## Installation
 
 Prefered method of installation is [Home Assistant Community Store](https://github.com/hacs/integration).

src/bar-card.ts

@@ -53,7 +53,7 @@ class BarCard extends HTMLElement {
         delay: 5000,
         speed: 1000
       },
-      color: 'var(--custom-bar-card-color, var(--primary-color))',
+      color: 'var(--bar-card-color, var(--primary-color))',
       decimal: false,
       direction: 'right',
       height: '40px',
@@ -236,8 +236,6 @@ class BarCard extends HTMLElement {
     iconBar.id = 'iconBar_' + id;
     const title = document.createElement('bar-card-title');
     title.id = 'title_' + id;
-    const titleBar = document.createElement('bar-card-titlebar');
-    titleBar.id = 'titleBar_' + id;
     const minValue = document.createElement('bar-card-minvalue');
     minValue.id = 'minValue_' + id;
     const divider = document.createElement('bar-card-divider');
@@ -247,9 +245,9 @@ class BarCard extends HTMLElement {
     maxValue.id = 'maxValue_' + id;
     const value = document.createElement('bar-card-value');
     value.id = 'value_' + id;
-    const animationBar = document.createElement('bar-card-animationBar');
+    const animationBar = document.createElement('bar-card-animationbar');
     animationBar.id = 'animationBar_' + id;
-    const targetBar = document.createElement('bar-card-targetBar');
+    const targetBar = document.createElement('bar-card-targetbar');
     targetBar.id = 'targetBar_' + id;
     const targetMarker = document.createElement('bar-card-targetmarker');
     targetMarker.id = 'targetMarker_' + id;