fix: getStyle() add nullish check

Author: xidedix

src/app/views/dashboard/dashboard-charts-data.ts

@@ -29,7 +29,7 @@ export class DashboardChartsData {
   initMainChart(period: string = 'Month') {
     const brandSuccess = getStyle('--cui-success') ?? '#4dbd74';
     const brandInfo = getStyle('--cui-info') ?? '#20a8d8';
-    const brandInfoBg = hexToRgba(getStyle('--cui-info'), 10) ?? '#20a8d8';
+    const brandInfoBg = hexToRgba(brandInfo, 10);
     const brandDanger = getStyle('--cui-danger') || '#f86c6b';
 
     // mainChart

src/app/views/theme/colors.component.ts

@@ -16,23 +16,23 @@ export class ColorsComponent implements OnInit, AfterViewInit {
 
   public themeColors(): void {
     Array.from(this.document.querySelectorAll('.theme-color')).forEach(
-      // @ts-ignore
-      (el: HTMLElement) => {
-        const background = getStyle('background-color', el);
+      (element: Element) => {
+        const htmlElement = element as HTMLElement;
+        const background = getStyle('background-color', htmlElement) ?? '#fff';
         const table = this.renderer.createElement('table');
         table.innerHTML = `
-          <table class='table w-100'>
+          <table class="table w-100">
             <tr>
-              <td class='text-muted'>HEX:</td>
-              <td class='font-weight-bold'>${rgbToHex(background)}</td>
+              <td class="text-muted">HEX:</td>
+              <td class="font-weight-bold">${rgbToHex(background)}</td>
             </tr>
             <tr>
-              <td class='text-muted'>RGB:</td>
-              <td class='font-weight-bold'>${background}</td>
+              <td class="text-muted">RGB:</td>
+              <td class="font-weight-bold">${background}</td>
             </tr>
           </table>
         `;
-        this.renderer.appendChild(el.parentNode, table);
+        this.renderer.appendChild(htmlElement.parentNode, table);
         // @ts-ignore
         // el.parentNode.appendChild(table);
       }
@@ -49,8 +49,8 @@ export class ColorsComponent implements OnInit, AfterViewInit {
 @Component({
   selector: 'app-theme-color',
   template: `
-    <c-col xl='2' md='4' sm='6' xs='12' class='my-4 ms-4'>
-      <div [ngClass]='colorClasses' style='padding-top: 75%;'></div>
+    <c-col xl="2" md="4" sm="6" xs="12" class="my-4 ms-4">
+      <div [ngClass]="colorClasses" style="padding-top: 75%;"></div>
       <ng-content></ng-content>
     </c-col>
   `