Themes

Out of the box, Modular provides a default Light Theme and a Dark Theme. Users can toggle between them by clicking on the "Toggle Theme" button, located at the top right corner of the screen.

The color scheme, palette system, and general design concepts are based on the Radix UI - Color Scale System.

You have the freedom to customize any aspect of the themes or create your own themes. To accomplish this, follow these steps:

1 - Define your theme colors in the resources/css/app.css file. Within this file, you will encounter the :root, :root .dark-theme (which can serve as the starting point for your own theme colors).

2 - The Toggle Theme switcher is defined in the resources/js/Components/AppTopBar.vue file. Feel free to customize it according to your needs.

All other aspects of your application components can be customized by directly modifying them, adjusting the Tailwind CSS classes of the components.