Styling Valeros

Valeros uses TailwindCSS for styling, with DaisyUI as the component library.

Using Tailwind Classes

Throughout the application, you can use Tailwind utility classes directly in component templates.

For example:

<div class="bg-app-bg p-4 rounded-lg">
  <h1 class="text-primary font-sans text-2xl">Heritage Object</h1>
</div>

TIP

Tailwind strips all default browser styles, so elements like <h2> won't have any styling unless you add utility classes.

DaisyUI Components

DaisyUI provides pre-styled components like buttons, cards, and modals. Refer to the DaisyUI documentation for available components and their usage.

Themes

Valeros includes three pre-configured themes: valeros-light (default), valeros-dark, and valeros-purple.

Video: Switching between themes through the Configuration UI

Themes are defined in tailwind.config.js using DaisyUI's theme system with CSS variables for dynamic switching.

Adding or Modifying Themes

Each theme is defined with CSS variables that control fonts, colors, and other properties:

daisyui: {
  themes: [
    {
      'valeros-light': {
        ...require('daisyui/src/theming/themes')['light'],
        primary: '#00839F',
        'primary-content': '#ffffff',
        '--app-bg': '#E1ECF2',
        '--app-bg-dark': '#D1DCE2',
        '--font-sans': '"Familjen Grotesk", sans-serif',
        '--font-mono': '"Space Mono", monospace',
      },
    },
  ],
}

The Tailwind config references these CSS variables:

fontFamily: {
  sans: ['var(--font-sans)', 'sans-serif'],
  mono: ['var(--font-mono)', 'monospace'],
},
colors: {
  'app-bg': 'var(--app-bg)',
  'app-bg-dark': 'var(--app-bg-dark)',
}

See the DaisyUI Theme Generator for more customization options.

TIP

When adding a new theme, remember to also add it to the theme switcher component at src/app/config/config-page/theme-switcher/theme-switcher.component.ts.