diff --git a/index.html b/index.html
index 89940f99..113828d7 100644
--- a/index.html
+++ b/index.html
@@ -19,11 +19,16 @@
:root {
--bg-color: #f5f5f5;
--text-color: #000;
+
+ --b: #000;
+ --e: #6200ee;
+
+ --app-on-primary: var(--b);
+ --app-primary: var(--e);
}
@media (prefers-color-scheme: dark) {
:root {
--a: rgba(255, 255, 255, .55);
- --b: #000;
--c: #fff;
--d: #1c1b1f;
@@ -31,13 +36,21 @@
--app-focus: var(--c);
--app-ink: var(--c);
--app-on-disabled: var(--a);
- --app-on-primary: var(--c);
--app-on-selected: #fff;
--app-on-weekday: var(--a);
- --app-primary: var(--d);
--app-selected: rgba(255, 255, 255, .25);
--app-today: var(--c);
+
+ --app-on-primary: var(--a);
+ /* --app-primary: var(--d); */
+
+ --date-picker-dialog-scrim: rgba(0, 0, 0, .75);
+
+ --date-picker-input-fill: rgba(255, 255, 255, .25);
+ --date-picker-input-hover-line: var(--c);
+ --date-picker-input-idle-line: var(--a);
--date-picker-input-on-icon: var(--a);
+ --date-picker-input-label-ink: var(--a);
--bg-color: #000;
--text-color: #fff;
diff --git a/src/date-picker-dialog/stylings.ts b/src/date-picker-dialog/stylings.ts
index 0f4660f2..65be7b6f 100644
--- a/src/date-picker-dialog/stylings.ts
+++ b/src/date-picker-dialog/stylings.ts
@@ -20,7 +20,7 @@ export const datePickerDialogBaseStyling = css`
}
.mdc-dialog .mdc-dialog__scrim {
- --mdc-dialog-scrim-color: var(--date-picker-dialog-base-scrim);
+ --mdc-dialog-scrim-color: var(--date-picker-dialog-scrim);
}
`;
diff --git a/src/date-picker-input/stylings.ts b/src/date-picker-input/stylings.ts
index 34761d50..4f1aa555 100644
--- a/src/date-picker-input/stylings.ts
+++ b/src/date-picker-input/stylings.ts
@@ -2,12 +2,18 @@ import { css } from 'lit';
export const datePickerInputStyling = css`
:host {
+ --mdc-text-field-disabled-fill-color: var(--date-picker-input-disabled-fill);
+ --mdc-text-field-disabled-ink-color: var(--date-picker-input-disabled-ink);
+ --mdc-text-field-disabled-line-color: var(--date-picker-input-disabled-line);
+ --mdc-text-field-fill-color: var(--date-picker-input-fill);
+ --mdc-text-field-filled-border-radius: var(--date-picker-input-filled-border-radius);
+ --mdc-text-field-hover-line-color: var(--date-picker-input-hover-line);
+ --mdc-text-field-idle-line-color: var(--date-picker-input-idle-line);
--mdc-text-field-ink-color: var(--base-on-primary);
- --mdc-text-field-label-ink-color: var(--base-on-primary);
- --mdc-text-field-hover-line-color: var(--base-on-primary);
- --mdc-text-field-hover-idle-line-color: var(--base-hover);
- --mdc-text-field-outlined-idle-border-color: var(--base-hover);
- --mdc-text-field-outlined-hover-border-color: var(--base-on-primary);
+ --mdc-text-field-label-ink-color: var(--date-picker-input-label-ink);
+ --mdc-text-field-outlined-disabled-border-color: var(--date-picker-input-disabled-line);
+ --mdc-text-field-outlined-hover-border-color: var(--date-picker-input-hover-line);
+ --mdc-text-field-outlined-idle-border-color: var(--date-picker-input-idle-line);
--mdc-theme-primary: var(--base-primary);
position: relative;