diff --git a/app/Http/Controllers/SettingsController.php b/app/Http/Controllers/SettingsController.php
index 0d0d52f7540da82bf734e811bf07c26db89bcb58..4e7a7b0206c563f0ca96a8ee3e6471263f65f65c 100644
--- a/app/Http/Controllers/SettingsController.php
+++ b/app/Http/Controllers/SettingsController.php
@@ -72,6 +72,18 @@ class SettingsController extends Controller
         # Generating link with set cookies
         $cookieLink = LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('loadSettings', $cookies));
 
+        # Checking if dark mode active
+        $darkmode = 0;
+        foreach($cookies as $key => $value){
+            if($key === 'dark_mode'){
+                if($value === 1)
+                    $darkmode = 1;
+                elseif($value === 2){
+                    $darkmode = 2;
+                }
+            }
+        }
+
         return view('settings.index')
             ->with('title', trans('titles.settings', ['fokus' => $fokusName]))
             ->with('fokus', $request->input('fokus', ''))
@@ -82,7 +94,8 @@ class SettingsController extends Controller
             ->with('settingActive', $settingActive)
             ->with('url', $url)
             ->with('blacklist', $blacklist)
-            ->with('cookieLink', $cookieLink);
+            ->with('cookieLink', $cookieLink)
+            ->with('darkmode', $darkmode);
     }
 
     private function getSumas($fokus)
@@ -394,4 +407,34 @@ class SettingsController extends Controller
 
         return redirect(LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), url('/')));
     }
+
+    public function darkmode(Request $request)
+    {
+        $fokus = $request->input('fokus', '');
+        $url = $request->input('url', '');
+
+        $path = \Request::path();
+        $cookiePath = "/" . substr($path, 0, strpos($path, "meta/") + 5);
+
+        $cookies = Cookie::get();
+        $setCookie = true;
+        
+        $darkmode = "0";
+
+        if(!empty($cookies)){
+            foreach($cookies as $key => $value){
+                if($key === 'dark_mode'){
+                    if($value === "0" || $value == "1"){
+                        $darkmode = "2";
+                    }elseif($value === "2"){
+                        $darkmode = "1";
+                    }
+                    Cookie::queue('dark_mode', $darkmode, 0, $cookiePath, null, false, false);
+                    $setCookie = false;
+                }
+            }
+        }else{
+            Cookie::queue('dark_mode', "2", 0, $cookiePath, null, false, false);
+        }
+        return redirect(LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('settings', ["fokus" => $fokus, "url" => $url])));    }
 }
diff --git a/app/Http/Controllers/StartpageController.php b/app/Http/Controllers/StartpageController.php
index d38be544d90d51cdb86b1b06d9e010e43203914e..d270ccab61b13e463f4b26cfd657bf83c3ce477f 100644
--- a/app/Http/Controllers/StartpageController.php
+++ b/app/Http/Controllers/StartpageController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use App;
+use Cookie;
 use Illuminate\Http\Request;
 use Jenssegers\Agent\Agent;
 use LaravelLocalization;
@@ -42,6 +43,15 @@ class StartpageController extends Controller
             $lang = 'all';
         }
 
+        $darkmode = 0;
+
+        $cookies = Cookie::get();
+        foreach($cookies as $key => $value){
+            if($key === 'dark_mode' && $value === 1){
+                $darkmode = 1;
+            }
+        }
+
         return view('index')
             ->with('title', trans('titles.index'))
             ->with('homeIcon')
@@ -52,7 +62,8 @@ class StartpageController extends Controller
             ->with('request', $request->input('request', 'GET'))
             ->with('option_values', $option_values)
             ->with('autocomplete', $autocomplete)
-            ->with('pluginmodal', $request->input('plugin-modal', 'off'));
+            ->with('pluginmodal', $request->input('plugin-modal', 'off'))
+            ->with('darkmode', $darkmode);
     }
 
     public function loadPage($subpage)
diff --git a/resources/lang/de/settings.php b/resources/lang/de/settings.php
index e0ba814efba9ab44714bd6bcac8de27b962771a7..767731f2127ffbb28981aba6c4addf7c251bffd3 100644
--- a/resources/lang/de/settings.php
+++ b/resources/lang/de/settings.php
@@ -25,6 +25,7 @@ return [
     'add' => 'Hinzufügen',
     'clear' => 'Blacklist leeren',
     'copy' => 'Kopieren',
+    'darkmode' => 'Dunklen Modus umschalten',
 
     // Translations from the settings overview
     'noSettings' => 'Aktuell sind keine Einstellungen gesetzt!',
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
index f1968e6af73debed4fd1ae0e8eb7b1765e4a3a2d..f97149f6f3f3ce10d94f970484a22034c7754338 100644
--- a/resources/lang/en/settings.php
+++ b/resources/lang/en/settings.php
@@ -25,6 +25,7 @@ return [
     'add' => 'Add',
     'clear' => 'Clear black list',
     'copy' => 'Copy',
+    'darkmode' => 'Toggle dark mode',
 
     // Translations from the settings overview
     'noSettings' => "Currently no settings are set!",
diff --git a/resources/less/metager/metager-dark.less b/resources/less/metager/metager-dark.less
index df6cf7ab96bf9347d1396018bb713eacf5d7e46a..ddd5b804f7d58b47c7d3fad1b4c67844f522f56c 100644
--- a/resources/less/metager/metager-dark.less
+++ b/resources/less/metager/metager-dark.less
@@ -3,7 +3,7 @@
 
 // Variables
 @import "./bs-variables.less";
-@import "./variables.less";
+//@import "./variables.less";
 @import "./variables-dark.less";
 
 // General
diff --git a/resources/less/metager/parts/scaffolding.less b/resources/less/metager/parts/scaffolding.less
index 6f7f55a9c2d76442b1c35769894b3ade14f9fc24..1d926a60700ab7423e3039dc2b4d5007a4f51522 100644
--- a/resources/less/metager/parts/scaffolding.less
+++ b/resources/less/metager/parts/scaffolding.less
@@ -11,8 +11,8 @@ body{
     font-family:"Helvetica Neue", Helvetica, Arial, sans-serif ;
     font-size: 1em;
     line-height:1.428571429 ;
-    color: black;
-    background-color:#fff ;
+    color:@text-color;
+    background-color:@background-color;
 
 }
 
diff --git a/resources/less/metager/startpage-only-dark.less b/resources/less/metager/startpage-only-dark.less
new file mode 100644
index 0000000000000000000000000000000000000000..cef1a570c44b02841570be259630658d44be05e3
--- /dev/null
+++ b/resources/less/metager/startpage-only-dark.less
@@ -0,0 +1,2 @@
+@import "./variables-dark.less";
+@import "./startpage-only.less";
\ No newline at end of file
diff --git a/resources/less/metager/startpage-only-light.less b/resources/less/metager/startpage-only-light.less
new file mode 100644
index 0000000000000000000000000000000000000000..d82aed9f68c676bd200a769f3e48008739733c0a
--- /dev/null
+++ b/resources/less/metager/startpage-only-light.less
@@ -0,0 +1,2 @@
+@import "./variables.less";
+@import "./startpage-only.less";
\ No newline at end of file
diff --git a/resources/less/metager/startpage-only.less b/resources/less/metager/startpage-only.less
index 8fa4db3dbabcd448a5f9a8b7d92989386f36f4a3..8fdae69b6455f9b68db403fd8b7d8fb0a6dc7fa7 100644
--- a/resources/less/metager/startpage-only.less
+++ b/resources/less/metager/startpage-only.less
@@ -75,19 +75,20 @@ html {
     top: 0;
     z-index: 10;
 
+
     &>:nth-child(1) {
-        background-color: #EEEEEE;
+        background-color: @story-privacy-background;
     }
     &>:nth-child(2) {
-        background-color: #ffffff;
+        background-color: @story-ngo-background;
         color: #AD1A00
     }
     &>:nth-child(3) {
-        background-color: #edfdff;
+        background-color: @story-diversity-background;
         color: #0C4690;
     }
     &>:nth-child(4) {
-        background-color: #e3ffe9;
+        background-color: @story-eco-background;
         color: #0c621A;
     }
 
@@ -192,12 +193,12 @@ footer {
 // following lines set the background and heading color of each section
 #story-privacy {
     margin-bottom: 0;
-    background-color: #EEEEEE;
+    background-color: @story-privacy-background;
 }
 
 #story-ngo {
     grid-area: "icn-ngo";
-    background-color: #ffffff;
+    background-color: @story-ngo-background;
     clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%);
 }
 
@@ -207,7 +208,7 @@ footer {
 
 #story-diversity {
     grid-area: "icn-diversity";
-    background-color: #edfdff;
+    background-color: @story-diversity-background;
     clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%);
 }
 
@@ -217,7 +218,7 @@ footer {
 
 #story-eco {
     grid-area: "icn-eco";
-    background-color: #e3ffe9;
+    background-color: @story-eco-background;
     clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%);
 }
 
diff --git a/resources/less/metager/variables-dark.less b/resources/less/metager/variables-dark.less
index 72a7ba33f57dd558731bba57f7753480ede196b5..aec4e5febb9e4c177e917002b73a7e6662c0e523 100644
--- a/resources/less/metager/variables-dark.less
+++ b/resources/less/metager/variables-dark.less
@@ -14,3 +14,10 @@
 @card-background-color: @color-strong-grey;
 // Default Borde Color 
 @border-color: #727272;
+
+@background-color:black;
+
+@story-privacy-background: #111111;
+@story-ngo-background:#000000;
+@story-diversity-background:#000030;
+@story-eco-background:#003000;
\ No newline at end of file
diff --git a/resources/less/metager/variables.less b/resources/less/metager/variables.less
index 1541bf4acc6669dc8a4b0e598a86abcb4862ea36..c8b85e4b9f295f30504b95db7b06f99d2493c270 100644
--- a/resources/less/metager/variables.less
+++ b/resources/less/metager/variables.less
@@ -62,3 +62,8 @@ sans-serif;
 @quicktip-background-color: @color-white;
 // Color of the Spruch author
 @spruch-author-color: @color-strong-grey;
+
+@story-privacy-background: @color-almost-white;
+@story-ngo-background:white;
+@story-diversity-background:#edfdff;
+@story-eco-background:#e3ffe9;
\ No newline at end of file
diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index e673165a34a4710b3e0f794881524cc4d7a91fdb..59ec7ad3401978b364de1ebbf8f03d674562261a 100644
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -122,9 +122,10 @@
         @endif
     </div>
 
-    @if(LaravelLocalization::getCurrentLocale() === "de")
+    
         <div class="card-light">
             <h2>Weitere Einstellungen</h2>
+            @if(LaravelLocalization::getCurrentLocale() === "de")
             <form id="setting-form" action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('enableSetting')) }}" method="post" class="form">
                 <input type="hidden" name="fokus" value="{{ $fokus }}">
                 <input type="hidden" name="url" value="{{ $url }}">
@@ -137,8 +138,11 @@
                 </div>
                 <button type="submit" class="btn btn-default">@lang('settings.save')</button>
             </form>
+            @endif
+            <form id="darkmode" action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('darkmode', ["fokus" => $fokus, "url" => $url])) }}" method="post" class="form">
+            <button type="submit" class="btn btn-default">@lang('settings.darkmode')</button>
+            </form>
         </div>
-    @endif
     <div class="card-light" id="actions">
         @if($settingActive)
         <div id="reset">
diff --git a/routes/cookie.php b/routes/cookie.php
index 515dd0ca82b6995d51ad7da0bdab21c300024fdd..babef196fcd6cc498fab2e3185741e3aec5a4222 100644
--- a/routes/cookie.php
+++ b/routes/cookie.php
@@ -29,6 +29,7 @@ Route::group(
                 Route::post('all-settings/removeOne', 'SettingsController@removeOneSetting')->name('removeOneSetting');
                 Route::post('all-settings/removeAll', 'SettingsController@removeAllSettings')->name('removeAllSettings');
                 Route::get('load-settings', 'SettingsController@loadSettings')->name('loadSettings');
+                Route::post('darkmode', 'SettingsController@darkmode')->name('darkmode');
             });
     }
 );
diff --git a/webpack.mix.js b/webpack.mix.js
index 5efff061f2901b8db391adffa5e57df9d8dac112..0288185dadab892196980bd4df5965d8b69c7456 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -22,7 +22,10 @@ mix
   .less("resources/less/metager/metager.less", "public/css/themes/metager.css", {
     strictMath: true
   })
-  .less("resources/less/metager/startpage-only.less", "public/css/themes/startpage-only.css", {
+  .less("resources/less/metager/startpage-only-light.less", "public/css/themes/startpage-only.css", {
+    strictMath: true
+  })
+  .less("resources/less/metager/startpage-only-dark.less", "public/css/themes/startpage-only-dark.css", {
     strictMath: true
   })
   .less("resources/less/metager/metager-dark.less", "public/css/themes/metager-dark.css", {