Make workflows compatible with the dark theme
This CL also contains a minor fix for the workflows menu.
Fixed: twpowertools:146
Change-Id: I754e2695b3ee0f952b8f1c2f05af0533a715684c
diff --git a/src/common/styles/md3.js b/src/common/styles/md3.js
index c712226..d3b098c 100644
--- a/src/common/styles/md3.js
+++ b/src/common/styles/md3.js
@@ -1,7 +1,24 @@
import {css} from 'lit';
+// This is used to customize some colors. Also, we use this to pass the dark
+// theme color scheme (it's defined in variables prefixed with --TWPT).
export const SHARED_MD3_STYLES = css`
:host {
- --md-sys-color-surface: rgb(227, 255, 251);
+ --md-sys-color-primary: var(--TWPT-md-sys-color-primary, #6750a4);
+ --md-sys-color-on-primary: var(--TWPT-md-sys-color-on-primary, #fff);
+ --md-sys-color-surface: var(--TWPT-md-sys-color-surface, rgb(227, 255, 251));
+ --md-sys-color-on-surface: var(--TWPT-md-sys-color-on-surface);
+ --md-sys-color-on-surface-rgb: var(--TWPT-md-sys-color-on-surface-rgb);
+ --md-sys-color-on-surface-variant: var(--TWPT-md-sys-color-on-surface-variant);
+ --md-list-list-divider-color: var(--TWPT-md-list-list-divider-color);
+ --md-ripple-hover-state-layer-color: var(--TWPT-md-ripple-hover-state-layer-color);
+ --md-ripple-pressed-state-layer-color: var(--TWPT-md-ripple-pressed-state-layer-color);
+ --md-icon-button-unselected-icon-color: var(--TWPT-custom-md-icon-color);
+ --md-icon-button-unselected-hover-icon-color: var(--TWPT-custom-md-icon-color);
+ --md-icon-button-unselected-focus-icon-color: var(--TWPT-custom-md-icon-color);
+ --md-icon-button-unselected-pressed-icon-color: var(--TWPT-custom-md-icon-color);
+ --mdc-theme-on-surface: var(--TWPT-primary-text, #000);
+ --mdc-dialog-heading-ink-color: var(--TWPT-primary-text);
+ --mdc-theme-surface: var(--TWPT-primary-background, #fff);
}
`;