diff --git a/README.md b/README.md
index 2baeead..30b1d70 100644
--- a/README.md
+++ b/README.md
@@ -81,12 +81,16 @@ hide:
 
 ## Theme Variables
 
-| Name                            | Default                     | Description                                 |
-| ------------------------------- | --------------------------- | ------------------------------------------- |
-| --tpc-elements-background-color | `var(--dark-primary-color)` | Background color for header and ui elements |
-| --tpc-icon-color                | `var(--primary-text-color)` | Arrow color                                 |
-| --tpc-text-color                | `white`                     | Text color                                  |
-| --tpc-accent-color              | `var(--accent-color)`       | AM / PM active color                        |
+Time Picker card will automatically pick up colors from your lovelace theme, but if you want to customize some of them,
+you can use the following theme variables:
+
+| Name                                    | Default                      | Description                            |
+| --------------------------------------- | ---------------------------- | -------------------------------------- |
+| --time-picker-elements-background-color | `var(--primary-color)`       | Background color for header and inputs |
+| --time-picker-icon-color                | `var(--primary-text-color)`  | Arrow color                            |
+| --time-picker-text-color                | `white`                      | Text color                             |
+| --time-picker-accent-color              | `var(--accent-color)`        | AM / PM active color                   |
+| --time-picker-off-color                 | `var(--disabled-text-color)` | AM / PM inactive color                 |
 
 ## Meta
 
diff --git a/examples/default_with_name.png b/examples/default_with_name.png
index 8ef2a0c..8fb47b7 100644
Binary files a/examples/default_with_name.png and b/examples/default_with_name.png differ
diff --git a/examples/default_without_name.png b/examples/default_without_name.png
index 4e2eaf4..e9db542 100644
Binary files a/examples/default_without_name.png and b/examples/default_without_name.png differ
diff --git a/examples/single_hour_mode.png b/examples/single_hour_mode.png
index f7df4a5..557bacd 100644
Binary files a/examples/single_hour_mode.png and b/examples/single_hour_mode.png differ
diff --git a/src/components/time-period.component.ts b/src/components/time-period.component.ts
index a5e1ce3..d7d38cd 100644
--- a/src/components/time-period.component.ts
+++ b/src/components/time-period.component.ts
@@ -41,7 +41,7 @@ export class TimePeriodComponent extends LitElement {
   }
 
   private renderSingle(): TemplateResult {
-    return html`<div class="time-period" @click=${this.onTimePeriodChange}>
+    return html`<div class="time-period active" @click=${this.onTimePeriodChange}>
       ${this.period}<mwc-ripple></mwc-ripple>
     </div>`;
   }
@@ -64,8 +64,8 @@ export class TimePeriodComponent extends LitElement {
       .time-period {
         width: 30px;
         padding: 8px;
-        background: var(--tpc-elements-background-color);
-        color: var(--tpc-text-color, #fff);
+        background: var(--tpc-off-color);
+        color: var(--tpc-text-color);
         text-align: center;
         font-size: 1em;
         cursor: pointer;
diff --git a/src/time-picker-card.ts b/src/time-picker-card.ts
index 09ae726..bfea9ca 100644
--- a/src/time-picker-card.ts
+++ b/src/time-picker-card.ts
@@ -131,12 +131,13 @@ export class TimePickerCard extends LitElement {
       :host {
         --tpc-elements-background-color: var(
           --time-picker-elements-background-color,
-          var(--dark-primary-color)
+          var(--primary-color)
         );
 
         --tpc-icon-color: var(--time-picker-icon-color, var(--primary-text-color));
         --tpc-text-color: var(--time-picker-text-color, #fff);
-        --tpc-accent-color: var(--time-picker-accent-color, var(--accent-color));
+        --tpc-accent-color: var(--time-picker-accent-color, var(--primary-color));
+        --tpc-off-color: var(--time-picker-off-color, var(--disabled-text-color));
       }
 
       .time-picker-header {