added dark mode cookie and minor design changes

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])));    }
 }

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)

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!',

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!",

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

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;
 
 }
 

resources/less/metager/startpage-only-dark.less

+@import "./variables-dark.less";
+@import "./startpage-only.less";
\ No newline at end of file

resources/less/metager/startpage-only-light.less

+@import "./variables.less";
+@import "./startpage-only.less";
\ No newline at end of file

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%);
 }
 

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

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

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">

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');
             });
     }
 );

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", {