diff --git a/skolehjem/resources/sass/webapp/_defaultdark.scss b/skolehjem/resources/sass/webapp/_defaultdark.scss
index 7f0fd98..94357b7 100644
--- a/skolehjem/resources/sass/webapp/_defaultdark.scss
+++ b/skolehjem/resources/sass/webapp/_defaultdark.scss
@@ -1,5 +1,9 @@
 html, body {
-    background-color: rgba(0,0,0, 0.6);
+    background-color: rgb(102, 102, 102);
+}
+
+main {
+    background-color: rgb(102, 102, 102);
 }
 
 * {
diff --git a/skolehjem/resources/views/app/layout/base.blade.php b/skolehjem/resources/views/app/layout/base.blade.php
index 037b67d..6dc33f3 100644
--- a/skolehjem/resources/views/app/layout/base.blade.php
+++ b/skolehjem/resources/views/app/layout/base.blade.php
@@ -17,7 +17,7 @@
         <img class="w-50" id="sdeLogo" src="{{URL::asset('/images/logos/Logo-normal.svg')}}" onclick="location.href = '{{ route("root.index") }}';" alt="Syddansk Erhvervsskole">
     @endif
     <button class="ml-auto" id="toggle">
-        <i id="icon" class="fas fa-bars"></i>
+        <i id="icon" class="fas fa-bars" style="color: black;"></i>
     </button>
 </header>
 <div class="d-none bg-sde-blue col" id="menu">
@@ -69,5 +69,40 @@
 
 <script src="{{ mix("/js/app.js") }}"></script>
 @yield("scripts")
+@if(request()->cookie("mode") == "dark")
+    <script type="text/javascript">
+        function toggleMenu(menu) {
+            let menuElement = document.getElementById(menu);
+            let logoElement = document.getElementById("sdeLogo");
+            let htmlElement = document.getElementsByTagName('html')[0];
+            let mainElement = document.getElementsByTagName('main')[0];
+            let iconElement = document.getElementById("icon");
+            let headerElement = document.getElementById("header");
+
+            if(menuElement.classList.contains("hide")) {
+                menuElement.classList.remove("hide");
+                mainElement.classList.remove("d-none");
+                htmlElement.style.backgroundColor = '';
+                logoElement.src = '/images/logos/Logo-hvid.svg';
+                iconElement.classList.remove("fa-times");
+                iconElement.classList.add("fa-bars");
+                headerElement.style.backgroundColor = '';
+            } else {
+                menuElement.classList.add("hide");
+                mainElement.classList.add("d-none");
+                htmlElement.style.backgroundColor = 'rgb(0, 120, 138)';
+                logoElement.src = '/images/logos/Logo-hvid.svg';
+                iconElement.classList.remove("fa-bars");
+                iconElement.classList.add("fa-times");
+                headerElement.style.backgroundColor = 'rgb(0, 120, 138)';
+            }
+        }
+
+        if(document.getElementById("toggle"))
+            document.getElementById("toggle").onclick = function () {
+                toggleMenu('menu');
+            };
+    </script>
+@endif
 </body>
 </html>
diff --git a/skolehjem/resources/views/app/news/index.blade.php b/skolehjem/resources/views/app/news/index.blade.php
index eb4a6b6..c6a2e7c 100644
--- a/skolehjem/resources/views/app/news/index.blade.php
+++ b/skolehjem/resources/views/app/news/index.blade.php
@@ -17,7 +17,7 @@
         <img class="w-50" id="sdeLogo" src="{{URL::asset('/images/logos/Logo-normal.svg')}}" onclick="location.href = '{{ route("root.index") }}';" alt="Syddansk Erhvervsskole">
     @endif
     <button class="ml-auto" id="toggle">
-        <i id="icon" class="fas fa-bars"></i>
+        <i id="icon" class="fas fa-bars" style="color: black;"></i>
     </button>
 </header>
 <div class="d-none bg-sde-blue col" id="menu">
@@ -114,5 +114,40 @@
 </main>
 <script src="{{ mix("/js/app.js") }}"></script>
 @yield("scripts")
+@if(request()->cookie("mode") == "dark")
+    <script type="text/javascript">
+        function toggleMenu(menu) {
+            let menuElement = document.getElementById(menu);
+            let logoElement = document.getElementById("sdeLogo");
+            let htmlElement = document.getElementsByTagName('html')[0];
+            let mainElement = document.getElementsByTagName('main')[0];
+            let iconElement = document.getElementById("icon");
+            let headerElement = document.getElementById("header");
+
+            if(menuElement.classList.contains("hide")) {
+                menuElement.classList.remove("hide");
+                mainElement.classList.remove("d-none");
+                htmlElement.style.backgroundColor = '';
+                logoElement.src = '/images/logos/Logo-hvid.svg';
+                iconElement.classList.remove("fa-times");
+                iconElement.classList.add("fa-bars");
+                headerElement.style.backgroundColor = '';
+            } else {
+                menuElement.classList.add("hide");
+                mainElement.classList.add("d-none");
+                htmlElement.style.backgroundColor = 'rgb(0, 120, 138)';
+                logoElement.src = '/images/logos/Logo-hvid.svg';
+                iconElement.classList.remove("fa-bars");
+                iconElement.classList.add("fa-times");
+                headerElement.style.backgroundColor = 'rgb(0, 120, 138)';
+            }
+        }
+
+        if(document.getElementById("toggle"))
+            document.getElementById("toggle").onclick = function () {
+                toggleMenu('menu');
+            };
+    </script>
+@endif
 </body>
 </html>