Dark Mode
PHPXUI supports dark mode out of the box by toggling the dark class on the <html> tag.
The selected theme is stored persistently using Request::$localStorage.
1. Configure src/app/layout.php
Add the following logic to your root layout:
<?php
use Lib\MainLayout;
use Lib\Request;
MainLayout::$title = !empty(MainLayout::$title) ? MainLayout::$title : 'Create Prisma PHP App';
MainLayout::$description = !empty(MainLayout::$description) ? MainLayout::$description : 'Generated by create Prisma PHP App';
?>
<html lang="en" class="<?= Request::$localStorage->theme ?? 'dark' ?>">
This ensures the theme is applied on every page load based on the saved preference.
2. Add a Theme Toggle in Your Controller
Use a toggle switch component and JavaScript function to update the theme and persist it:
<?php
use Lib\PHPXUI\ToggleSwitch;
use Lib\Request;
$themeName = Request::$localStorage->theme ?? 'dark';
?>
<ToggleSwitch checked="onToggle" onCheckedChange="setOnToggle" onclick="toggleTheme()" />
<script>
const currentTheme = <?= json_encode($themeName === 'dark') ?>;
const [onToggle, setOnToggle] = pphp.state(currentTheme);
export function toggleTheme(element) {
const htmlEl = document.documentElement;
const isDark = htmlEl.classList.toggle('dark');
htmlEl.classList.toggle('light', !isDark);
store.setState({
theme: isDark ? 'dark' : 'light'
}, true);
}
</script>
The store.setState(..., true) ensures that the value is saved in local storage via Request::$localStorage.
3. Customize Dark Mode Colors
Open your stylesheet at:
src/app/css/tailwind.css
and edit the .dark block:
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
/* Add or customize other Shadcn-compatible tokens */
}
4. Helpful Resources
Need help designing or previewing your dark/light color tokens?