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: