diff --git a/src/app/components/shared/footer/footer.component.ts b/src/app/components/shared/footer/footer.component.ts
index 6cba039d5c54209b096782eb9ae1d556d9de4149..ce858113a5af58684f945f48a91034c12ab2a8fb 100644
--- a/src/app/components/shared/footer/footer.component.ts
+++ b/src/app/components/shared/footer/footer.component.ts
@@ -71,17 +71,6 @@ export class FooterComponent implements OnInit {
       });
     });
     this.deviceType = localStorage.getItem('deviceType');
-    if (!this.themeService.getThemeByKey(this.themeClass) || !this.themeService.getTheme()['source']['_value']) {
-      if (this.deviceType === 'mobile') {
-        this.themeService.activate('dark');
-        this.themeClass = 'dark';
-      } else {
-        // this.themeService.activate('arsnova');
-        // this.themeClass = 'arsnova';
-        this.themeService.activate('dark');
-        this.themeClass = 'dark';
-      }
-    }
     this.styleService.setColor(this.themeService.getThemeByKey(this.themeClass).isDark);
     this.translateService.use(localStorage.getItem('currentLang'));
     this.translateService.get('footer.open').subscribe(message => {
diff --git a/src/theme/theme.directive.ts b/src/theme/theme.directive.ts
index 40d08c6e9faecb15ffb2e396a8e1cf3b9813e3ca..b175ba97362385e711c0f461622713c96c5fff1b 100644
--- a/src/theme/theme.directive.ts
+++ b/src/theme/theme.directive.ts
@@ -10,7 +10,7 @@ import { Subscription } from 'rxjs';
 
 export class ThemeDirective implements OnInit, OnDestroy {
 
-  private themeName = 'dark';
+  private themeName;
   private themServiceSubscription: Subscription;
 
   constructor(private elementRef: ElementRef,
@@ -20,7 +20,6 @@ export class ThemeDirective implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.updateTheme(this.themeName);
     this.themService.getTheme()
       .subscribe(themeName => {
         this.themeName = themeName;
@@ -29,7 +28,7 @@ export class ThemeDirective implements OnInit, OnDestroy {
   }
 
   updateTheme(themeName: string) {
-    const them = themes[ themeName ];
+    const them = themes[themeName];
     for (const key in them) {
       if (them.hasOwnProperty(key)) {
         this.renderer.setProperty(this.elementRef.nativeElement, key, them[key]);
diff --git a/src/theme/theme.service.ts b/src/theme/theme.service.ts
index e541a0f282f194b5129b9c42dada89494981c173..5f87214724f3b4b38f12ad6aad786dca21c72a57 100644
--- a/src/theme/theme.service.ts
+++ b/src/theme/theme.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { themes, themes_meta } from './arsnova-theme.const';
-import { Theme, ThemeTranslationList } from './Theme';
+import { Theme } from './Theme';
 
 @Injectable({
   providedIn: 'root'
@@ -28,6 +28,17 @@ export class ThemeService {
       }
       return 0;
     });
+    if (!this.themeName) {
+      const isDark = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)').matches : true;
+      for (let i = this.themes.length - 1; i > 0; i--) {
+        const theme = this.themes[i];
+        if (theme.isDark === isDark) {
+          this.themeName = theme.key;
+          break;
+        }
+      }
+      this.activate(this.themeName);
+    }
   }
 
   public getTheme() {