Angular Version
VueJs Version
NextJs Version
NuxtJs Version
React Version
Bootstrap Version
Color
Override Colors (Light / Dark Theme)
For any change in colors : src/assets/scss/themecolors/_orange_theme.scss
@use "sass:map";
@use "@angular/material" as mat;
html.blue_theme {
--mat-sys-primary: rgb(251, 151, 120);
--mat-sys-primary-fixed-dim: rgb(251, 151, 120, 0.15);
--mat-sys-secondary: rgb(3, 201, 215);
--mat-sys-secondary-fixed-dim: rgb(3, 201, 215, 0.15);
--mat-sys-error-fixed-dim: rgba(252, 75, 108, 0.15);
}
Light Theme Variables Settings
For any change in colors : src/assets/scss/theme-variables/_light-theme-variables.scss
html.light-theme {
color-scheme: light;
--mat-sys-corner-small: 7px;
--mat-sys-corner-medium: 20px;
--mat-sys-background: #fafafa;
--mat-sys-surface-bright: #f2f6fa;
--mat-sys-surface: #fff;
--mat-sys-surface-container: #fff;
--mat-sys-surface-container-low: #fff;
--mat-sys-on-background: #2a3547;
--mat-sys-outline: #d7dde2;
--mat-sys-outline-variant: #d7dde2;
--mdc-outlined-text-field-hover-outline-color: #d7dde2;
--mdc-checkbox-unselected-hover-state-layer-color: #d7dde2;
--mat-menu-item-hover-state-layer-color: #f6f9fc;
--mat-standard-button-toggle-state-layer-color: #f6f9fc;
--mat-option-focus-state-layer-color: #f6f9fc;
--mat-option-hover-state-layer-color: #f6f9fc;
--mdc-switch-unselected-track-color: #f6f9fc;
--mat-stepper-header-focus-state-layer-color: #f6f9fc;
--mat-stepper-header-hover-state-layer-color: #f6f9fc;
--mdc-dialog-supporting-text-color: var(--mat-sys-on-background);
--mat-expansion-header-hover-state-layer-color: #f6f9fc;
}
Dark Theme Variables Settings
For any change in colors : src/assets/scss/theme-variables/_dark-theme-variables.scss
html.dark-theme {
color-scheme: dark;
--mat-sys-corner-small: 7px;
--mat-sys-corner-medium: 20px;
--mat-sys-background: #141a21;
--mat-sys-on-background: rgba(255, 255, 255, 0.9);
--mat-sys-on-primary: #fff;
--mat-sys-surface-bright: #ffffff05;
--mat-sys-surface: #141a21;
--mat-sys-surface-container: #141a21;
--mat-sys-surface-container-low: #141a21;
--mat-sys-outline-variant: #2e3f50;
--mat-sys-outline: #2e3f50;
--mdc-outlined-text-field-hover-outline-color: #465670;
--mdc-checkbox-unselected-hover-state-layer-color: #19212a;
--mat-menu-item-hover-state-layer-color: #ffffff14;
--mat-standard-button-toggle-state-layer-color: #19212a;
--mat-option-focus-state-layer-color: #19212a;
--mat-option-hover-state-layer-color: #19212a;
--mdc-switch-unselected-track-color: #19212a;
--mat-stepper-header-focus-state-layer-color: #19212a;
--mat-stepper-header-hover-state-layer-color: #19212a;
--mat-expansion-header-hover-state-layer-color: #19212a;
@include mat.card-overrides(
(
elevated-container-color: #141a21,
elevated-container-elevation: "#919eab4d 0 0 2px,#919eab05 0 12px 24px -4px",
subtitle-text-color: rgba(255, 255, 255, 0.67),
)
);
@include mat.theme-overrides(
(
level1: "#919eab4d 0 0 2px,#919eab05 0 12px 24px -4px",
level2: "#919eab4d 0 0 2px,#919eab05 0 12px 24px -4px",
level3: "#919eab4d 0 0 2px,#919eab05 0 12px 24px -4px",
)
);
}
Override Colors (Light / Dark Theme)
For any change in colors : src/assets/scss/themecolors/_orange_theme.scss
@use "sass:map";
@use "@angular/material" as mat;
html.blue_theme {
--mat-sys-primary: rgb(251, 151, 120);
--mat-sys-primary-fixed-dim: rgb(251, 151, 120, 0.15);
--mat-sys-secondary: rgb(3, 201, 215);
--mat-sys-secondary-fixed-dim: rgb(3, 201, 215, 0.15);
--mat-sys-error-fixed-dim: rgba(252, 75, 108, 0.15);
}