Dark mode

Enable dark mode

All you need to do is add Theme as a hostDirectives in your app.component.ts.

...
import { Theme } from 'flowbite-angular/theme-toggle';
...

@Component({
  ...
  hostDirectives: [Theme],
})
export class AppComponent {
  ...
}

The configuration needed for tailwind will depend on the type value of FlowbiteThemeDirective. In the FlowbiteThemeDirective, you are able to change its behavior. Here is an example of configuration to make it use data-attributes :

provideFlowbiteThemeConfig({
  type: { type: 'attr', name: 'data-theme' },
}),

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

Get or set theme manually

In order to access or to update the application theme manually, you simply have to inject FlowbiteThemeDirective into your component and call one of the provided functions.