support dark mode UI

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

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);

database/migrations/2021_06_06_111049_add_is_dark_mode_field.php

@@ -0,0 +1,22 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddIsDarkModeField extends Migration
+{
+    public function up()
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->boolean('is_dark_mode')->after('ip')->default(false);
+        });
+    }
+
+    public function down()
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('is_dark_mode');
+        });
+    }
+}

resources/assets/src/components/Viewer.tsx

@@ -80,7 +80,9 @@ const Viewer: React.FC<Props> = (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 = (() => {

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

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: [
       {

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;
   }

resources/assets/tests/components/Viewer.test.tsx

@@ -131,4 +131,15 @@ describe('background', () => {
       baseElement.querySelector<HTMLDivElement>('.card-body')!.style.background,
     ).toStartWith('url')
   })
+
+  it('default for dark mode', () => {
+    document.body.classList.add('dark-mode')
+
+    const { baseElement } = render(<Viewer isAlex={false} />)
+    expect(
+      baseElement.querySelector<HTMLDivElement>('.card-body')!.style.background,
+    ).toBe('rgb(108, 117, 125)')
+
+    document.body.classList.remove('dark-mode')
+  })
 })

resources/views/admin/base.twig

@@ -5,7 +5,7 @@
     <title>{% block title %}{% endblock %} - {{ site_name }}</title>
   </head>
 
-  <body class="hold-transition sidebar-mini">
+  <body class="{{ dark_mode ? 'dark-mode' : '' }} hold-transition sidebar-mini">
     <div class="wrapper">
       {{ include('shared.header') }}
       {{ include('shared.sidebar', {scope: 'admin'}) }}
@@ -14,7 +14,7 @@
           <div class="container-fluid">
             <div class="d-flex justify-content-between flex-wrap">
               <div>
-                <h1 class="m-0 text-dark">{{ block('title') }}</h1>
+                <h1 class="m-0">{{ block('title') }}</h1>
               </div>
               <div>
                 <div class="breadcrumb"></div>

resources/views/admin/i18n.twig

@@ -24,7 +24,7 @@
               </div>
             {% endif %}
             {{ csrf_field() }}
-            <div class="container-fluid my-4 px-2">
+            <div class="container-fluid my-4 px-4">
               <div class="row mb-3">
                 <div class="col-sm-3">{{ trans('admin.i18n.group') }}</div>
                 <div class="col-sm-9">
@@ -54,11 +54,9 @@
           </div>
         </div>
       </form>
-      <div class="callout callout-info">
+      <a class="btn btn-block btn-outline-info" href="https://blessing.netlify.com/ui-text.html" target="_blank">
-        <a href="https://blessing.netlify.com/ui-text.html" target="_blank">
+        {{ trans('admin.i18n.tip') }}
-          {{ trans('admin.i18n.tip') }}
+      </a>
-        </a>
-      </div>
     </div>
   </div>
 {% endblock %}

resources/views/skinlib/base.twig

@@ -5,7 +5,7 @@
     <title>{% block title %}{% endblock %} - {{ site_name }}</title>
   </head>
 
-  <body class="hold-transition layout-top-nav">
+  <body class="{{ dark_mode ? 'dark-mode' : '' }} hold-transition layout-top-nav">
     <div class="wrapper">
       <nav class="main-header navbar navbar-expand navbar-{{ navbar_color }} navbar-{{ color_mode }} ml-0">
         <div class="container">

resources/views/skinlib/show.twig

@@ -9,7 +9,7 @@
         <div class="container-fluid">
           <div class="d-flex justify-content-between flex-wrap">
             <div>
-              <h1 class="m-0 text-dark">{{ trans('skinlib.show.title') }}</h1>
+              <h1 class="m-0">{{ trans('skinlib.show.title') }}</h1>
             </div>
             <div>
               <div class="breadcrumb"></div>

resources/views/skinlib/upload.twig

@@ -9,7 +9,7 @@
         <div class="container-fluid">
           <div class="d-flex justify-content-between flex-wrap">
             <div>
-              <h1 class="m-0 text-dark">{{ block('title') }}</h1>
+              <h1 class="m-0">{{ block('title') }}</h1>
             </div>
             <div>
               <div class="breadcrumb"></div>

resources/views/user/base.twig

@@ -5,7 +5,7 @@
     <title>{% block title %}{% endblock %} - {{ site_name }}</title>
   </head>
 
-  <body class="hold-transition sidebar-mini">
+  <body class="{{ dark_mode ? 'dark-mode' : '' }} hold-transition sidebar-mini">
     <div class="wrapper">
       {{ include('shared.header') }}
       {{ include('shared.sidebar', {scope: 'user'}) }}
@@ -14,7 +14,7 @@
           <div class="container-fluid">
             <div class="d-flex justify-content-between flex-wrap">
               <div>
-                <h1 class="m-0 text-dark">{{ block('title') }}</h1>
+                <h1 class="m-0">{{ block('title') }}</h1>
               </div>
               <div>
                 <div class="breadcrumb"></div>