Added ability to have per user color themes in CP

cp/app/Controllers/HomeController.php

@@ -222,4 +222,15 @@ class HomeController extends Controller
         }
         return $response->withHeader('Location', '/dashboard')->withStatus(302);
     }
+
+    public function selectTheme(Request $request, Response $response)
+    {
+        global $container;
+
+        $data = $request->getParsedBody();
+        $_SESSION['_theme'] = ($v = substr(trim(preg_replace('/[^\x20-\x7E]/', '', $data['theme-primary'] ?? '')), 0, 30)) !== '' ? $v : 'blue';
+
+        $container->get('flash')->addMessage('success', 'Theme color has been set successfully');
+        return $response->withHeader('Location', '/profile')->withStatus(302);
+    }
 }

cp/bootstrap/app.php

@@ -155,6 +155,11 @@ $container->set('view', function ($container) {
     } else {
         $view->getEnvironment()->addGlobal('screen_mode', 'light');
     }
+    if (isset($_SESSION['_theme'])) {
+        $view->getEnvironment()->addGlobal('theme', $_SESSION['_theme']);
+    } else {
+        $view->getEnvironment()->addGlobal('theme', 'blue');
+    }
     if (envi('MINIMUM_DATA') === 'true') {
         $view->getEnvironment()->addGlobal('minimum_data', 'true');
     } else {

cp/resources/views/admin/profile/profile.twig

@@ -50,8 +50,6 @@
                       <div class="tab-content">
                         <div class="tab-pane active show" id="tabs-details">
                           <h3 class="card-title">{{ __('Details') }}</h3>
-                            <form action="{{route('change.password')}}" name="register" method="post">
-                            {{ csrf.field | raw }}
                           <div class="datagrid">
                             <div class="datagrid-item">
                               <div class="datagrid-title">{{ __('User Name') }}</div>
@@ -78,6 +76,10 @@
                               </div>
                             </div>
                           </div>
+                          <div class="row g-5">
+                            <div class="col-md-6">
+                              <form action="{{route('change.password')}}" name="register" method="post">
+                              {{ csrf.field | raw }}
                               <h3 class="card-title mt-4">{{ __('Change Password') }}</h3>
                               <div class="row g-3 mb-3">
                                 <div class="col-md">
@@ -100,6 +102,93 @@
                                 </button>
                               </form>
                             </div>
+                            <div class="col-md-6">
+                              <form action="{{route('select.theme')}}" name="theme" method="post">
+                              {{ csrf.field | raw }}
+                              <h3 class="card-title mt-4">{{ __('Select Theme') }}</h3>                    
+                              <div class="row g-3 mb-3">
+                                <div class="row g-2">
+                                  <div class="col-auto">
+                                    <label class="form-colorinput">
+                                      <input name="theme-primary" type="radio" value="blue" class="form-colorinput-input" {% if theme == 'blue' %}checked{% endif %} />
+                                      <span class="form-colorinput-color bg-blue"></span>
+                                    </label>
+                                  </div>
+                                  <div class="col-auto">
+                                    <label class="form-colorinput">
+                                      <input name="theme-primary" type="radio" value="azure" class="form-colorinput-input" {% if theme == 'azure' %}checked{% endif %} />
+                                      <span class="form-colorinput-color bg-azure"></span>
+                                    </label>
+                                  </div>
+                                  <div class="col-auto">
+                                    <label class="form-colorinput">
+                                      <input name="theme-primary" type="radio" value="indigo" class="form-colorinput-input" {% if theme == 'indigo' %}checked{% endif %} />
+                                      <span class="form-colorinput-color bg-indigo"></span>
+                                    </label>
+                                  </div>
+                                  <div class="col-auto">
+                                    <label class="form-colorinput">
+                                      <input name="theme-primary" type="radio" value="purple" class="form-colorinput-input" {% if theme == 'purple' %}checked{% endif %} />
+                                      <span class="form-colorinput-color bg-purple"></span>
+                                    </label>
+                                  </div>
+                                  <div class="col-auto">
+                                    <label class="form-colorinput">
+                                      <input name="theme-primary" type="radio" value="pink" class="form-colorinput-input" {% if theme == 'pink' %}checked{% endif %} />
+                                      <span class="form-colorinput-color bg-pink"></span>
+                                    </label>
+                                  </div>
+                                  <div class="col-auto">
+                                    <label class="form-colorinput">
+                                      <input name="theme-primary" type="radio" value="red" class="form-colorinput-input" {% if theme == 'red' %}checked{% endif %} />
+                                      <span class="form-colorinput-color bg-red"></span>
+                                    </label>
+                                  </div>
+                                  <div class="col-auto">
+                                    <label class="form-colorinput">
+                                      <input name="theme-primary" type="radio" value="orange" class="form-colorinput-input" {% if theme == 'orange' %}checked{% endif %} />
+                                      <span class="form-colorinput-color bg-orange"></span>
+                                    </label>
+                                  </div>
+                                  <div class="col-auto">
+                                    <label class="form-colorinput">
+                                      <input name="theme-primary" type="radio" value="yellow" class="form-colorinput-input" {% if theme == 'yellow' %}checked{% endif %} />
+                                      <span class="form-colorinput-color bg-yellow"></span>
+                                    </label>
+                                  </div>
+                                  <div class="col-auto">
+                                    <label class="form-colorinput">
+                                      <input name="theme-primary" type="radio" value="lime" class="form-colorinput-input" {% if theme == 'lime' %}checked{% endif %} />
+                                      <span class="form-colorinput-color bg-lime"></span>
+                                    </label>
+                                  </div>
+                                  <div class="col-auto">
+                                    <label class="form-colorinput">
+                                      <input name="theme-primary" type="radio" value="green" class="form-colorinput-input" {% if theme == 'green' %}checked{% endif %} />
+                                      <span class="form-colorinput-color bg-green"></span>
+                                    </label>
+                                  </div>
+                                  <div class="col-auto">
+                                    <label class="form-colorinput">
+                                      <input name="theme-primary" type="radio" value="teal" class="form-colorinput-input" {% if theme == 'teal' %}checked{% endif %} />
+                                      <span class="form-colorinput-color bg-teal"></span>
+                                    </label>
+                                  </div>
+                                  <div class="col-auto">
+                                    <label class="form-colorinput">
+                                      <input name="theme-primary" type="radio" value="cyan" class="form-colorinput-input" {% if theme == 'cyan' %}checked{% endif %} />
+                                      <span class="form-colorinput-color bg-cyan"></span>
+                                    </label>
+                                  </div>
+                                </div>
+                              </div>
+                                <button type="submit" class="btn btn-outline-primary">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon me-2"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" /><path d="M19 6h1a2 2 0 0 1 2 2a5 5 0 0 1 -5 5l-5 0v2" /><path d="M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /></svg> {{ __('Select') }}
+                                </button>
+                              </form>
+                            </div>
+                          </div>
+                        </div>
                         <div class="tab-pane" id="tabs-2fa">
                           {% if secret is defined %}
                             <h3 class="card-title">{{ __('Two-Factor Authentication') }} (2FA)</h3>

cp/resources/views/layouts/app.twig

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ _lang ?: 'en' }}" dir="{{ _lang == 'ar' or _lang == 'ar_SA' ? 'rtl' : 'ltr' }}"{% if screen_mode == 'dark' %} data-bs-theme="dark"{% endif %}>
+<html lang="{{ _lang ?: 'en' }}" dir="{{ _lang in ['ar', 'ar_SA'] ? 'rtl' : 'ltr' }}"{% if screen_mode == 'dark' %} data-bs-theme="dark"{% endif %}{% if theme is not defined or theme is empty %} data-bs-theme-primary="blue"{% else %} data-bs-theme-primary="{{ theme }}"{% endif %}>
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>

cp/routes/web.php

@@ -173,6 +173,7 @@ $app->group('', function ($route) {
     $route->post('/token-well', ProfileController::class .':tokenWell')->setName('tokenWell');
 
     $route->get('/mode', HomeController::class .':mode')->setName('mode');
+    $route->post('/theme', HomeController::class . ':selectTheme')->setName('select.theme');
     $route->get('/lang', HomeController::class .':lang')->setName('lang');
     $route->get('/logout', AuthController::class . ':logout')->setName('logout');
     $route->post('/change-password', PasswordController::class . ':changePassword')->setName('change.password');