GeorgeSG/lovelace-time-picker-card
1
0
Fork 0
mirror of https://github.com/GeorgeSG/lovelace-time-picker-card.git synced 2026-09-06 02:18:44 +00:00
Code Issues Projects Releases Wiki Activity

Update default colors and variables

Browse Source
This commit is contained in:
GeorgeSG
2020-05-07 20:37:33 +03:00
parent 2791d8109c
commit c646fc9c9e
6 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+10 -6
View File
@@ -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
examples/default_with_name.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 16 KiB

examples/default_without_name.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 16 KiB

examples/single_hour_mode.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 14 KiB

src/components/time-period.component.ts
+3 -3
View File
@@ -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;
src/time-picker-card.ts
+3 -2
View File
@@ -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 {