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.

diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index e0a8ad1a42fda5e77f50c1218d7bbcf3c191d6b4..4c3f6c619d802db2c6fbe7f6d919a00b1280058b 100644 (file)
--- a/resources/sass/_header.scss
+++ b/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;
     }
   }

diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss
index 5eb672697ab52e7c935b82f149ffb8808dafc701..32c56f385c1e470aa9f5a2b48528d6148f3fb16c 100644 (file)
--- a/resources/sass/_lists.scss
+++ b/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);

diff --git a/resources/views/common/header.blade.php b/resources/views/common/header.blade.php
index 98bd01788cd3b3960951c0c6e7ea9fefd18b4cda..4937f7cb0db7944baf74eb2389cfaac1ef3ac932 100644 (file)
--- a/resources/views/common/header.blade.php
+++ b/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>

diff --git a/resources/views/common/home-book.blade.php b/resources/views/common/home-book.blade.php
index 8caae814a5f063e4eadd20b457a2c22bbe8152aa..3dbcd2875f9eb8457165dea32680a8832623c9d1 100644 (file)
--- a/resources/views/common/home-book.blade.php
+++ b/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
\ No newline at end of file

diff --git a/resources/views/common/home-custom.blade.php b/resources/views/common/home-custom.blade.php
index 56e281dcb7fd107c52317ba0f856ce9c4310a103..e0820305746c799d5d2deb890849397b98f1f70d 100644 (file)
--- a/resources/views/common/home-custom.blade.php
+++ b/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
\ No newline at end of file

diff --git a/resources/views/common/home-shelves.blade.php b/resources/views/common/home-shelves.blade.php
index bac6fa154d418057394a23163128aa10a9142c88..fccbef288730d42af2cbd22d860254d943101ebf 100644 (file)
--- a/resources/views/common/home-shelves.blade.php
+++ b/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
\ No newline at end of file

diff --git a/resources/views/common/home.blade.php b/resources/views/common/home.blade.php
index cd27ff5687e006fffa598cb30f4e2243601e4243..63b76aa108b4c73d82bbc8899305df924801540a 100644 (file)
--- a/resources/views/common/home.blade.php
+++ b/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>
 

diff --git a/resources/views/partials/dark-mode-toggle.blade.php b/resources/views/partials/dark-mode-toggle.blade.php
new file mode 100644 (file)
index 0000000..0812e48
--- /dev/null
+++ b/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>
\ No newline at end of file