From 7e04f72292697e33f4c82ea3f4024221ccfb8797 Mon Sep 17 00:00:00 2001 From: Pig Fang Date: Sun, 6 Jun 2021 14:27:21 +0800 Subject: [PATCH] support dark mode UI --- app/Models/User.php | 3 +++ app/Providers/ViewServiceProvider.php | 7 +++++- ...21_06_06_111049_add_is_dark_mode_field.php | 22 +++++++++++++++++++ resources/assets/src/components/Viewer.tsx | 4 +++- resources/assets/src/scripts/types.ts | 1 + resources/assets/src/views/admin/Dashboard.ts | 9 ++++++++ .../views/admin/PluginsManagement/InfoBox.tsx | 3 +++ .../assets/tests/components/Viewer.test.tsx | 11 ++++++++++ resources/views/admin/base.twig | 4 ++-- resources/views/admin/i18n.twig | 10 ++++----- resources/views/skinlib/base.twig | 2 +- resources/views/skinlib/show.twig | 2 +- resources/views/skinlib/upload.twig | 2 +- resources/views/user/base.twig | 4 ++-- 14 files changed, 69 insertions(+), 15 deletions(-) create mode 100644 database/migrations/2021_06_06_111049_add_is_dark_mode_field.php diff --git a/app/Models/User.php b/app/Models/User.php index 3f3c4809..113314f2 100644 --- a/app/Models/User.php +++ b/app/Models/User.php @@ -20,6 +20,7 @@ use Lorisleiva\LaravelSearchString\Concerns\SearchString; * @property int $score * @property int $permission * @property string $ip + * @property bool $is_dark_mode * @property string $last_sign_at * @property string $register_at * @property bool $verified @@ -53,6 +54,7 @@ class User extends Authenticatable 'avatar' => 'integer', 'permission' => 'integer', 'verified' => 'bool', + 'is_dark_mode' => 'bool', ]; protected $hidden = ['password', 'remember_token']; @@ -65,6 +67,7 @@ class User extends Authenticatable 'last_sign_at' => ['date' => true], 'register_at' => ['date' => true], 'verified' => ['boolean' => true], + 'is_dark_mode' => ['boolean' => true], ]; public function isAdmin(): bool diff --git a/app/Providers/ViewServiceProvider.php b/app/Providers/ViewServiceProvider.php index 499a4493..d6b1865f 100644 --- a/app/Providers/ViewServiceProvider.php +++ b/app/Providers/ViewServiceProvider.php @@ -22,6 +22,7 @@ class ViewServiceProvider extends ServiceProvider 'site_name' => option_localized('site_name'), 'navbar_color' => $color, 'color_mode' => in_array($color, $lightColors) ? 'light' : 'dark', + 'dark_mode' => (bool) optional(auth()->user())->is_dark_mode, 'locale' => str_replace('_', '-', app()->getLocale()), ]); }); @@ -46,7 +47,11 @@ class ViewServiceProvider extends ServiceProvider View::composer('shared.user-menu', Composers\UserMenuComposer::class); View::composer('shared.sidebar', function ($view) { - $view->with('sidebar_color', option('sidebar_color')); + $isDarkMode = (bool) optional(auth()->user())->is_dark_mode; + $color = option('sidebar_color'); + $color = $isDarkMode ? str_replace('light', 'dark', $color) : $color; + + $view->with('sidebar_color', $color); }); View::composer('shared.side-menu', Composers\SideMenuComposer::class); diff --git a/database/migrations/2021_06_06_111049_add_is_dark_mode_field.php b/database/migrations/2021_06_06_111049_add_is_dark_mode_field.php new file mode 100644 index 00000000..3c2aa098 --- /dev/null +++ b/database/migrations/2021_06_06_111049_add_is_dark_mode_field.php @@ -0,0 +1,22 @@ +boolean('is_dark_mode')->after('ip')->default(false); + }); + } + + public function down() + { + Schema::table('users', function (Blueprint $table) { + $table->dropColumn('is_dark_mode'); + }); + } +} diff --git a/resources/assets/src/components/Viewer.tsx b/resources/assets/src/components/Viewer.tsx index 346d2bc7..3d6c72e1 100644 --- a/resources/assets/src/components/Viewer.tsx +++ b/resources/assets/src/components/Viewer.tsx @@ -80,7 +80,9 @@ const Viewer: React.FC = (props) => { const [paused, setPaused] = useState(false) const [running, setRunning] = useState(false) const [reset, setReset] = useState(0) - const [background, setBackground] = useState('#fff') + const [background, setBackground] = useState(() => + document.body.classList.contains('dark-mode') ? '#6c757d' : '#fff', + ) const [bgPicture, setBgPicture] = useState(-1) const indicator = (() => { diff --git a/resources/assets/src/scripts/types.ts b/resources/assets/src/scripts/types.ts index 6e09a23b..9ab3706f 100644 --- a/resources/assets/src/scripts/types.ts +++ b/resources/assets/src/scripts/types.ts @@ -7,6 +7,7 @@ export type User = { avatar: number permission: UserPermission ip: string + is_dark_mode: boolean last_sign_at: string register_at: string verified: boolean diff --git a/resources/assets/src/views/admin/Dashboard.ts b/resources/assets/src/views/admin/Dashboard.ts index c4b9c04d..a31ed08d 100644 --- a/resources/assets/src/views/admin/Dashboard.ts +++ b/resources/assets/src/views/admin/Dashboard.ts @@ -13,8 +13,14 @@ interface ChartData { } async function createChart(el: HTMLDivElement) { + const isDarkMode = document.body.classList.contains('dark-mode') + const textColor = isDarkMode ? '#fff' : '#000' + const chart = echarts.init(el, void 0, { renderer: 'svg' }) chart.setOption({ + textStyle: { + color: textColor, + }, tooltip: { trigger: 'axis', axisPointer: { @@ -27,6 +33,9 @@ async function createChart(el: HTMLDivElement) { ], legend: { data: [], + textStyle: { + color: textColor, + }, }, xAxis: [ { diff --git a/resources/assets/src/views/admin/PluginsManagement/InfoBox.tsx b/resources/assets/src/views/admin/PluginsManagement/InfoBox.tsx index fdcc9df6..fb0f0357 100644 --- a/resources/assets/src/views/admin/PluginsManagement/InfoBox.tsx +++ b/resources/assets/src/views/admin/PluginsManagement/InfoBox.tsx @@ -19,6 +19,9 @@ const ActionButton = styled.a` transition-property: color; transition-duration: 0.3s; color: #000; + .dark-mode & { + color: #fff; + } &:hover { color: #999; } diff --git a/resources/assets/tests/components/Viewer.test.tsx b/resources/assets/tests/components/Viewer.test.tsx index 61b82bd5..6cd6cbb1 100644 --- a/resources/assets/tests/components/Viewer.test.tsx +++ b/resources/assets/tests/components/Viewer.test.tsx @@ -131,4 +131,15 @@ describe('background', () => { baseElement.querySelector('.card-body')!.style.background, ).toStartWith('url') }) + + it('default for dark mode', () => { + document.body.classList.add('dark-mode') + + const { baseElement } = render() + expect( + baseElement.querySelector('.card-body')!.style.background, + ).toBe('rgb(108, 117, 125)') + + document.body.classList.remove('dark-mode') + }) }) diff --git a/resources/views/admin/base.twig b/resources/views/admin/base.twig index ef200f74..be6e0e6e 100644 --- a/resources/views/admin/base.twig +++ b/resources/views/admin/base.twig @@ -5,7 +5,7 @@ {% block title %}{% endblock %} - {{ site_name }} - +
{{ include('shared.header') }} {{ include('shared.sidebar', {scope: 'admin'}) }} @@ -14,7 +14,7 @@
-

{{ block('title') }}

+

{{ block('title') }}

diff --git a/resources/views/admin/i18n.twig b/resources/views/admin/i18n.twig index fcf32da7..544f6233 100644 --- a/resources/views/admin/i18n.twig +++ b/resources/views/admin/i18n.twig @@ -24,7 +24,7 @@
{% endif %} {{ csrf_field() }} -
+
{{ trans('admin.i18n.group') }}
@@ -54,11 +54,9 @@
-
- - {{ trans('admin.i18n.tip') }} - -
+ + {{ trans('admin.i18n.tip') }} +
{% endblock %} diff --git a/resources/views/skinlib/base.twig b/resources/views/skinlib/base.twig index fb2448e4..638042fb 100644 --- a/resources/views/skinlib/base.twig +++ b/resources/views/skinlib/base.twig @@ -5,7 +5,7 @@ {% block title %}{% endblock %} - {{ site_name }} - +