feat: introduce dark mode toggle/theme

Author: josbeir

resources/css/style.css

@@ -5,7 +5,7 @@
 @import "swiper/css/pagination";
 @import "slim-select/styles";
 @plugin "daisyui/index.js" {
-    themes: cakephp --default;
+    themes: cakephp --default, cakephp-dark;
 }
 
 @plugin "daisyui/theme" {
@@ -45,6 +45,43 @@
     --noise: 0;
 }
 
+@plugin "daisyui/theme" {
+    name: "cakephp-dark";
+    default: false;
+    prefersdark: true;
+    color-scheme: dark;
+
+    --color-base-100: hsl(0 0% 10%);
+    --color-base-200: hsl(0 0% 13%);
+    --color-base-300: hsl(0 0% 17%);
+    --color-base-content: hsl(0 0% 88%);
+
+    --color-primary: var(--color-cake-red);
+    --color-primary-content: hsl(0 0% 100%);
+    --color-secondary: var(--color-cake-blue);
+    --color-secondary-content: hsl(0 0% 100%);
+    --color-accent: hsl(199 89% 58%);
+    --color-accent-content: hsl(0 0% 100%);
+    --color-neutral: hsl(0 0% 88%);
+    --color-neutral-content: hsl(0 0% 10%);
+
+    --color-info: hsl(198 93% 60%);
+    --color-info-content: hsl(198 100% 88%);
+    --color-success: hsl(158 64% 52%);
+    --color-success-content: hsl(158 100% 88%);
+    --color-warning: hsl(43 96% 56%);
+    --color-warning-content: hsl(43 100% 88%);
+    --color-error: hsl(0 72% 56%);
+    --color-error-content: hsl(0 0% 100%);
+
+    --radius-box: 1.5rem;
+    --radius-field: 1rem;
+    --radius-selector: 1rem;
+    --border: 1px;
+    --depth: 1;
+    --noise: 0;
+}
+
 @theme {
     --font-raleway: "Raleway", sans-serif;
     --color-cake-red: #d33c44;
@@ -87,6 +124,99 @@
     --ss-primary-color: var(--color-cake-blue);
 }
 
+/* SlimSelect dark mode overrides */
+[data-theme="cakephp-dark"] .ss-main {
+    --ss-primary-color: #d33c44;
+    --ss-bg-color: hsl(0 0% 13%);
+    --ss-font-color: hsl(0 0% 88%);
+    --ss-border-color: hsl(0 0% 22%);
+    --ss-highlight-color: hsl(0 0% 17%);
+    --ss-spinner-color: hsl(0 0% 88%);
+}
+
+[data-theme="cakephp-dark"] [data-is-php-filter] + .ss-main {
+    --ss-primary-color: var(--color-cake-blue);
+}
+
+[data-theme="cakephp-dark"] .ss-content {
+    background: hsl(0 0% 13%);
+    border-color: hsl(0 0% 22%);
+}
+
+[data-theme="cakephp-dark"] .ss-content .ss-search input {
+    background: hsl(0 0% 17%);
+    border-color: hsl(0 0% 22%);
+    color: hsl(0 0% 88%);
+}
+
+[data-theme="cakephp-dark"] .ss-content .ss-list .ss-option {
+    color: hsl(0 0% 80%);
+}
+
+[data-theme="cakephp-dark"] .ss-content .ss-list .ss-option:hover,
+[data-theme="cakephp-dark"] .ss-content .ss-list .ss-option.ss-highlighted {
+    background: hsl(0 0% 17%);
+    color: hsl(0 0% 88%);
+}
+
+[data-theme="cakephp-dark"] .ss-content .ss-list .ss-option.ss-selected {
+    color: #d33c44;
+    background: hsl(0 0% 17%);
+}
+
+[data-theme="cakephp-dark"] .ss-content .ss-list .ss-option.ss-disabled {
+    color: hsl(0 0% 35%);
+}
+
+[data-theme="cakephp-dark"] .ss-single-selected {
+    background: hsl(0 0% 13%);
+    border-color: hsl(0 0% 22%);
+    color: hsl(0 0% 88%);
+}
+
+[data-theme="cakephp-dark"] .ss-single-selected .ss-arrow span {
+    border-color: hsl(0 0% 60%);
+}
+
+[data-theme="cakephp-dark"] .ss-multi-selected {
+    background: hsl(0 0% 13%);
+    border-color: hsl(0 0% 22%);
+    color: hsl(0 0% 88%);
+}
+
+[data-theme="cakephp-dark"] .ss-multi-selected .ss-values .ss-value {
+    background: hsl(0 0% 22%);
+    color: hsl(0 0% 88%);
+}
+
+[data-theme="cakephp-dark"] .ss-multi-selected .ss-values .ss-value .ss-value-delete svg path {
+    fill: hsl(0 0% 60%);
+}
+
+[data-theme="cakephp-dark"] .ss-content .ss-list .ss-option[aria-selected="true"] {
+    background: #d33c44;
+    color: #fff;
+}
+
+/* Dark mode: darker navbar background */
+[data-theme="cakephp-dark"] .navbar-top {
+    background-color: hsl(0 65% 12%) !important;
+    border-bottom-color: hsl(0 65% 18%) !important;
+}
+
+/* Dark mode: placeholder text contrast */
+[data-theme="cakephp-dark"] input::placeholder,
+[data-theme="cakephp-dark"] textarea::placeholder,
+[data-theme="cakephp-dark"] select::placeholder {
+    color: hsl(0 0% 50%) !important;
+    opacity: 1;
+}
+
+[data-theme="cakephp-dark"] .input input::placeholder {
+    color: hsl(0 0% 50%) !important;
+    opacity: 1;
+}
+
 .htmx-indicator {
     opacity: 1;
     transition: opacity 0.2s ease;

templates/element/navbar.php

@@ -5,7 +5,7 @@
  * @var \App\View\AppView $this
  */
 ?>
-<div class="sticky top-0 z-40 border-b border-cake-red/70 bg-cake-red backdrop-blur-md">
+<div class="sticky top-0 z-40 border-b border-cake-red/70 bg-cake-red backdrop-blur-md navbar-top">
     <div class="navbar container mx-auto px-4 sm:px-6 lg:px-8 gap-5">
         <div class="navbar-start">
             <div class="flex items-center gap-6">
@@ -31,8 +31,29 @@
         </div>
         <div class="navbar-end">
             <?= $this->element('search') ?>
+
+            <!-- Theme toggle -->
+            <button type="button"
+                    id="theme-toggle"
+                    class="btn btn-ghost btn-circle hover:bg-white/10 text-white hidden lg:flex ml-2"
+                    aria-label="<?= __('Toggle theme') ?>"
+                    x-data="{ dark: document.documentElement.getAttribute('data-theme') === 'cakephp-dark' }"
+                    @click="
+                        dark = !dark;
+                        document.documentElement.setAttribute('data-theme', dark ? 'cakephp-dark' : 'cakephp');
+                        localStorage.setItem('theme', dark ? 'cakephp-dark' : 'cakephp');
+                    "
+            >
+                <svg x-show="!dark" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+                </svg>
+                <svg x-show="dark" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" style="display: none;">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+                </svg>
+            </button>
+
             <?php if ($this->Identity->isLoggedIn()) : ?>
-                <div class="ml-4 dropdown dropdown-end">
+                <div class="ml-2 dropdown dropdown-end">
                     <label tabindex="0" class="btn btn-ghost btn-circle avatar cursor-pointer" aria-label="<?= __('User menu') ?>">
                         <div class="w-9 rounded-full ring-2 ring-white/30 overflow-hidden">
                             <?= $this->User->avatar(80, ['class' => 'w-full h-full object-cover']) ?>
@@ -59,7 +80,7 @@
                     </ul>
                 </div>
             <?php else : ?>
-                <div class="hidden lg:block lg:ml-4">
+                <div class="hidden lg:block lg:ml-2">
                     <?= $this->Form->postLink(
                         '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg> Sign in'
                         ,
@@ -72,7 +93,7 @@
                             '?' => ['redirect' => $this->request->getQuery('redirect')],
                         ],
                         [
-                            'class' => 'btn btn-sm bg-white/10 text-white hover:bg-white/25 gap-2',
+                            'class' => 'btn btn-sm bg-white/10 text-white hover:bg-white/25 gap-2 whitespace-nowrap',
                             'escape' => false,
                         ],
                     ) ?>
@@ -105,6 +126,30 @@
                             ) ?>
                         </li>
                     <?php endif; ?>
+                    <li class="border-t border-base-300">
+                        <button type="button"
+                                id="theme-toggle-mobile"
+                                class="flex items-center gap-2"
+                                x-data="{ dark: document.documentElement.getAttribute('data-theme') === 'cakephp-dark' }"
+                                @click="
+                                    dark = !dark;
+                                    document.documentElement.setAttribute('data-theme', dark ? 'cakephp-dark' : 'cakephp');
+                                    localStorage.setItem('theme', dark ? 'cakephp-dark' : 'cakephp');
+                                "
+                        >
+                            <template x-if="!dark">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+                                </svg>
+                            </template>
+                            <template x-if="dark">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+                                </svg>
+                            </template>
+                            <span x-text="dark ? 'Light mode' : 'Dark mode'"></span>
+                        </button>
+                    </li>
                 </ul>
             </div>
         </div>

templates/element/search.php

@@ -35,7 +35,7 @@
 }
 ?>
 <div class="w-full" x-data="packageSearch" @click.outside="close()" @keydown="onKeydown($event)">
-    <label class="input w-full bg-white text-base-content">
+    <label class="input w-full bg-base-100 text-base-content">
         <svg class="h-4 w-4 shrink-0 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
             <g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor">
                 <circle cx="11" cy="11" r="8"></circle>

templates/layout/default.php

@@ -19,7 +19,7 @@
 $canonicalUrl = $this->Url->build($request->getPath() ?: '/', ['fullBase' => true]);
 ?>
 <!DOCTYPE html>
-<html class="bg-base-100">
+<html class="bg-base-100" data-theme="cakephp">
 <head>
     <?= $this->Html->charset() ?>
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -32,6 +32,15 @@
     <?php if ($request->getQueryParams() !== []) : ?>
         <meta name="robots" content="noindex,nofollow">
     <?php endif; ?>
+    <script>
+        (function() {
+            var theme = localStorage.getItem('theme');
+            if (!theme) {
+                theme = matchMedia('(prefers-color-scheme: dark)').matches ? 'cakephp-dark' : 'cakephp';
+            }
+            document.documentElement.setAttribute('data-theme', theme);
+        })();
+    </script>
 
     <?= $this->Html->css(['cake']) ?>