diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 03d1f53..9bc9906 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -40,12 +40,23 @@
     <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
     @endswitch
     @else
-    <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
-    <script>
+    <style> 
+    html {
+        // do this to prevent hurting of the eyes while the js loads
+        background: black;
+    }
+    </style>
+    <script>        
     function getDarkMode() {
         var currentTime = new Date().getHours();
         if (6 >= currentTime || currentTime > 18) {
-            // it is night time for the user, let's force dark mode.
+            var li = document.createElement('link');
+            var href = "{{ asset('css/app.css?id='.Str::random(8)) }}";
+            var rel = 'stylesheet';
+            li.setAttribute('href', href);
+            li.setAttribute('rel', rel);
+            var s = document.getElementsByTagName('head')[0];
+            s.appendChild(li, s);
             var li = document.createElement('link');
             var href = "{{ asset('css/appdark.css?id='.Str::random(8)) }}";
             var rel = 'stylesheet';
@@ -53,6 +64,14 @@
             li.setAttribute('rel', rel);
             var s = document.getElementsByTagName('head')[0];
             s.appendChild(li, s);
+        } else {
+            var li = document.createElement('link');
+            var href = "{{ asset('css/app.css?id='.Str::random(8)) }}";
+            var rel = 'stylesheet';
+            li.setAttribute('href', href);
+            li.setAttribute('rel', rel);
+            var s = document.getElementsByTagName('head')[0];
+            s.appendChild(li, s);
         }
     }
     getDarkMode()
diff --git a/resources/views/layouts/loggedout.blade.php b/resources/views/layouts/loggedout.blade.php
index b4cfb46..cbc7f4f 100644
--- a/resources/views/layouts/loggedout.blade.php
+++ b/resources/views/layouts/loggedout.blade.php
@@ -37,12 +37,23 @@
     <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
     @endswitch
     @else
-    <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
-    <script>
+    <style> 
+    html {
+        // do this to prevent hurting of the eyes while the js loads
+        background: black;
+    }
+    </style>
+    <script>        
     function getDarkMode() {
         var currentTime = new Date().getHours();
         if (6 >= currentTime || currentTime > 18) {
-            // it is night time for the user, let's force dark mode.
+            var li = document.createElement('link');
+            var href = "{{ asset('css/app.css?id='.Str::random(8)) }}";
+            var rel = 'stylesheet';
+            li.setAttribute('href', href);
+            li.setAttribute('rel', rel);
+            var s = document.getElementsByTagName('head')[0];
+            s.appendChild(li, s);
             var li = document.createElement('link');
             var href = "{{ asset('css/appdark.css?id='.Str::random(8)) }}";
             var rel = 'stylesheet';
@@ -50,6 +61,14 @@
             li.setAttribute('rel', rel);
             var s = document.getElementsByTagName('head')[0];
             s.appendChild(li, s);
+        } else {
+            var li = document.createElement('link');
+            var href = "{{ asset('css/app.css?id='.Str::random(8)) }}";
+            var rel = 'stylesheet';
+            li.setAttribute('href', href);
+            li.setAttribute('rel', rel);
+            var s = document.getElementsByTagName('head')[0];
+            s.appendChild(li, s);
         }
     }
     getDarkMode()