Some further dark-mode fixes, added toggle to homepage

- Homepage toggle especially useful for not-logged-in users since they
do not have a dropdown.

Author: ssddanbrown

resources/sass/_header.scss

@@ -167,8 +167,8 @@ header .search-box {
 
 @include smaller-than($l) {
   header .header-links {
+    @include lightDark(background-color, #fff, #333);
     display: none;
-    background-color: #FFF;
     z-index: 10;
     right: $-m;
     border-radius: 4px;
@@ -180,19 +180,18 @@ header .search-box {
       display: block;
     }
   }
-  header .links a, header .dropdown-container ul li a {
+  header .links a, header .dropdown-container ul li a, header .dropdown-container ul li button {
     text-align: start;
     display: block;
     padding: $-s $-m;
     color: $text-dark;
-    fill: $text-dark;
+    @include lightDark(color, $text-dark, #eee);
     svg {
       margin-inline-end: $-s;
     }
     &:hover {
-      background-color: #EEE;
-      color: #444;
-      fill: #444;
+      @include lightDark(background-color, #eee, #333);
+      @include lightDark(color, #000, #fff);
       text-decoration: none;
     }
   }

resources/sass/_lists.scss

@@ -581,6 +581,8 @@ ul.pagination {
     @include lightDark(color, #555, #eee);
     fill: currentColor;
     white-space: nowrap;
+    line-height: 1.6;
+    cursor: pointer;
     &:hover, &:focus {
       text-decoration: none;
       background-color: var(--color-primary-light);

resources/views/common/header.blade.php

@@ -72,15 +72,7 @@
                             </li>
                             <li><hr></li>
                             <li>
-                                <form action="{{ url('/settings/users/toggle-dark-mode') }}" method="post">
-                                    {{ csrf_field() }}
-                                    {{ method_field('patch') }}
-                                    @if(setting()->getForCurrentUser('dark-mode-enabled'))
-                                        <button>@icon('light-mode'){{ trans('common.light_mode') }}</button>
-                                    @else
-                                        <button>@icon('dark-mode'){{ trans('common.dark_mode') }}</button>
-                                    @endif
-                                </form>
+                                @include('partials.dark-mode-toggle')
                             </li>
                         </ul>
                     </div>

resources/views/common/home-book.blade.php

@@ -14,6 +14,7 @@
         <div class="icon-list text-primary">
             @include('partials.view-toggle', ['view' => $view, 'type' => 'books'])
             @include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+            @include('partials.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-primary'])
         </div>
     </div>
 @stop

resources/views/common/home-custom.blade.php

@@ -19,6 +19,7 @@
         <h5>{{ trans('common.actions') }}</h5>
         <div class="icon-list text-primary">
             @include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+            @include('partials.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-primary'])
         </div>
     </div>
 @stop

resources/views/common/home-shelves.blade.php

@@ -14,6 +14,7 @@
         <div class="icon-list text-primary">
             @include('partials.view-toggle', ['view' => $view, 'type' => 'shelves'])
             @include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+            @include('partials.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-primary'])
         </div>
     </div>
 @stop

resources/views/common/home.blade.php

@@ -3,8 +3,17 @@
 @section('body')
 
     <div class="container px-xl py-s">
-        <div class="icon-list inline block">
-            @include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+        <div class="grid half">
+            <div>
+                <div class="icon-list inline block">
+                    @include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+                </div>
+            </div>
+            <div class="text-m-right">
+                <div class="icon-list inline block">
+                    @include('partials.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-primary'])
+                </div>
+            </div>
         </div>
     </div>
 

resources/views/partials/dark-mode-toggle.blade.php

@@ -0,0 +1,9 @@
+<form action="{{ url('/settings/users/toggle-dark-mode') }}" method="post">
+    {{ csrf_field() }}
+    {{ method_field('patch') }}
+    @if(setting()->getForCurrentUser('dark-mode-enabled'))
+        <button class="{{ $classes ?? '' }}"><span>@icon('light-mode')</span><span>{{ trans('common.light_mode') }}</span></button>
+    @else
+        <button class="{{ $classes ?? '' }}"><span>@icon('dark-mode')</span><span>{{ trans('common.dark_mode') }}</span></button>
+    @endif
+</form>