Add readme and examples

README.md

@@ -9,7 +9,17 @@
 
 ## Overview
 
-This is a Time Picker card for Lovelace.
+This is a Time Picker card for [Home Assistant](https://www.home-assistant.io/)'s [Lovelace UI](https://www.home-assistant.io/lovelace).
+
+Requires an [Input Datetime](https://www.home-assistant.io/integrations/input_datetime/) that has time (`has_time: true`).
+
+## Screenshots
+
+![Default theme with card name](examples/default_with_name.png)
+
+![Default theme with no card name](examples/default_without_name.png)
+
+![Cudtom theme ](examples/custom.png)
 
 ## Installation
 
@@ -25,8 +35,42 @@ resources:
 
 ```yaml
 type: 'custom:time-picker-card'
+entity: input_datetime.alarm_time
+name: 'Choose a time'
+hour_mode: 24
+hour_step: 1
+minute_step: 5
+hide:
+  name: false
 ```
 
+## Options
+
+| Name        | Type         | Requirement  | Description                                                                                               | Default                  |
+| ----------- | ------------ | ------------ | --------------------------------------------------------------------------------------------------------- | ------------------------ |
+| type        | string       | **Required** | `custom:time-picker-card`                                                                                 |                          |
+| entity      | string       | **Required** | [Input Datetime](https://www.home-assistant.io/integrations/input_datetime/) entity with `has_time: true` |                          |
+| name        | string       | **Optional** | Card name                                                                                                 | Entity's `friendly_name` |
+| hour_mode   | `12` or `24` | **Optional** | Hour format. If `12`, card will show AM/PM picker                                                         | `24`                     |
+| hour_step   | number       | **Optional** | Hour change when clicking arrows                                                                          | `1`                      |
+| minute_step | number       | **Optional** | Minute change when clicking arrows                                                                        | `5`                      |
+| hide        | object       | **Optional** | Hide object                                                                                               | `none`                   |
+
+## Hide Object
+
+| Name | Type    | Requirement  | Description         | Default |
+| ---- | ------- | ------------ | ------------------- | ------- |
+| name | boolean | **Optional** | Hides the card name | `false` |
+
+## Theme Variables
+
+| Name                            | Default                     | Description                                 |
+| ------------------------------- | --------------------------- | ------------------------------------------- |
+| --tpc-elements-background-color | `var(--dark-primary-color)` | Background colro for header and ui elements |
+| --tpc-icon-color                | `var(--primary-text-color)` | Arrow color                                 |
+| --tpc-text-color                | `var(--primary-text-color)` | Text color                                  |
+| --tpc-accent-color              | `var(--accent-color)`       | AM / PM active color                        |
+
 ## Meta
 
 **Georgi Gardev**

src/time-picker-card.ts

@@ -134,7 +134,7 @@ export class TimePickerCard extends LitElement {
         );
 
         --tpc-icon-color: var(--time-picker-icon-color, var(--primary-text-color));
-        --tpc-text-color: var(--time-picker-text-color, #fff);
+        --tpc-text-color: var(--time-picker-text-color, var(--primary-text-color));
         --tpc-accent-color: var(--time-picker-accent-color, var(--accent-color));
       }