Use correct bg color from the theme

booklore-ui/package-lock.json

@@ -23,7 +23,6 @@
         "ng-lazyload-image": "^9.1.3",
         "ngx-extended-pdf-viewer": "^22.0.0",
         "ngx-infinite-scroll": "^19.0.0",
-        "primeflex": "^3.3.1",
         "primeicons": "^7.0.0",
         "primeng": "19.0.2",
         "rxjs": "~7.8.0",
@@ -12000,12 +11999,6 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "license": "MIT"
     },
-    "node_modules/primeflex": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.3.1.tgz",
-      "integrity": "sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ==",
-      "license": "MIT"
-    },
     "node_modules/primeicons": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",

booklore-ui/package.json

@@ -25,7 +25,6 @@
     "ng-lazyload-image": "^9.1.3",
     "ngx-extended-pdf-viewer": "^22.0.0",
     "ngx-infinite-scroll": "^19.0.0",
-    "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
     "primeng": "19.0.2",
     "rxjs": "~7.8.0",

booklore-ui/src/app/book/component/configurator/configurator.component.ts

@@ -40,6 +40,7 @@ const presets = {
   imports: [CommonModule, FormsModule, InputSwitchModule, ButtonModule, RadioButtonModule, SelectButton, ToggleSwitchModule]
 })
 export class AppConfiguratorComponent {
+
   get ripple() {
     return this.config.ripple();
   }
@@ -49,20 +50,9 @@ export class AppConfiguratorComponent {
   }
 
   config: PrimeNG = inject(PrimeNG);
-
   configService: AppConfigService = inject(AppConfigService);
-
-  platformId = inject(PLATFORM_ID);
-
   presets = Object.keys(presets);
 
-
-  ngOnInit() {
-    if (isPlatformBrowser(this.platformId)) {
-      this.onPresetChange(this.configService.appState().preset);
-    }
-  }
-
   surfaces = [
     {
       name: 'slate',
@@ -246,20 +236,6 @@ export class AppConfiguratorComponent {
             950: '{surface.950}'
           },
           colorScheme: {
-            light: {
-              primary: {
-                color: '{primary.950}',
-                contrastColor: '#ffffff',
-                hoverColor: '{primary.800}',
-                activeColor: '{primary.700}'
-              },
-              highlight: {
-                background: '{primary.950}',
-                focusBackground: '{primary.700}',
-                color: '#ffffff',
-                focusColor: '#ffffff'
-              }
-            },
             dark: {
               primary: {
                 color: '{primary.50}',
@@ -283,20 +259,6 @@ export class AppConfiguratorComponent {
           semantic: {
             primary: color!.palette,
             colorScheme: {
-              light: {
-                primary: {
-                  color: '{primary.600}',
-                  contrastColor: '#ffffff',
-                  hoverColor: '{primary.700}',
-                  activeColor: '{primary.800}'
-                },
-                highlight: {
-                  background: '{primary.600}',
-                  focusBackground: '{primary.700}',
-                  color: '#ffffff',
-                  focusColor: '#ffffff'
-                }
-              },
               dark: {
                 primary: {
                   color: '{primary.500}',
@@ -319,20 +281,6 @@ export class AppConfiguratorComponent {
           semantic: {
             primary: color!.palette,
             colorScheme: {
-              light: {
-                primary: {
-                  color: '{primary.500}',
-                  contrastColor: '#ffffff',
-                  hoverColor: '{primary.400}',
-                  activeColor: '{primary.300}'
-                },
-                highlight: {
-                  background: 'color-mix(in srgb, {primary.color}, transparent 88%)',
-                  focusBackground: 'color-mix(in srgb, {primary.color}, transparent 76%)',
-                  color: '{primary.700}',
-                  focusColor: '{primary.800}'
-                }
-              },
               dark: {
                 primary: {
                   color: '{primary.400}',
@@ -355,20 +303,6 @@ export class AppConfiguratorComponent {
           semantic: {
             primary: color!.palette,
             colorScheme: {
-              light: {
-                primary: {
-                  color: '{primary.500}',
-                  contrastColor: '#ffffff',
-                  hoverColor: '{primary.600}',
-                  activeColor: '{primary.700}'
-                },
-                highlight: {
-                  background: '{primary.50}',
-                  focusBackground: '{primary.100}',
-                  color: '{primary.700}',
-                  focusColor: '{primary.800}'
-                }
-              },
               dark: {
                 primary: {
                   color: '{primary.400}',

booklore-ui/src/assets/layout/styles/layout/_main.scss

@@ -12,7 +12,7 @@ html {
 body {
     font-family: var(--font-family);
     color: var(--text-color);
-    background-color: var(--surface-ground);
+    background-color: var(--ground-background);
     margin: 0;
     padding: 0;
     min-height: 100%;