diff --git a/src/App.vue b/src/App.vue
index 93e90f2..3568c35 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,7 +28,7 @@
         :links="config.links"
         @navbar-toggle="showMenu = !showMenu"
       >
-        <DarkMode @updated="isDark = $event" />
+        <DarkMode :isDark="this.isDark" @updated="isDark = $event" />
 
         <LayoutToggle
           @updated="vlayout = $event"
@@ -159,6 +159,8 @@ export default {
     }
     this.config = merge(defaults, config);
     this.services = this.config.services;
+    this.isDark = this.config.theme_use_dark;
+    this.vlayout = this.config.vlayout;
     document.title =
       this.config.documentTitle ||
       `${this.config.title} | ${this.config.subtitle}`;
diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index a5aae41..2eb1427 100644
--- a/src/components/DarkMode.vue
+++ b/src/components/DarkMode.vue
@@ -11,23 +11,21 @@
 <script>
 export default {
   name: "Darkmode",
-  data: function () {
-    return {
-      isDark: null,
-    };
-  },
+  props: ["isDark"],
   created: function () {
-    this.isDark =
+    var isDark =
       "overrideDark" in localStorage
         ? JSON.parse(localStorage.overrideDark)
-        : matchMedia("(prefers-color-scheme: dark)").matches;
-    this.$emit("updated", this.isDark);
+        : this.isDark === null
+        ? matchMedia("(prefers-color-scheme: dark)").matches
+        : this.isDark;
+    this.$emit("updated", isDark);
   },
   methods: {
     toggleTheme: function () {
-      this.isDark = !this.isDark;
-      localStorage.overrideDark = this.isDark;
-      this.$emit("updated", this.isDark);
+      var isDark = !this.isDark;
+      localStorage.overrideDark = isDark;
+      this.$emit("updated", isDark);
     },
   },
 };