diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index e0a8ad1a4..4c3f6c619 100644
--- 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 5eb672697..32c56f385 100644
--- 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 98bd01788..4937f7cb0 100644
--- 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 8caae814a..3dbcd2875 100644
--- 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 56e281dcb..e08203057 100644
--- 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 bac6fa154..fccbef288 100644
--- 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 cd27ff568..63b76aa10 100644
--- 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
index 000000000..0812e487a
--- /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