From e1c0f8b11c82e8670ffc48cf45cc5a7daebbf205 Mon Sep 17 00:00:00 2001 From: Azula Date: Thu, 12 Mar 2026 06:34:59 +0530 Subject: [PATCH 1/4] [update] complete insatllation of ang material and tested --- angular.json | 2 + package-lock.json | 134 +++++++++++------- package.json | 4 +- .../pages/dashboard/dashboard.component.html | 8 +- .../pages/dashboard/dashboard.component.ts | 11 +- src/index.html | 4 +- src/styles.scss | 3 + 7 files changed, 104 insertions(+), 62 deletions(-) diff --git a/angular.json b/angular.json index d732aa7..8987db6 100644 --- a/angular.json +++ b/angular.json @@ -32,6 +32,7 @@ } ], "styles": [ + "@angular/material/prebuilt-themes/azure-blue.css", "src/styles.scss" ], "scripts": [] @@ -91,6 +92,7 @@ } ], "styles": [ + "@angular/material/prebuilt-themes/azure-blue.css", "src/styles.scss" ], "scripts": [] diff --git a/package-lock.json b/package-lock.json index cfe0793..36c6e97 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,12 @@ "version": "0.0.0", "dependencies": { "@angular/animations": "^19.0.0", + "@angular/cdk": "~19.2.19", "@angular/common": "^19.0.0", "@angular/compiler": "^19.0.0", "@angular/core": "^19.0.0", "@angular/forms": "^19.0.0", + "@angular/material": "~19.2.19", "@angular/platform-browser": "^19.0.0", "@angular/platform-browser-dynamic": "^19.0.0", "@angular/router": "^19.0.0", @@ -312,6 +314,7 @@ "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-19.2.8.tgz", "integrity": "sha512-gKWBusQvjb946uuTXaXWzkEfLdTiy9GUNZ9okF3yolv+aoW0D8AM9mVvTX1xdqAV3xuIxRXRbkWG7BR+p8xVzQ==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -510,6 +513,22 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/@angular/cdk": { + "version": "19.2.19", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.2.19.tgz", + "integrity": "sha512-PCpJagurPBqciqcq4Z8+3OtKLb7rSl4w/qBJoIMua8CgnrjvA1i+SWawhdtfI1zlY8FSwhzLwXV0CmWWfFzQPg==", + "license": "MIT", + "peer": true, + "dependencies": { + "parse5": "^7.1.2", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^19.0.0 || ^20.0.0", + "@angular/core": "^19.0.0 || ^20.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/cli": { "version": "19.2.9", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.9.tgz", @@ -549,6 +568,7 @@ "resolved": "https://registry.npmjs.org/@angular/common/-/common-19.2.8.tgz", "integrity": "sha512-SnW+/amz1Mtni9125xlzPZ5MU+wSzUepc9G5jRnL0q9vrFglRWa3BEW3GxVurfbdnf6FleroZ7fZCZFAfREw7Q==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -565,6 +585,7 @@ "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-19.2.8.tgz", "integrity": "sha512-HBtt96X09XFatHAnkquFYbcD3aQSvuYoqqhCV5OLkhAwHmvr3BGyHx/EBZ5JGOfCNOzCupoQmOBF+nh5LKwkeQ==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -578,6 +599,7 @@ "integrity": "sha512-gq/sc3D3m6aKmhdSTTzzD59wfQcVjIZ8dgJoPW7pOcmPVQL1N8syjv+quHySfSJlBkbs5dQ0P4Kk0yvxRw9S7g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/core": "7.26.9", "@jridgewell/sourcemap-codec": "^1.4.14", @@ -654,6 +676,7 @@ "resolved": "https://registry.npmjs.org/@angular/core/-/core-19.2.8.tgz", "integrity": "sha512-iNISGgLr+nBzEaGbfzRCOVfV3T66gbEu+Ee4VCnEqifU7Er6fnvn+oFfHo3gNKHrCdicrbyb2oKAmeOJynKbsA==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -670,6 +693,7 @@ "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-19.2.8.tgz", "integrity": "sha512-4q/6ad8YZPixxLhDwOxm4pQO3ekwGriOTVB0pMb9FdpvjOUSdDTM08o8ToHvu6MBbZjHzLs8+xkMw9QCd55x/w==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -683,11 +707,29 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material": { + "version": "19.2.19", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-19.2.19.tgz", + "integrity": "sha512-auIE6JUzTIA3LyYklh9J/T7u64crmphxUBgAa0zcOMDog6SYfwbNe9YeLQqua5ek4OUAOdK/BHHfVl5W5iaUoQ==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/cdk": "19.2.19", + "@angular/common": "^19.0.0 || ^20.0.0", + "@angular/core": "^19.0.0 || ^20.0.0", + "@angular/forms": "^19.0.0 || ^20.0.0", + "@angular/platform-browser": "^19.0.0 || ^20.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/platform-browser": { "version": "19.2.8", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.2.8.tgz", "integrity": "sha512-3O69vMAq/ki13YX8hWBUs1R6iwS1GmkcHWu5fIUU7rjSuhGfD60nASqRBYZiJb68eUom//T544KavOvfAl1PzQ==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -772,6 +814,7 @@ "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.2", @@ -3005,6 +3048,7 @@ "integrity": "sha512-G1ytyOoHh5BphmEBxSwALin3n1KGNYB6yImbICcRQdzXfOGbuJ9Jske/Of5Sebk339NSGGNfUshnzK8YWkTPsQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@inquirer/checkbox": "^4.1.2", "@inquirer/confirm": "^5.1.6", @@ -4724,8 +4768,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { "version": "4.34.8", @@ -5142,6 +5185,7 @@ "integrity": "sha512-uKXqKN9beGoMdBfcaTY1ecwz6ctxuJAcUlwE55938g0ZJ8lRxwAZqRz2AJ4pzpt5dHdTPMB863UZ0ESiFUcP7A==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~6.21.0" } @@ -5517,6 +5561,7 @@ "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -5980,6 +6025,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001688", "electron-to-chromium": "^1.5.73", @@ -9027,7 +9073,8 @@ "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.4.0.tgz", "integrity": "sha512-T4fio3W++llLd7LGSGsioriDHgWyhoL6YTu4k37uwJLF7DzOzspz7mNxRoM3cQdLWtL/ebazQpIf/yZGJx/gzg==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/jest-worker": { "version": "27.5.1", @@ -9066,6 +9113,7 @@ "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", "dev": true, "license": "MIT", + "peer": true, "bin": { "jiti": "bin/jiti.js" } @@ -9173,6 +9221,7 @@ "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@colors/colors": "1.5.0", "body-parser": "^1.19.0", @@ -9531,6 +9580,7 @@ "integrity": "sha512-tkuLHQlvWUTeQ3doAqnHbNn8T6WX1KA8yvbKG9x4VtKtIjHsVKQZCH11zRgAfbDAXC2UNIg/K9BYAAcEzUIrNg==", "dev": true, "license": "Apache-2.0", + "peer": true, "dependencies": { "copy-anything": "^2.0.1", "parse-node-version": "^1.0.1", @@ -11178,7 +11228,6 @@ "version": "7.3.0", "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz", "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==", - "dev": true, "license": "MIT", "dependencies": { "entities": "^6.0.0" @@ -11219,7 +11268,6 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.0.tgz", "integrity": "sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==", - "dev": true, "license": "BSD-2-Clause", "engines": { "node": ">=0.12" @@ -11396,6 +11444,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", @@ -12055,6 +12104,7 @@ "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz", "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==", "license": "Apache-2.0", + "peer": true, "dependencies": { "tslib": "^2.1.0" } @@ -12111,6 +12161,7 @@ "integrity": "sha512-3ToiC1xZ1Y8aU7+CkgCI/tqyuPXEmYGJXO7H4uqp0xkLXUqp88rQQ4j1HmP37xSJLbCJPaIiv+cT1y+grssrww==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -13246,6 +13297,7 @@ "integrity": "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==", "dev": true, "license": "BSD-2-Clause", + "peer": true, "dependencies": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.8.2", @@ -13398,7 +13450,8 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "license": "0BSD" + "license": "0BSD", + "peer": true }, "node_modules/tuf-js": { "version": "3.0.1", @@ -13455,6 +13508,7 @@ "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -13695,7 +13749,6 @@ "integrity": "sha512-5nXH+QsELbFKhsEfWLkHrvgRpTdGJzqOZ+utSdmPTvwHmvU6ITTm3xx+mRusihkcI8GeC7lCDyn3kDtiki9scw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", @@ -13777,8 +13830,7 @@ "optional": true, "os": [ "android" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-android-arm64": { "version": "4.40.0", @@ -13792,8 +13844,7 @@ "optional": true, "os": [ "android" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-darwin-arm64": { "version": "4.40.0", @@ -13807,8 +13858,7 @@ "optional": true, "os": [ "darwin" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-darwin-x64": { "version": "4.40.0", @@ -13822,8 +13872,7 @@ "optional": true, "os": [ "darwin" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-freebsd-arm64": { "version": "4.40.0", @@ -13837,8 +13886,7 @@ "optional": true, "os": [ "freebsd" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-freebsd-x64": { "version": "4.40.0", @@ -13852,8 +13900,7 @@ "optional": true, "os": [ "freebsd" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-linux-arm-gnueabihf": { "version": "4.40.0", @@ -13867,8 +13914,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-linux-arm-musleabihf": { "version": "4.40.0", @@ -13882,8 +13928,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-linux-arm64-gnu": { "version": "4.40.0", @@ -13897,8 +13942,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-linux-arm64-musl": { "version": "4.40.0", @@ -13912,8 +13956,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-linux-loongarch64-gnu": { "version": "4.40.0", @@ -13927,8 +13970,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-linux-powerpc64le-gnu": { "version": "4.40.0", @@ -13942,8 +13984,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-linux-riscv64-gnu": { "version": "4.40.0", @@ -13957,8 +13998,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-linux-s390x-gnu": { "version": "4.40.0", @@ -13972,8 +14012,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-linux-x64-gnu": { "version": "4.40.0", @@ -13987,8 +14026,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-linux-x64-musl": { "version": "4.40.0", @@ -14002,8 +14040,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-win32-arm64-msvc": { "version": "4.40.0", @@ -14017,8 +14054,7 @@ "optional": true, "os": [ "win32" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-win32-ia32-msvc": { "version": "4.40.0", @@ -14032,8 +14068,7 @@ "optional": true, "os": [ "win32" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@rollup/rollup-win32-x64-msvc": { "version": "4.40.0", @@ -14047,16 +14082,14 @@ "optional": true, "os": [ "win32" - ], - "peer": true + ] }, "node_modules/vite/node_modules/@types/estree": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz", "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/vite/node_modules/postcss": { "version": "8.5.3", @@ -14078,7 +14111,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", @@ -14094,7 +14126,6 @@ "integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.7" }, @@ -14187,6 +14218,7 @@ "integrity": "sha512-UFynvx+gM44Gv9qFgj0acCQK2VE1CtdfwFdimkapco3hlPCJ/zeq73n2yVKimVbtm+TnApIugGhLJnkU6gjYXA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.6", @@ -14264,6 +14296,7 @@ "integrity": "sha512-90SqqYXA2SK36KcT6o1bvwvZfJFcmoamqeJY7+boioffX9g9C0wjjJRGUrQIuh43pb0ttX7+ssavmj/WN2RHtA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@types/bonjour": "^3.5.13", "@types/connect-history-api-fallback": "^1.5.4", @@ -14829,7 +14862,8 @@ "version": "0.15.0", "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.0.tgz", "integrity": "sha512-9oxn0IIjbCZkJ67L+LkhYWRyAy7axphb3VgE2MBDlOqnmHMPWGYMxJxBYFueFq/JGY2GMwS0rU+UCLunEmy5UA==", - "license": "MIT" + "license": "MIT", + "peer": true } } } diff --git a/package.json b/package.json index b255bd8..ffcb124 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,12 @@ "private": true, "dependencies": { "@angular/animations": "^19.0.0", + "@angular/cdk": "~19.2.19", "@angular/common": "^19.0.0", "@angular/compiler": "^19.0.0", "@angular/core": "^19.0.0", "@angular/forms": "^19.0.0", + "@angular/material": "~19.2.19", "@angular/platform-browser": "^19.0.0", "@angular/platform-browser-dynamic": "^19.0.0", "@angular/router": "^19.0.0", @@ -35,4 +37,4 @@ "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.6.2" } -} +} \ No newline at end of file diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index 5617bdd..67bd4f2 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -1,6 +1,6 @@

Welcome!

This is a basic admin layout using Angular Material 19.

- - - - \ No newline at end of file + + + + diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts index 42a1f08..26dbb30 100644 --- a/src/app/pages/dashboard/dashboard.component.ts +++ b/src/app/pages/dashboard/dashboard.component.ts @@ -1,11 +1,10 @@ import { Component, inject } from '@angular/core'; - +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { MatButtonModule } from '@angular/material/button'; @Component({ selector: 'app-dashboard', - imports: [], + imports: [MatButtonModule], templateUrl: './dashboard.component.html', - styleUrl: './dashboard.component.scss' + styleUrl: './dashboard.component.scss', }) -export class DashboardComponent { - -} +export class DashboardComponent {} diff --git a/src/index.html b/src/index.html index fd8cd7d..9be19fb 100644 --- a/src/index.html +++ b/src/index.html @@ -6,8 +6,10 @@ + + - + diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..7e7239a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,4 @@ /* You can add global styles to this file, and also import other style files */ + +html, body { height: 100%; } +body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } From 5e31d71fcc8d10b7d5c3343053c745c3ac057056 Mon Sep 17 00:00:00 2001 From: Azula Date: Thu, 12 Mar 2026 07:03:26 +0530 Subject: [PATCH 2/4] [update] learned about custom theme --- angular.json | 4 +- .../pages/dashboard/dashboard.component.html | 2 +- src/theme.css | 303 ++++++++++++++++++ 3 files changed, 306 insertions(+), 3 deletions(-) create mode 100644 src/theme.css diff --git a/angular.json b/angular.json index 8987db6..9002a40 100644 --- a/angular.json +++ b/angular.json @@ -32,7 +32,7 @@ } ], "styles": [ - "@angular/material/prebuilt-themes/azure-blue.css", + "src/theme.css", "src/styles.scss" ], "scripts": [] @@ -104,4 +104,4 @@ "cli": { "analytics": false } -} +} \ No newline at end of file diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index 67bd4f2..4c49ce4 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -1,6 +1,6 @@

Welcome!

This is a basic admin layout using Angular Material 19.

- + diff --git a/src/theme.css b/src/theme.css new file mode 100644 index 0000000..b93f51e --- /dev/null +++ b/src/theme.css @@ -0,0 +1,303 @@ +/* Note: Color palettes are generated from primary: #5beb34 */ +html { + /* COLOR SYSTEM VARIABLES */ + color-scheme: dark; + + /* Primary palette variables */ + --mat-sys-primary: light-dark(#196e00, #52e32b); + --mat-sys-on-primary: light-dark(#ffffff, #093900); + --mat-sys-primary-container: light-dark(#7aff54, #115300); + --mat-sys-on-primary-container: light-dark(#032100, #7aff54); + --mat-sys-inverse-primary: light-dark(#52e32b, #196e00); + --mat-sys-primary-fixed: light-dark(#7aff54, #7aff54); + --mat-sys-primary-fixed-dim: light-dark(#52e32b, #52e32b); + --mat-sys-on-primary-fixed: light-dark(#032100, #032100); + --mat-sys-on-primary-fixed-variant: light-dark(#115300, #115300); + + /* Secondary palette variables */ + --mat-sys-secondary: light-dark(#226d0d, #8bda6f); + --mat-sys-on-secondary: light-dark(#ffffff, #093900); + --mat-sys-secondary-container: light-dark(#a6f788, #115300); + --mat-sys-on-secondary-container: light-dark(#032100, #a6f788); + --mat-sys-secondary-fixed: light-dark(#a6f788, #a6f788); + --mat-sys-secondary-fixed-dim: light-dark(#8bda6f, #8bda6f); + --mat-sys-on-secondary-fixed: light-dark(#032100, #032100); + --mat-sys-on-secondary-fixed-variant: light-dark(#115300, #115300); + + /* Tertiary palette variables */ + --mat-sys-tertiary: light-dark(#006c51, #00e1ad); + --mat-sys-on-tertiary: light-dark(#ffffff, #003829); + --mat-sys-tertiary-container: light-dark(#3cffc7, #00513c); + --mat-sys-on-tertiary-container: light-dark(#002116, #3cffc7); + --mat-sys-tertiary-fixed: light-dark(#3cffc7, #3cffc7); + --mat-sys-tertiary-fixed-dim: light-dark(#00e1ad, #00e1ad); + --mat-sys-on-tertiary-fixed: light-dark(#002116, #002116); + --mat-sys-on-tertiary-fixed-variant: light-dark(#00513c, #00513c); + + /* Neutral palette variables */ + --mat-sys-background: light-dark(#f3fde9, #0e150a); + --mat-sys-on-background: light-dark(#161e12, #dce6d2); + --mat-sys-surface: light-dark(#f3fde9, #0e150a); + --mat-sys-surface-dim: light-dark(#d4ddca, #0e150a); + --mat-sys-surface-bright: light-dark(#f3fde9, #333c2e); + --mat-sys-surface-container-low: light-dark(#edf7e3, #161e12); + --mat-sys-surface-container-lowest: light-dark(#ffffff, #091006); + --mat-sys-surface-container: light-dark(#e7f1de, #1a2216); + --mat-sys-surface-container-high: light-dark(#e2ebd8, #242c20); + --mat-sys-surface-container-highest: light-dark(#dce6d2, #2f372a); + --mat-sys-on-surface: light-dark(#161e12, #dce6d2); + --mat-sys-shadow: light-dark(#000000, #000000); + --mat-sys-scrim: light-dark(#000000, #000000); + --mat-sys-surface-tint: light-dark(#196e00, #52e32b); + --mat-sys-inverse-surface: light-dark(#2a3326, #dce6d2); + --mat-sys-inverse-on-surface: light-dark(#eaf4e0, #2a3326); + --mat-sys-outline: light-dark(#6d7b65, #87957e); + --mat-sys-outline-variant: light-dark(#bccbb2, #3d4a37); + --mat-sys-neutral10: light-dark( + #161e12, + #161e12 + ); /* Variable used for the form field native select option text color */ + + /* Error palette variables */ + --mat-sys-error: light-dark(#ba1a1a, #ffb4ab); + --mat-sys-on-error: light-dark(#ffffff, #690005); + --mat-sys-error-container: light-dark(#ffdad6, #93000a); + --mat-sys-on-error-container: light-dark(#410002, #ffdad6); + + /* Neutral variant palette variables */ + --mat-sys-surface-variant: light-dark(#d8e7cd, #3d4a37); + --mat-sys-on-surface-variant: light-dark(#3d4a37, #bccbb2); + --mat-sys-neutral-variant20: light-dark( + #273422, + #273422 + ); /* Variable used for the sidenav scrim (container background shadow when opened) */ + + /* TYPOGRAPHY SYSTEM VARIABLES */ + + /* Typography variables. Only used in the different typescale system variables. */ + --mat-sys-brand-font-family: Roboto; /* The font-family to use for brand text. */ + --mat-sys-plain-font-family: Roboto; /* The font-family to use for plain text. */ + --mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */ + --mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */ + --mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */ + + /* Typescale variables. */ + /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since + tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + --mat-sys-body-large: var(--mat-sys-body-large-weight) + var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height) + var(--mat-sys-body-large-font); + --mat-sys-body-large-font: var(--mat-sys-plain-font-family); + --mat-sys-body-large-line-height: 1.5rem; + --mat-sys-body-large-size: 1rem; + --mat-sys-body-large-tracking: 0.031rem; + --mat-sys-body-large-weight: var(--mat-sys-regular-font-weight); + + /* Body medium typescale */ + --mat-sys-body-medium: var(--mat-sys-body-medium-weight) + var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height) + var(--mat-sys-body-medium-font); + --mat-sys-body-medium-font: var(--mat-sys-plain-font-family); + --mat-sys-body-medium-line-height: 1.25rem; + --mat-sys-body-medium-size: 0.875rem; + --mat-sys-body-medium-tracking: 0.016rem; + --mat-sys-body-medium-weight: var(--mat-sys-regular-font-weight); + + /* Body small typescale */ + --mat-sys-body-small: var(--mat-sys-body-small-weight) + var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height) + var(--mat-sys-body-small-font); + --mat-sys-body-small-font: var(--mat-sys-plain-font-family); + --mat-sys-body-small-line-height: 1rem; + --mat-sys-body-small-size: 0.75rem; + --mat-sys-body-small-tracking: 0.025rem; + --mat-sys-body-small-weight: var(--mat-sys-regular-font-weight); + + /* Display large typescale */ + --mat-sys-display-large: var(--mat-sys-display-large-weight) + var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height) + var(--mat-sys-display-large-font); + --mat-sys-display-large-font: var(--mat-sys-brand-font-family); + --mat-sys-display-large-line-height: 4rem; + --mat-sys-display-large-size: 3.562rem; + --mat-sys-display-large-tracking: -0.016rem; + --mat-sys-display-large-weight: var(--mat-sys-regular-font-weight); + + /* Display medium typescale */ + --mat-sys-display-medium: var(--mat-sys-display-medium-weight) + var(--mat-sys-display-medium-size) / + var(--mat-sys-display-medium-line-height) var(--mat-sys-display-medium-font); + --mat-sys-display-medium-font: var(--mat-sys-brand-font-family); + --mat-sys-display-medium-line-height: 3.25rem; + --mat-sys-display-medium-size: 2.812rem; + --mat-sys-display-medium-tracking: 0; + --mat-sys-display-medium-weight: var(--mat-sys-regular-font-weight); + + /* Display small typescale */ + --mat-sys-display-small: var(--mat-sys-display-small-weight) + var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height) + var(--mat-sys-display-small-font); + --mat-sys-display-small-font: var(--mat-sys-brand-font-family); + --mat-sys-display-small-line-height: 2.75rem; + --mat-sys-display-small-size: 2.25rem; + --mat-sys-display-small-tracking: 0; + --mat-sys-display-small-weight: var(--mat-sys-regular-font-weight); + + /* Headline large typescale */ + --mat-sys-headline-large: var(--mat-sys-headline-large-weight) + var(--mat-sys-headline-large-size) / + var(--mat-sys-headline-large-line-height) var(--mat-sys-headline-large-font); + --mat-sys-headline-large-font: var(--mat-sys-brand-font-family); + --mat-sys-headline-large-line-height: 2.5rem; + --mat-sys-headline-large-size: 2rem; + --mat-sys-headline-large-tracking: 0; + --mat-sys-headline-large-weight: var(--mat-sys-regular-font-weight); + + /* Headline medium typescale */ + --mat-sys-headline-medium: var(--mat-sys-headline-medium-weight) + var(--mat-sys-headline-medium-size) / + var(--mat-sys-headline-medium-line-height) + var(--mat-sys-headline-medium-font); + --mat-sys-headline-medium-font: var(--mat-sys-brand-font-family); + --mat-sys-headline-medium-line-height: 2.25rem; + --mat-sys-headline-medium-size: 1.75rem; + --mat-sys-headline-medium-tracking: 0; + --mat-sys-headline-medium-weight: var(--mat-sys-regular-font-weight); + + /* Headline small typescale */ + --mat-sys-headline-small: var(--mat-sys-headline-small-weight) + var(--mat-sys-headline-small-size) / + var(--mat-sys-headline-small-line-height) var(--mat-sys-headline-small-font); + --mat-sys-headline-small-font: var(--mat-sys-brand-font-family); + --mat-sys-headline-small-line-height: 2rem; + --mat-sys-headline-small-size: 1.5rem; + --mat-sys-headline-small-tracking: 0; + --mat-sys-headline-small-weight: var(--mat-sys-regular-font-weight); + + /* Label large typescale */ + --mat-sys-label-large: var(--mat-sys-label-large-weight) + var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height) + var(--mat-sys-label-large-font); + --mat-sys-label-large-font: var(--mat-sys-plain-font-family); + --mat-sys-label-large-line-height: 1.25rem; + --mat-sys-label-large-size: 0.875rem; + --mat-sys-label-large-tracking: 0.006rem; + --mat-sys-label-large-weight: var(--mat-sys-medium-font-weight); + --mat-sys-label-large-weight-prominent: var(--mat-sys-bold-font-weight); + + /* Label medium typescale */ + --mat-sys-label-medium: var(--mat-sys-label-medium-weight) + var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height) + var(--mat-sys-label-medium-font); + --mat-sys-label-medium-font: var(--mat-sys-plain-font-family); + --mat-sys-label-medium-line-height: 1rem; + --mat-sys-label-medium-size: 0.75rem; + --mat-sys-label-medium-tracking: 0.031rem; + --mat-sys-label-medium-weight: var(--mat-sys-medium-font-weight); + --mat-sys-label-medium-weight-prominent: var(--mat-sys-bold-font-weight); + + /* Label small typescale */ + --mat-sys-label-small: var(--mat-sys-label-small-weight) + var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height) + var(--mat-sys-label-small-font); + --mat-sys-label-small-font: var(--mat-sys-plain-font-family); + --mat-sys-label-small-line-height: 1rem; + --mat-sys-label-small-size: 0.688rem; + --mat-sys-label-small-tracking: 0.031rem; + --mat-sys-label-small-weight: var(--mat-sys-medium-font-weight); + + /* Title large typescale */ + --mat-sys-title-large: var(--mat-sys-title-large-weight) + var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height) + var(--mat-sys-title-large-font); + --mat-sys-title-large-font: var(--mat-sys-brand-font-family); + --mat-sys-title-large-line-height: 1.75rem; + --mat-sys-title-large-size: 1.375rem; + --mat-sys-title-large-tracking: 0; + --mat-sys-title-large-weight: var(--mat-sys-regular-font-weight); + + /* Title medium typescale */ + --mat-sys-title-medium: var(--mat-sys-title-medium-weight) + var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height) + var(--mat-sys-title-medium-font); + --mat-sys-title-medium-font: var(--mat-sys-plain-font-family); + --mat-sys-title-medium-line-height: 1.5rem; + --mat-sys-title-medium-size: 1rem; + --mat-sys-title-medium-tracking: 0.009rem; + --mat-sys-title-medium-weight: var(--mat-sys-medium-font-weight); + + /* Title small typescale */ + --mat-sys-title-small: var(--mat-sys-title-small-weight) + var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height) + var(--mat-sys-title-small-font); + --mat-sys-title-small-font: var(--mat-sys-plain-font-family); + --mat-sys-title-small-line-height: 1.25rem; + --mat-sys-title-small-size: 0.875rem; + --mat-sys-title-small-tracking: 0.006rem; + --mat-sys-title-small-weight: var(--mat-sys-medium-font-weight); + + /* ELEVATION SYSTEM VARIABLES */ + + /* Box shadow colors. Only used in the elevation level system variables. */ + --mat-sys-umbra-color: color-mix( + in srgb, + var(--mat-sys-shadow), + transparent 80% + ); + --mat-sys-penumbra-color: color-mix( + in srgb, + var(--mat-sys-shadow), + transparent 86% + ); + --mat-sys-ambient-color: color-mix( + in srgb, + var(--mat-sys-shadow), + transparent 88% + ); + + /* Elevation level system variables. These are used as the value for box-shadow CSS property. */ + --mat-sys-level0: + 0px 0px 0px 0px var(--mat-sys-umbra-color), + 0px 0px 0px 0px var(--mat-sys-penumbra-color), + 0px 0px 0px 0px var(--mat-sys-ambient-color); + --mat-sys-level1: + 0px 2px 1px -1px var(--mat-sys-umbra-color), + 0px 1px 1px 0px var(--mat-sys-penumbra-color), + 0px 1px 3px 0px var(--mat-sys-ambient-color); + --mat-sys-level2: + 0px 3px 3px -2px var(--mat-sys-umbra-color), + 0px 3px 4px 0px var(--mat-sys-penumbra-color), + 0px 1px 8px 0px var(--mat-sys-ambient-color); + --mat-sys-level3: + 0px 3px 5px -1px var(--mat-sys-umbra-color), + 0px 6px 10px 0px var(--mat-sys-penumbra-color), + 0px 1px 18px 0px var(--mat-sys-ambient-color); + --mat-sys-level4: + 0px 5px 5px -3px var(--mat-sys-umbra-color), + 0px 8px 10px 1px var(--mat-sys-penumbra-color), + 0px 3px 14px 2px var(--mat-sys-ambient-color); + --mat-sys-level5: + 0px 7px 8px -4px var(--mat-sys-umbra-color), + 0px 12px 17px 2px var(--mat-sys-penumbra-color), + 0px 5px 22px 4px var(--mat-sys-ambient-color); + + /* SHAPE SYSTEM VARIABLES */ + --mat-sys-corner-extra-large: 28px; + --mat-sys-corner-extra-large-top: 28px 28px 0 0; + --mat-sys-corner-extra-small: 4px; + --mat-sys-corner-extra-small-top: 4px 4px 0 0; + --mat-sys-corner-full: 9999px; + --mat-sys-corner-large: 16px; + --mat-sys-corner-large-end: 0 16px 16px 0; + --mat-sys-corner-large-start: 16px 0 0 16px; + --mat-sys-corner-large-top: 16px 16px 0 0; + --mat-sys-corner-medium: 12px; + --mat-sys-corner-none: 0; + --mat-sys-corner-small: 8px; + + /* STATE SYSTEM VARIABLES */ + --mat-sys-dragged-state-layer-opacity: 0.16; + --mat-sys-focus-state-layer-opacity: 0.12; + --mat-sys-hover-state-layer-opacity: 0.08; + --mat-sys-pressed-state-layer-opacity: 0.12; +} From be608419ad69ae7b3fd7d54111e3d32941a7d305 Mon Sep 17 00:00:00 2001 From: Azula Date: Thu, 12 Mar 2026 20:01:29 +0530 Subject: [PATCH 3/4] [UPDATE] leanred hwo to use thme a using scss --- angular.json | 1 - src/styles.scss | 23 +++++++++++++++++++++-- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/angular.json b/angular.json index 9002a40..aec0b05 100644 --- a/angular.json +++ b/angular.json @@ -32,7 +32,6 @@ } ], "styles": [ - "src/theme.css", "src/styles.scss" ], "scripts": [] diff --git a/src/styles.scss b/src/styles.scss index 7e7239a..7a6febb 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,4 +1,23 @@ /* You can add global styles to this file, and also import other style files */ -html, body { height: 100%; } -body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } +@use "@angular/material" as mat; + +html { + color-scheme: dark; + @include mat.theme( + ( + color: mat.$rose-palette, + // typography: Roboto, + // density: 0, + ) + ); +} + +html, +body { + height: 100%; +} +body { + margin: 0; + font-family: Roboto, "Helvetica Neue", sans-serif; +} From eef9b460197165555a8c7a533e62747f2e01cb6a Mon Sep 17 00:00:00 2001 From: Azula Date: Thu, 12 Mar 2026 21:47:40 +0530 Subject: [PATCH 4/4] [update] mastered the custom scss using angular material --- src/_theme-colors.scss | 205 +++++++++++++++++++++++++++++++++++++++++ src/styles.scss | 3 +- 2 files changed, 207 insertions(+), 1 deletion(-) create mode 100644 src/_theme-colors.scss diff --git a/src/_theme-colors.scss b/src/_theme-colors.scss new file mode 100644 index 0000000..27389aa --- /dev/null +++ b/src/_theme-colors.scss @@ -0,0 +1,205 @@ +// This file was generated by running 'ng generate @angular/material:theme-color'. +// Proceed with caution if making changes to this file. + +@use 'sass:map'; +@use '@angular/material' as mat; + +// Note: Color palettes are generated from primary: #f56942 +$_palettes: ( + primary: ( + 0: #000000, + 10: #3b0900, + 20: #601400, + 25: #741a00, + 30: #882000, + 35: #9b2904, + 40: #ab3511, + 50: #cd4d28, + 60: #f0653e, + 70: #ff8b6b, + 80: #ffb5a1, + 90: #ffdbd1, + 95: #ffede9, + 98: #fff8f6, + 99: #fffbff, + 100: #ffffff, + ), + secondary: ( + 0: #000000, + 10: #3a0b01, + 20: #552010, + 25: #632a1a, + 30: #723524, + 35: #80402f, + 40: #8f4c39, + 50: #ac6450, + 60: #ca7c67, + 70: #e99680, + 80: #ffb5a1, + 90: #ffdbd1, + 95: #ffede9, + 98: #fff8f6, + 99: #fffbff, + 100: #ffffff, + ), + tertiary: ( + 0: #000000, + 10: #231b00, + 20: #3c2f00, + 25: #493a00, + 30: #564500, + 35: #645000, + 40: #725c00, + 50: #8f7400, + 60: #ae8d00, + 70: #cba824, + 80: #e8c340, + 90: #ffe080, + 95: #fff0c9, + 98: #fff8f0, + 99: #fffbff, + 100: #ffffff, + ), + neutral: ( + 0: #000000, + 10: #251915, + 20: #3c2d29, + 25: #473834, + 30: #53433f, + 35: #604f4a, + 40: #6c5a56, + 50: #86736e, + 60: #a18c87, + 70: #bca6a1, + 80: #d9c2bc, + 90: #f6ddd7, + 95: #ffede9, + 98: #fff8f6, + 99: #fffbff, + 100: #ffffff, + 4: #170b08, + 6: #1c100d, + 12: #2a1c19, + 17: #352723, + 22: #40312d, + 24: #453632, + 87: #edd5cf, + 92: #fce3dd, + 94: #ffe9e4, + 96: #fff1ed, + ), + neutral-variant: ( + 0: #000000, + 10: #291712, + 20: #402b26, + 25: #4c3630, + 30: #59413b, + 35: #654d46, + 40: #725952, + 50: #8c716a, + 60: #a88a83, + 70: #c4a49c, + 80: #e0bfb7, + 90: #fedbd2, + 95: #ffede9, + 98: #fff8f6, + 99: #fffbff, + 100: #ffffff, + ), + error: ( + 0: #000000, + 10: #410002, + 20: #690005, + 25: #7e0007, + 30: #93000a, + 35: #a80710, + 40: #ba1a1a, + 50: #de3730, + 60: #ff5449, + 70: #ff897d, + 80: #ffb4ab, + 90: #ffdad6, + 95: #ffedea, + 98: #fff8f7, + 99: #fffbff, + 100: #ffffff, + ), +); + +$_rest: ( + secondary: map.get($_palettes, secondary), + neutral: map.get($_palettes, neutral), + neutral-variant: map.get($_palettes, neutral-variant), + error: map.get($_palettes, error), +); + +$primary-palette: map.merge(map.get($_palettes, primary), $_rest); +$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest); + +@function _high-contrast-value($light, $dark, $theme-type) { + @if ($theme-type == light) { + @return $light; + } + @if ($theme-type == dark) { + @return $dark; + } + @if ($theme-type == color-scheme) { + @return light-dark(#{$light}, #{$dark}); + } + + @error 'Unknown theme-type #{$theme-type}. Expected light, dark, or color-scheme'; +} + +@mixin high-contrast-overrides($theme-type) { + @include mat.theme-overrides(( + primary: _high-contrast-value(#591200, #ffece7, $theme-type), + on-primary: _high-contrast-value(#ffffff, #000000, $theme-type), + primary-container: _high-contrast-value(#8c2100, #ffaf99, $theme-type), + on-primary-container: _high-contrast-value(#ffffff, #1e0300, $theme-type), + inverse-primary: _high-contrast-value(#ffb5a1, #8a2100, $theme-type), + primary-fixed: _high-contrast-value(#8c2100, #ffdbd1, $theme-type), + primary-fixed-dim: _high-contrast-value(#641500, #ffb5a1, $theme-type), + on-primary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type), + on-primary-fixed-variant: _high-contrast-value(#ffffff, #290400, $theme-type), + secondary: _high-contrast-value(#501b0d, #ffece7, $theme-type), + on-secondary: _high-contrast-value(#ffffff, #000000, $theme-type), + secondary-container: _high-contrast-value(#753726, #ffaf99, $theme-type), + on-secondary-container: _high-contrast-value(#ffffff, #1e0300, $theme-type), + secondary-fixed: _high-contrast-value(#753726, #ffdbd1, $theme-type), + secondary-fixed-dim: _high-contrast-value(#582212, #ffb5a1, $theme-type), + on-secondary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type), + on-secondary-fixed-variant: _high-contrast-value(#ffffff, #290400, $theme-type), + tertiary: _high-contrast-value(#372b00, #ffefc5, $theme-type), + on-tertiary: _high-contrast-value(#ffffff, #000000, $theme-type), + tertiary-container: _high-contrast-value(#594700, #e4bf3c, $theme-type), + on-tertiary-container: _high-contrast-value(#ffffff, #100b00, $theme-type), + tertiary-fixed: _high-contrast-value(#594700, #ffe080, $theme-type), + tertiary-fixed-dim: _high-contrast-value(#3e3100, #e8c340, $theme-type), + on-tertiary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type), + on-tertiary-fixed-variant: _high-contrast-value(#ffffff, #171000, $theme-type), + background: _high-contrast-value(#fff8f6, #1c100d, $theme-type), + on-background: _high-contrast-value(#251915, #f6ddd7, $theme-type), + surface: _high-contrast-value(#fff8f6, #1c100d, $theme-type), + surface-dim: _high-contrast-value(#cab4ae, #1c100d, $theme-type), + surface-bright: _high-contrast-value(#fff8f6, #5d4c48, $theme-type), + surface-container-low: _high-contrast-value(#ffede9, #2a1c19, $theme-type), + surface-container-lowest: _high-contrast-value(#ffffff, #000000, $theme-type), + surface-container: _high-contrast-value(#f6ddd7, #3c2d29, $theme-type), + surface-container-high: _high-contrast-value(#e7cfc9, #473834, $theme-type), + surface-container-highest: _high-contrast-value(#d9c2bc, #53433f, $theme-type), + on-surface: _high-contrast-value(#000000, #ffffff, $theme-type), + shadow: _high-contrast-value(#000000, #000000, $theme-type), + scrim: _high-contrast-value(#000000, #000000, $theme-type), + surface-tint: _high-contrast-value(#ab3511, #ffb5a1, $theme-type), + inverse-surface: _high-contrast-value(#3c2d29, #f6ddd7, $theme-type), + inverse-on-surface: _high-contrast-value(#ffffff, #000000, $theme-type), + outline: _high-contrast-value(#3c2722, #ffece7, $theme-type), + outline-variant: _high-contrast-value(#5b443d, #dcbbb3, $theme-type), + error: _high-contrast-value(#600004, #ffece9, $theme-type), + on-error: _high-contrast-value(#ffffff, #000000, $theme-type), + error-container: _high-contrast-value(#98000a, #ffaea4, $theme-type), + on-error-container: _high-contrast-value(#ffffff, #220001, $theme-type), + surface-variant: _high-contrast-value(#fedbd2, #59413b, $theme-type), + on-surface-variant: _high-contrast-value(#000000, #ffffff, $theme-type), + )) + } diff --git a/src/styles.scss b/src/styles.scss index 7a6febb..ee94070 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,12 +1,13 @@ /* You can add global styles to this file, and also import other style files */ @use "@angular/material" as mat; +@use "theme-colors" as theme; html { color-scheme: dark; @include mat.theme( ( - color: mat.$rose-palette, + color: theme.$primary-palette, // typography: Roboto, // density: 0, )