Styling

The ng add command automatically creates a src/themes.css file in your project. This is where you should define your theme-specific CSS variables.

The library targets the <html> element by default. Depending on your configured mode, you should define your variables as shown below.

Using Classes (Default)

If you chose mode: 'class', use class selectors:

:root,
.light {
  --bg-color: #ffffff;
  --text-color: #333333;
}

.dark {
  --bg-color: #121212;
  --text-color: #ffffff;
}

.sunset {
  --bg-color: #ff5f6d;
  --text-color: #ffffff;
}

Using Attributes

If you chose mode: 'attribute', use data attribute selectors:

[data-theme='light'] {
  --bg-color: #ffffff;
  --text-color: #333333;
}

[data-theme='dark'] {
  --bg-color: #121212;
  --text-color: #ffffff;
}

[data-theme='sunset'] {
  --bg-color: #ff5f6d;
  --text-color: #ffffff;
}

Best Practices

Define a Fallback: Always have a :root or a default theme class defined first.
Use Semantic Names: Instead of --blue, use --primary-color.
Global Styles: Remember that src/themes.css is added to your angular.json styles array, so these variables will be available globally.