refactor: Light and dark themes (#588)

tammy-a11y · web-flow · commit cc09253e43f4 · 2025-11-25T13:41:40.000+05:30
diff --git a/sdk-config.json b/sdk-config.json
@@ -2,6 +2,7 @@
   "comment_sdk_config": "This is the configuration file for the Angular SDK",
   "sdk_optional_configs_doc_comment": "See the document(link below) for more details on all the available config settings",
   "sdk_optional_configs_doc": "https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/configuring-sdk-config-json.html",
+  "theme": "dark",
   "authConfig": {
     "authService": "pega",
 
diff --git a/src/app/_samples/embedded/embedded.component.scss b/src/app/_samples/embedded/embedded.component.scss
@@ -5,12 +5,12 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: var(--app-background-color);
   position: fixed;
   z-index: 99999;
   top: 0px;
   left: 0px;
   opacity: 0.5;
+  background-color: var(--mat-sys-background);
 }
 
 .progress-spinner {
diff --git a/src/app/_samples/embedded/embedded.component.ts b/src/app/_samples/embedded/embedded.component.ts
@@ -60,7 +60,9 @@ export class EmbeddedComponent implements OnInit, OnDestroy {
     // Add event listener for when logged in and constellation bootstrap is loaded
     document.addEventListener('SdkConstellationReady', () => this.handleSdkConstellationReady());
 
-    const { authConfig } = await getSdkConfig();
+    const { authConfig, theme } = await getSdkConfig();
+    document.body.classList.remove(...['light', 'dark']);
+    document.body.classList.add(theme || 'dark');
 
     initializeAuthentication(authConfig);
 
diff --git a/src/app/_samples/embedded/header/header.component.scss b/src/app/_samples/embedded/header/header.component.scss
@@ -10,7 +10,7 @@
 .psdk-aside {
   height: calc(100% - 64px);
   width: 12.5rem;
-  border-right: 1px solid var(--app-neutral-light-color);
+  border-right: 1px solid var(--mat-sys-outline-variant);
 }
 
 .psdk-main {
diff --git a/src/app/_samples/embedded/main-screen/main-screen.component.scss b/src/app/_samples/embedded/main-screen/main-screen.component.scss
@@ -24,7 +24,7 @@
 
 .mc-work-button {
   font-size: 22px;
-  color: var(--app-primary-color);
+  color: var(--mat-sys-primary);
   text-decoration: underline;
   padding-top: 10px;
 }
diff --git a/src/app/_samples/embedded/resolution-screen/resolution-screen.component.scss b/src/app/_samples/embedded/resolution-screen/resolution-screen.component.scss
@@ -14,7 +14,6 @@
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   padding: 30px;
-  color: var(--app-form-color);
   font-weight: bold;
   font-size: 60px;
 }
@@ -33,8 +32,7 @@
 }
 
 .mc-chat-button {
-  color: var(--app-form-color);
-  background-color: var(--app-secondary-color);
+  color: var(--mat-sys-surface-container);
   font-size: 25px;
   font-weight: bold;
   border-radius: 25px;
diff --git a/src/app/_samples/embedded/shopping-card/shopping-card.component.scss b/src/app/_samples/embedded/shopping-card/shopping-card.component.scss
@@ -9,19 +9,18 @@
   justify-content: space-around;
   width: 210px;
   height: 70px;
-  background-color: var(--app-swtach-package-background);
+  background-color: var(--app-swatch-package-background);
+  color: var(--mat-sys-on-primary);
   padding: 5px;
 }
 
 .mc-swatch-package .mc-swatch-play {
   letter-spacing: normal;
-  color: var(--app-form-color);
   font-size: 25px;
 }
 
 .mc-swatch-package .mc-swatch-level {
   letter-spacing: normal;
-  color: var(--app-form-color);
   font-size: 28px;
   font-weight: bold;
 }
@@ -38,21 +37,18 @@
 
 .mc-swatch-channels .mc-swatch-count {
   letter-spacing: normal;
-  color: var(--app-form-color);
   font-size: 40px;
   font-weight: bold;
 }
 
 .mc-swatch-channels .mc-swatch-label {
   letter-spacing: normal;
-  color: var(--app-form-color);
   font-size: 17px;
 }
 
 .mc-swatch-body {
   letter-spacing: normal;
-  border: 1px solid var(--app-neutral-light-color);
-  background-color: var(--app-swatch-background);
+  border: 1px solid var(--mat-sys-outline-variant);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -77,21 +73,21 @@
 }
 
 .mc-swatch-body .mc-swatch-from {
-  color: var(--app-primary-color);
+  color: var(--mat-sys-primary);
   text-align: right;
 }
 
 .mc-swatch-body .mc-swatch-currency {
   letter-spacing: normal;
-  color: var(--app-primary-color);
+  color: var(--mat-sys-primary);
   font-size: 30px;
   font-weight: bold;
   font-family: Tahoma;
 }
 
 .mc-swatch-body .mc-swatch-dollars {
   letter-spacing: normal;
-  color: var(--app-primary-color);
+  color: var(--mat-sys-primary);
   font-size: 90px;
   font-weight: bold;
   font-family: Tahoma;
@@ -104,14 +100,14 @@
 
 .mc-swatch-body .mc-swatch-cents {
   letter-spacing: normal;
-  color: var(--app-primary-color);
+  color: var(--mat-sys-primary);
   font-size: 20px;
   font-weight: bold;
 }
 
 .mc-swatch-body .mc-swatch-shop-button {
-  color: var(--app-form-color);
-  background-color: var(--app-secondary-color);
+  color: var(--mat-sys-on-primary);
+  background-color: var(--mat-sys-primary);
   font-size: 25px;
   font-weight: bold;
   border-radius: 25px;
diff --git a/src/app/_samples/full-portal/full-portal.component.scss b/src/app/_samples/full-portal/full-portal.component.scss
@@ -9,7 +9,6 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: var(--app-background-color);
   position: fixed;
   z-index: 99999;
   top: 0rem;
@@ -35,12 +34,10 @@
   text-align: center;
   font-weight: 500;
   letter-spacing: 0.5px;
-  color: var(--app-error-light-color);
 }
 
 .portal-load-error .portal-name {
   font-style: italic;
-  color: var(--app-warning-color-dark);
 }
 
 .logout-btn {
@@ -52,27 +49,22 @@
   border: 3px solid var(--app-neutral-color);
   border-radius: 10px;
   padding: 8px 2em;
-  color: var(--app-warning-color);
   font-weight: 500;
   letter-spacing: 0.5px;
   cursor: pointer;
 }
 
 .logout-btn:hover {
-  background: var(--app-warning-color-dark);
-  color: var(--app-form-color);
 }
 
 .portals-list {
   display: flex;
   justify-content: center;
   align-content: center;
   gap: 1em;
-  color: var(--app-primary-light-color);
   text-decoration: underline;
 }
 
 .portal-list-item:hover {
   cursor: pointer;
-  color: var(--app-primary-dark-color);
 }
diff --git a/src/app/_samples/full-portal/full-portal.component.ts b/src/app/_samples/full-portal/full-portal.component.ts
@@ -55,10 +55,11 @@ export class FullPortalComponent implements OnInit, OnDestroy {
     private scservice: ServerConfigService
   ) {}
 
-  ngOnInit() {
-    this.scservice.readSdkConfig().then(() => {
-      this.initialize();
-    });
+  async ngOnInit() {
+    const { theme } = await this.scservice.readSdkConfig();
+    document.body.classList.remove(...['light', 'dark']);
+    document.body.classList.add(theme || 'dark');
+    this.initialize();
   }
 
   ngOnDestroy() {
diff --git a/src/app/_samples/simple-portal/navigation/navigation.component.scss b/src/app/_samples/simple-portal/navigation/navigation.component.scss
@@ -29,7 +29,7 @@
 .psdk-aside {
   height: calc(100% - 64px);
   width: 12.5rem;
-  border-right: 1px solid lightgray;
+  border-right: 1px solid var(--mat-sys-outline-variant);
 }
 
 .psdk-main {
diff --git a/src/containerStyles.scss b/src/containerStyles.scss
@@ -9,12 +9,12 @@ app-flow-container {
   }
 
   .psdk-case-view-divider {
-    border-bottom: 0.0625rem solid var(--app-neutral-light-color);
+    border-bottom: 0.0625rem solid var(--mat-sys-outline-variant);
   }
 
   .psdk-flow-container-top {
-    background-color: var(--app-form-color);
-    padding: 0rem 0.625rem;
+    background-color: var(--mat-sys-surface-container);
+    padding: 0.5rem 0.625rem;
     border-radius: 0.3125rem;
   }
   .psdk-flow-container {
@@ -42,7 +42,7 @@ app-modal-view-container {
     align-items: center;
     height: 100%;
     width: 100%;
-    background-color: var(--app-dialog-background-color);
+    background-color: rgba(0, 0, 0, 0.6);
     position: fixed;
     z-index: 999;
     top: 0px;
@@ -53,11 +53,11 @@ app-modal-view-container {
     display: block;
     margin: auto;
     min-width: 650px;
-    background-color: var(--app-form-color);
-    border: 1px solid var(--app-inverse-form-color);
+    background-color: var(--mat-sys-surface-container);
+    border: 1px solid var(--mat-sys-outline-variant);
     border-radius: 10px;
     padding: 20px;
-    box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
+    box-shadow: 0 0 10px 3px var(--mat-sys-level3);
     overflow-y: auto;
   }
 
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,23 +1,17 @@
 /* You can add global styles to this file, and also import other style files */
 @import 'https://fonts.googleapis.com/icon?family=Material+Icons';
-// @import '@angular/material/prebuilt-themes/deeppurple-amber.css';
-/*@import "@angular/material/prebuilt-themes/pink-bluegrey.css";*/
-@import './containerStyles.scss';
-@import 'theme';
 @import '@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';
-
-html,
-body {
-  @include generate-theme-vars($my-theme);
-}
+@import 'containerStyles';
+@import 'themes';
 
 html,
 body {
   height: 100%;
-}
-body {
+  background-color: var(--mat-sys-background);
+  color: var(--mat-sys-on-background);
   margin: 0;
   font-family: Roboto, 'Helvetica Neue', sans-serif;
+  @include generate-theme-vars();
 }
 
 button.mat-mdc-menu-item {
@@ -82,7 +76,3 @@ a.mat-mdc-menu-item > mat-icon {
 .mat-mdc-form-field {
   margin: 8px 0;
 }
-
-.ngx-mat-tel-input-container button {
-  margin-top: auto;
-}
diff --git a/src/theme.scss b/src/theme.scss
diff --git a/src/themes.scss b/src/themes.scss

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`.psdk-aside {`
`11`	`11`	`height: calc(100% - 64px);`
`12`	`12`	`width: 12.5rem;`
`13`		`- border-right: 1px solid var(--app-neutral-light-color);`
	`13`	`+ border-right: 1px solid var(--mat-sys-outline-variant);`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`.psdk-main {`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@`
`24`	`24`
`25`	`25`	`.mc-work-button {`
`26`	`26`	`font-size: 22px;`
`27`		`- color: var(--app-primary-color);`
	`27`	`+ color: var(--mat-sys-primary);`
`28`	`28`	`text-decoration: underline;`
`29`	`29`	`padding-top: 10px;`
`30`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@`
`29`	`29`	`.psdk-aside {`
`30`	`30`	`height: calc(100% - 64px);`
`31`	`31`	`width: 12.5rem;`
`32`		`- border-right: 1px solid lightgray;`
	`32`	`+ border-right: 1px solid var(--mat-sys-outline-variant);`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`.psdk-main {`