Home Dark Mode

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 PP\MainLayout;
use PP\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 PP\Request;

$themeName = Request::$localStorage->theme ?? 'dark';
$isDark = $themeName === 'dark' ? '{true}' : '{false}';

?>

<ToggleSwitch checked="{$isDark}" onchange="toggleTheme(event.target.checked)" />
<script>
    function toggleTheme(isChecked) {
        const newThemeName = isChecked ? 'dark' : 'light';
        document.documentElement.setAttribute('class', newThemeName);
        store.setState({
            themeName: newThemeName
        }, 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/globals.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?