Docs Quickstart Figma Flowbite
1.3.0
Customize Dark mode

Dark mode

Add dark theme to your application.


Enable dark mode

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

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

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

If your TailwindCSS configuration is based on the one provided by flowbite-angular, then everything will be set up. Otherwise, you have to update your TailwindCSS configuration like this :

module.exports = {
  darkMode: 'class',
};

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.

Flowbite

© 2019-2024 Flowbite™ is a registered trademark. All Rights Reserved.