Theming

To customize the theme of PHPXUI, you can modify the CSS variables in your project's stylesheet. Here are the key variables you can adjust:

Customizing the Theme

PHPXUI is styled with Tailwind CSS and uses the Shadcn color schema for consistent component theming. You can easily modify the default design to match your branding by adjusting CSS variables.

Where to Customize

Open the file at: src/app/css/tailwind.css
Inside this file, locate or add your :root selector and override the theme tokens as needed:

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  /* ... additional variables ... */
}

Dark Mode Support

Add a .dark block for dark theme overrides:

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  /* ... additional overrides ... */
}

More Resources

For reference and live customization tools, explore the following: