Skip to content

Introduce dark mode toggle/theme #157

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
josbeir wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Introduce dark mode toggle/theme #157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2feaefe
feat: introduce dark mode toggle/theme
josbeir Jun 5, 2026
a6ee613
darken loading overlay
josbeir Jun 5, 2026
24d2015
address copilot remarks
josbeir Jun 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 134 additions & 1 deletion resources/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -87,6 +124,98 @@
--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 {
color: hsl(0 0% 50%) !important;
opacity: 1;
}
Comment thread
josbeir marked this conversation as resolved.

[data-theme="cakephp-dark"] .input input::placeholder {
color: hsl(0 0% 50%) !important;
opacity: 1;
}

.htmx-indicator {
opacity: 1;
transition: opacity 0.2s ease;
Expand All @@ -112,6 +241,10 @@
transition: opacity 0.2s ease;
}

[data-theme="cakephp-dark"] .main-loading-overlay {
background: hsl(0 0% 8% / 0.78);
}

body.is-htmx-loading .main-loading-overlay,
.main-loading-overlay.htmx-request {
opacity: 1;
Expand Down
54 changes: 50 additions & 4 deletions templates/element/navbar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -31,8 +31,30 @@
</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-cloak
x-data="{ dark: document.documentElement.getAttribute('data-theme') === 'cakephp-dark' }"
@click="
dark = !dark;
document.documentElement.setAttribute('data-theme', dark ? 'cakephp-dark' : 'cakephp');
try { localStorage.setItem('theme', dark ? 'cakephp-dark' : 'cakephp'); } catch (_) {}
"
Comment thread
josbeir marked this conversation as resolved.
>
<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">
<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>
Comment thread
josbeir marked this conversation as resolved.
</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']) ?>
Expand All @@ -59,7 +81,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'
,
Expand All @@ -72,7 +94,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,
],
) ?>
Expand Down Expand Up @@ -105,6 +127,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');
try { localStorage.setItem('theme', dark ? 'cakephp-dark' : 'cakephp'); } catch (_) {}
"
Comment thread
josbeir marked this conversation as resolved.
>
<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>
Expand Down
2 changes: 1 addition & 1 deletion templates/element/search.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
15 changes: 14 additions & 1 deletion templates/layout/default.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -32,6 +32,19 @@
<?php if ($request->getQueryParams() !== []) : ?>
<meta name="robots" content="noindex,nofollow">
<?php endif; ?>
<script>
(function() {
try {
var theme = localStorage.getItem('theme');
if (theme !== 'cakephp' && theme !== 'cakephp-dark') {
theme = matchMedia('(prefers-color-scheme: dark)').matches ? 'cakephp-dark' : 'cakephp';
}
document.documentElement.setAttribute('data-theme', theme);
} catch (_) {
document.documentElement.setAttribute('data-theme', 'cakephp');
}
})();
</script>
Comment thread
josbeir marked this conversation as resolved.

<?= $this->Html->css(['cake']) ?>

Expand Down
Loading