Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added dark/light mode toggle to profile dropdown menu

Browse Source 
- Also fixed some remaining areas which needed dark mode support.
This commit is contained in:
Dan Brown 2020-04-11 20:37:51 +01:00
parent d4b0e4acad
commit 573c848d51
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
7 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/Http/Controllers/UserController.php
View File

@ -312,6 +312,16 @@ class UserController extends Controller
return $this->changeListSort($id, $request, $type); return $this->changeListSort($id, $request, $type);
} }
/**
* Toggle dark mode for the current user.
*/
public function toggleDarkMode()
{
$enabled = setting()->getForCurrentUser('dark-mode-enabled', false);
setting()->putUser(user(), 'dark-mode-enabled', $enabled ? 'false' : 'true');
return redirect()->back();
}
/** /**
* Update the stored section expansion preference for the given user. * Update the stored section expansion preference for the given user.
*/ */

1
resources/icons/dark-mode.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 205 B

1
resources/icons/light-mode.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 15.31L23.31 12 20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 243 B

3
resources/sass/_lists.scss
View File

@ -603,6 +603,9 @@ ul.pagination {
li.border-bottom { li.border-bottom {
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
} }
li hr {
margin: $-xs 0;
}
} }
// Books grid view // Books grid view

10
resources/views/base.blade.php
View File

@ -1,5 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ config('app.lang') }}" dir="{{ config('app.rtl') ? 'rtl' : 'ltr' }}" class="@yield('body-class')"> <html lang="{{ config('app.lang') }}"
dir="{{ config('app.rtl') ? 'rtl' : 'ltr' }}"
class="{{ setting()->getForCurrentUser('dark-mode-enabled') ? 'dark-mode ' : '' }}@yield('body-class')">
<head> <head>
<title>{{ isset($pageTitle) ? $pageTitle . ' | ' : '' }}{{ setting('app-name') }}</title> <title>{{ isset($pageTitle) ? $pageTitle . ' | ' : '' }}{{ setting('app-name') }}</title>
@ -23,12 +25,6 @@
<!-- Translations for JS --> <!-- Translations for JS -->
@stack('translations') @stack('translations')
<script>
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark-mode');
}
</script>
</head> </head>
<body class="@yield('body-class')"> <body class="@yield('body-class')">

12
resources/views/common/header.blade.php
View File

@ -70,6 +70,18 @@
<a href="{{ url('/logout') }}">@icon('logout'){{ trans('auth.logout') }}</a> <a href="{{ url('/logout') }}">@icon('logout'){{ trans('auth.logout') }}</a>
@endif @endif
</li> </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')Light Mode</button>
@else
<button>@icon('dark-mode')Dark Mode</button>
@endif
</form>
</li>
</ul> </ul>
</div> </div>
@endif @endif

1
routes/web.php
View File

@ -183,6 +183,7 @@ Route::group(['middleware' => 'auth'], function () {
Route::patch('/users/{id}/switch-shelf-view', 'UserController@switchShelfView'); Route::patch('/users/{id}/switch-shelf-view', 'UserController@switchShelfView');
Route::patch('/users/{id}/change-sort/{type}', 'UserController@changeSort'); Route::patch('/users/{id}/change-sort/{type}', 'UserController@changeSort');
Route::patch('/users/{id}/update-expansion-preference/{key}', 'UserController@updateExpansionPreference'); Route::patch('/users/{id}/update-expansion-preference/{key}', 'UserController@updateExpansionPreference');
Route::patch('/users/toggle-dark-mode', 'UserController@toggleDarkMode');
Route::post('/users/create', 'UserController@store'); Route::post('/users/create', 'UserController@store');
Route::get('/users/{id}', 'UserController@edit'); Route::get('/users/{id}', 'UserController@edit');
Route::put('/users/{id}', 'UserController@update'); Route::put('/users/{id}', 'UserController@update');