dark mode setup example

angular.json

@@ -25,7 +25,6 @@
               "src/assets"
             ],
             "styles": [
-              "./node_modules/@sl-design-system/sanoma-learning/light.css",
               "src/styles.css"
             ],
             "scripts": []

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 {

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';

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;
 }
+