Skip to content

Commit d42c4b1

Browse files
KhizerRehanKhizerRehan
committed
Define custom variables in _main.scs instead of individual theme files
1 parent d3e2486 commit d42c4b1

File tree

3 files changed

+49
-40
lines changed

3 files changed

+49
-40
lines changed

‎modules/web/src/assets/css/theme/_main.scss‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,49 @@ $my-typography: mat.m2-define-typography-config(
6060

6161
// Register component-level themes.
6262
@include theme-components($merged-colors);
63+
64+
// Override Angular Material v20 CSS custom properties for components
65+
:root {
66+
--mat-card-outlined-container-color: #{map.get($merged-colors, background-card)};
67+
--mat-card-elevated-container-color: #{map.get($merged-colors, background-card)};
68+
--mat-card-filled-container-color: #{map.get($merged-colors, background-card)};
69+
70+
--mat-table-background-color: #{map.get($merged-colors, background-card)};
71+
--mat-table-row-item-label-text-color: #{map.get($merged-colors, text)};
72+
--mat-sort-arrow-color: #{map.get($merged-colors, text-secondary)};
73+
--mat-tab-disabled-ripple-color: #{map.get($merged-colors, tab-disabled-ripple)};
74+
--mat-tab-pagination-icon-color: #{map.get($merged-colors, tab-pagination-icon)};
75+
76+
--mat-tab-inactive-ripple-color: #{map.get($merged-colors, tab-inactive-ripple)};
77+
78+
--mat-tab-inactive-label-text-color: #{map.get($merged-colors, tab-inactive-text)};
79+
--mat-tab-inactive-focus-label-text-color: #{map.get($merged-colors, tab-inactive-text)};
80+
--mat-tab-inactive-hover-label-text-color: #{map.get($merged-colors, tab-inactive-text)};
81+
82+
// Slide toggle disabled unselected handle color
83+
--mat-slide-toggle-disabled-unselected-handle-color: #{map.get($merged-colors, slide-toggle-unselected-handle)};
84+
85+
// Tooltip text color
86+
--mat-tooltip-supporting-text-color: #{map.get($merged-colors, tooltip-text)};
87+
88+
// --mat-tab-active-label-text-color: #{map.get($merged-colors, tab-active-text)};
89+
// --mat-tab-active-ripple-color: #{map.get($merged-colors, tab-active-ripple)};
90+
// --mat-tab-active-focus-label-text-color: #{map.get($merged-colors, tab-active-text)};
91+
// --mat-tab-active-hover-label-text-color: #{map.get($merged-colors, tab-active-text)};
92+
// --mat-tab-active-focus-indicator-color: #{map.get($merged-colors, tab-active-indicator)};
93+
// --mat-tab-active-hover-indicator-color: #{map.get($merged-colors, )};
94+
// --mat-tab-active-indicator-color: #{map.get($merged-colors, tab-active-indicator)};
95+
96+
--mat-stepper-container-color: #{map.get($merged-colors, background-card)};
97+
--mat-button-toggle-background-color: #{map.get($merged-colors, background-card)};
98+
99+
--mdc-dialog-container-color: #{map.get($merged-colors, background-dialog)};
100+
101+
// Paginator variables to fix background color issues
102+
--mat-paginator-container-background-color: #{map.get($merged-colors, background-card)};
103+
--mat-paginator-container-text-color: #{map.get($merged-colors, text)};
104+
105+
// Sidenav content background
106+
--mat-sidenav-content-background-color: #{if(map.get($merged-colors, sidenav-content-background), map.get($merged-colors, sidenav-content-background), map.get($merged-colors, background))};
107+
}
63108
}

‎modules/web/src/assets/themes/dark.scss‎

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,8 @@ $colors-dark: (
7171
hint-color: #b8b8b8b3,
7272
announcement-banner-text: #edeff0,
7373
tab-inactive-text: rgba(184, 184, 184, .6),
74+
slide-toggle-unselected-handle: black,
75+
tooltip-text: white,
7476
);
7577
$colors-dark-palette: mat.$m2-blue-palette;
7678
$colors-dark-palette: map.merge(
@@ -188,26 +190,6 @@ $theme-dark: map.merge(
188190
@include mat.all-component-themes($theme-dark);
189191
@include main.theme($theme-dark, $colors-dark);
190192

191-
// Override Angular Material v20 CSS custom properties for components
192-
:root {
193-
--mat-card-outlined-container-color: #{map.get($background, card)};
194-
--mat-card-elevated-container-color: #{map.get($background, card)};
195-
--mat-card-filled-container-color: #{map.get($background, card)};
196-
--mat-table-background-color: #{map.get($background, card)};
197-
--mat-table-row-item-label-text-color: #{map.get($foreground, text)};
198-
--mat-sort-arrow-color: #{map.get($foreground, secondary-text)};
199-
--mat-tab-inactive-label-text-color: #{map.get($colors-dark, tab-inactive-text)};
200-
--mat-stepper-container-color: #{map.get($background, card)};
201-
--mat-button-toggle-background-color: #{map.get($background, card)};
202-
--mdc-dialog-container-color: #{map.get($background, dialog)};
203-
204-
// Paginator variables to fix background color issues
205-
--mat-paginator-container-background-color: #{map.get($background, card)};
206-
--mat-paginator-container-text-color: #{map.get($foreground, text)};
207-
208-
// Sidenav content background
209-
--mat-sidenav-content-background-color: black;
210-
}
211193

212194
// Make icons and logos white with 85% opacity.
213195
.km-header-logo,

‎modules/web/src/assets/themes/light.scss‎

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@ $colors-light: (
6767
hint-color: #7e868f99,
6868
announcement-banner-text: #edeff0,
6969
tab-inactive-text: rgba(77, 85, 92, .6),
70+
slide-toggle-unselected-handle: #424242,
71+
tooltip-text: white,
7072
);
7173
$colors-light-palette: mat.$m2-blue-palette;
7274
$colors-light-palette: map.merge(
@@ -185,23 +187,3 @@ $theme-light: map.merge(
185187
@include main.theme($theme-light, $colors-light);
186188

187189

188-
// Override Angular Material v20 CSS custom properties for components
189-
:root {
190-
--mat-card-outlined-container-color: #{map.get($background, card)};
191-
--mat-card-elevated-container-color: #{map.get($background, card)};
192-
--mat-card-filled-container-color: #{map.get($background, card)};
193-
--mat-table-background-color: #{map.get($background, card)};
194-
--mat-table-row-item-label-text-color: #{map.get($foreground, text)};
195-
--mat-sort-arrow-color: #{map.get($foreground, secondary-text)};
196-
--mat-tab-inactive-label-text-color: rgba(77, 85, 92, .6);
197-
--mat-stepper-container-color: #{map.get($background, card)};
198-
--mat-button-toggle-background-color: #{map.get($background, card)};
199-
--mdc-dialog-container-color: #{map.get($background, dialog)};
200-
201-
// Paginator variables to fix background color issues
202-
--mat-paginator-container-background-color: #{map.get($background, card)};
203-
--mat-paginator-container-text-color: #{map.get($foreground, text)};
204-
205-
// Sidenav content background
206-
--mat-sidenav-content-background-color: #{map.get($background, background)};
207-
}

0 commit comments

Comments
 (0)