Changing colors

Tip

To learn more about daisyUI's theme configuration options, check their themes documentation and theme generator.

This project uses Tailwind CSS with daisyUI as a component library. By default, it uses a tweaked version of daisyUI's "light" theme.

Configuring themes per environment

Configure used colors in config/themes.ts:

export const developmentTheme: ThemeSettings = {
  ...daisyuiBase['light'],
  primary: '#4a4a4a',
  neutral: '#808080',
  accent: '#b3b3b3',
  secondary: '#6d6d6d',
  background: '#f2f2f2',
  search_background: '#f2f2f2',
  '--rounded-box': '1rem',
  '--rounded-btn': '1rem',
  '--rounded-badge': '1rem',
  'primary-content': 'white',
};

As you can see, themes can be tweaked for four different environments: development, test, acceptance, and production. The theme is dynamically set in tailwind.config.js, through a helper function in tailwind-theme-export.js.

Configuring a single theme

If you just want to configure a single theme, regardless of the environment in which Valeros is deployed, you can simply override the theme directly in tailwind.config.js:

themes: [
      {
        main: {
          ...require("daisyui/src/theming/themes")["light"],
          primary: '#4a4a4a',
          neutral: '#808080',
          // ...
      }
]