Skip to main content

🎨 Colors & Themes

The theme and color management in Springular is based on Tailwind CSS, allowing for a customizable and responsive UI.

Customizing Colors​

Springular lets you adjust the primary color used across the app and toggle between light and dark modes. The primary color can be customized with shades (e.g., primary-100, primary-200, etc.). This customization follows the standard Tailwind CSS color customization approach. You can learn more about it here.

Configuration​

To customize the theme and colors, all changes are made centrally through the ThemeService. This service handles both the theme mode (light or dark) and primary color settings. User preferences are applied globally across the app.

Key Features​

  • Change Theme Mode: Toggle between light and dark modes to change the app's visual style.
  • Change Primary Color: Choose a primary color that influences various UI elements like buttons, links, and backgrounds.

Changes are applied instantly and remembered across sessions. The configuration is stored in localStorage, ensuring that user preferences persist even after the application is closed and reopened.

Theme and Color Management​

The theme and color management is handled by:

  • ThemeService: Controls the light/dark mode and primary color across the app.
  • ProfileMenuComponent: Allows users to switch themes and select a primary color from the profile menu. Changes take effect right away.

styles.scss applies the theme and color settings throughout the app, including text and background colors.