Created
October 9, 2025 04:51
-
-
Save thisiszoaib/1168090729125a7d38926699086af715 to your computer and use it in GitHub Desktop.
Angular Material Custom Theme for Ecommerce App
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Include theming for Angular Material with `mat.theme()`. | |
| // This Sass mixin will define CSS variables that are used for styling Angular Material | |
| // components according to the Material 3 design spec. | |
| // Learn more about theming and how to use it for your application's | |
| // custom components at https://material.angular.dev/guide/theming | |
| @use '@angular/material' as mat; | |
| @use 'tailwindcss'; | |
| html { | |
| @include mat.theme( | |
| ( | |
| color: ( | |
| primary: mat.$azure-palette, | |
| tertiary: mat.$blue-palette, | |
| ), | |
| typography: ( | |
| plain-family: 'Inter', | |
| brand-family: 'Inter', | |
| bold-weight: 600, | |
| medium-weight: 500, | |
| regular-weight: 400, | |
| ), | |
| density: 0, | |
| ) | |
| ); | |
| } | |
| body { | |
| // Default the application to a light color theme. This can be changed to | |
| // `dark` to enable the dark color theme, or to `light dark` to defer to the | |
| // user's system settings. | |
| color-scheme: light; | |
| // Set a default background, font and text colors for the application using | |
| // Angular Material's system-level CSS variables. Learn more about these | |
| // variables at https://material.angular.dev/guide/system-variables | |
| background-color: var(--mat-sys-surface); | |
| color: var(--mat-sys-on-surface); | |
| font: var(--mat-sys-body-medium); | |
| // Reset the user agent margin. | |
| margin: 0; | |
| @include mat.dialog-overrides( | |
| ( | |
| container-shape: 6px, | |
| ) | |
| ); | |
| --mat-sys-body-large-size: 0.875rem; | |
| } | |
| /* You can add global styles to this file, and also import other style files */ | |
| html, | |
| body { | |
| height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: | |
| 'Inter', | |
| -apple-system, | |
| BlinkMacSystemFont, | |
| 'Segoe UI', | |
| sans-serif; | |
| } | |
| .elevated { | |
| box-shadow: var(--mat-sys-level2); | |
| } | |
| button[matButton] { | |
| @include mat.button-overrides( | |
| ( | |
| filled-container-shape: 6px, | |
| outlined-container-shape: 6px, | |
| text-container-shape: 6px, | |
| protected-container-shape: 6px, | |
| tonal-container-shape: 6px, | |
| filled-horizontal-padding: 12px, | |
| outlined-horizontal-padding: 12px, | |
| text-horizontal-padding: 12px, | |
| protected-horizontal-padding: 12px, | |
| tonal-horizontal-padding: 12px, | |
| filled-icon-spacing: 0px, | |
| filled-icon-offset: 1px, | |
| filled-container-height: 36px, | |
| outlined-container-height: 36px, | |
| text-container-height: 36px, | |
| protected-container-height: 36px, | |
| tonal-container-height: 36px, | |
| ) | |
| ); | |
| } | |
| button[matButton='outlined'].danger { | |
| @include mat.button-overrides( | |
| ( | |
| outlined-label-text-color: var(--mat-sys-error), | |
| outlined-outline-color: var(--mat-sys-error), | |
| outlined-state-layer-color: var(--mat-sys-error), | |
| ) | |
| ); | |
| } | |
| button[matIconButton] { | |
| @include mat.icon-button-overrides( | |
| ( | |
| container-shape: 6px, | |
| ) | |
| ); | |
| } | |
| button[matIconButton].danger { | |
| @include mat.icon-button-overrides( | |
| ( | |
| icon-color: var(--mat-sys-error), | |
| state-layer-color: var(--mat-sys-error), | |
| ) | |
| ); | |
| } | |
| button[matIconButton].small { | |
| @include mat.icon-button-overrides( | |
| ( | |
| icon-size: 24px, | |
| touch-target-size: 28px, | |
| state-layer-size: 28px, | |
| ) | |
| ); | |
| } | |
| mat-icon.small { | |
| font-size: 20px; | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .danger { | |
| color: var(--mat-sys-error); | |
| } | |
| mat-form-field { | |
| @include mat.theme( | |
| ( | |
| density: -4, | |
| ) | |
| ); | |
| width: 100%; | |
| } | |
| mat-sidenav { | |
| @include mat.sidenav-overrides( | |
| ( | |
| container-width: 250px, | |
| container-shape: 0px, | |
| container-background-color: white, | |
| container-divider-color: var(--mat-sys-outline-variant), | |
| ) | |
| ); | |
| @include mat.list-overrides( | |
| ( | |
| active-indicator-color: var(--mat-sys-primary), | |
| active-indicator-shape: 6px, | |
| list-item-one-line-container-height: 40px, | |
| list-item-label-text-color: red, | |
| ) | |
| ); | |
| } | |
| // Style to fix the weird border with angular material + tailwindcss | |
| .mdc-notched-outline__notch { | |
| border-right: none !important; | |
| } | |
| //Responsive grid | |
| .responsive-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); | |
| gap: 1rem; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment