diff --git a/angular.json b/angular.json
index b235ab7..949bed9 100644
--- a/angular.json
+++ b/angular.json
@@ -25,7 +25,6 @@
               "src/assets"
             ],
             "styles": [
-              "./node_modules/@sl-design-system/sanoma-learning/light.css",
               "src/styles.css"
             ],
             "scripts": []
diff --git a/src/app/app.component.css b/src/app/app.component.css
index 9fa781d..50b1195 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -22,6 +22,7 @@
   justify-content: flex-start;
   min-block-size: 100%;
   position: relative;
+  background-color: var(--sl-elevation-surface-base-default);
 }
 
 .content {
diff --git a/src/main.ts b/src/main.ts
index 3488e64..946bb5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,3 @@
-import '@oddbird/popover-polyfill';
 import '@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
diff --git a/src/styles.css b/src/styles.css
index 9765a14..7af5983 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,5 +1,8 @@
+@import url("../node_modules/@sl-design-system/sanoma-learning/light.css");
+@import url("../node_modules/@sl-design-system/sanoma-learning/dark.css") screen and (prefers-color-scheme:dark);
 /* You can add global styles to this file, and also import other style files */
 html, body {
   padding: 0;
   margin: 0;
 }
+