CODEWITHSUNDEEP
cssangulartypescriptsasstailwind-css
Rahiyan Safz
Rahiyan Safz

Reputation: 49

How to toggle theme in Tailwind (dark mode) with Angular?

i made a custom css dark mode in angular. here's the link: stackblitz

now i wanted to made the exact same thing with Tailwind.

could anyone help me out?

how to config the global theme colors, i made in the custom css project like this,

.theme-light {
  --primary: #2577c1;
  --secondary-bg: #fff;
  --theme: #fff;
  --header-color: rgb(194, 63, 226);
  --route-link-active: #fff;
  --link-color: rgb(85, 80, 80);
  --border-color: rgb(85, 80, 80);
}
.theme-dark {
  --primary: rgb(255, 80, 11);
  --secondary-bg: #424242;
  --theme: #424242;
  --header-color: var(--theme);
  --route-link-active: rgb(255, 80, 11);
  --link-color: #fff;
  --border-color: rgb(28, 214, 28);
}

and the app.component.ts was like this,

isDarkEnable = false;
presentTheme$ = new BehaviorSubject<string>('theme-light');
constructor() {}
ngOnInit() {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    this.presentTheme$.next(savedTheme);
  }
}
changeTheme() {
  this.presentTheme$.value === 'theme-light'
    ? this.presentTheme$.next('theme-dark')
    : this.presentTheme$.next('theme-light');
  localStorage.setItem('theme', this.presentTheme$.value);
  this.isDarkEnable = !this.isDarkEnable;
}

app.component.html

<div [class]="(presentTheme$ | async)">
  <header>
    <app-header>
      <a *ngIf="isDarkEnable" (click)="changeTheme()" mode-button style="font-size:30px">LIGHT</a>
      <a *ngIf="!isDarkEnable" (click)="changeTheme()" mode-button style="font-size:30px">DARK</a>
    </app-header>
  </header>

  <main>
    <router-outlet></router-outlet>
  </main>
</div>

the tailwind says that i have to bind the class in the body tag, and i have no idea that how would i do the dark mode with the class binded to the body.

please help me. thank you

Upvotes: 3

Views: 6101

Answers (1)

Drummerman921
Drummerman921

Reputation: 309

Tailwind actually has a way to create custom styles. Once you follow these install instructions for tailwind, you should be able to create your own custom styles inside the tailwind.config.js file that is created in your project during the install.

For your custom colors the tailwind.config.js file would look something like this:

module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{html,ts}'],
  theme: {
    colors: {
      // Light theme colors
      'primary': '#2577c1',
      'secondary-bg': '#fff',
      'theme': '#fff',
      'header-color': '#c23fe2',
      'route-link-active': '#fff',
      'link-color': '#555050',
      'border-color': '#555050',

      // Dark theme colors
      'dark-primary': '#ff500b',
      'dark-secondary-bg': '#424242',
      'dark-theme': '#424242',
      'dark-header-color': '#424242',
      'dark-route-link-active': '#ff500b',
      'dark-link-color': '#fff',
      'dark-border-color': '#1cd61c',
    },
    extend: {},
  },
  plugins: [],
};

The most important things to note here are the names of the colors, and darkMode being set to 'class'.

The names of the colors (i.e. 'primary', 'dark-primary') are how you will use these colors in your code, and have darkMode set to 'class' makes sure that you can change your styles using tailwinds dark: syntax.

Once you have your config file set up you can bind to the body with ngClass and in the end you should have an index.html that looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>TestApp</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <app-root></app-root>
</html>

and an app.component.html that looks like this:

<body [ngClass]="{ dark: isDarkEnable }">
  <header>
    <app-header>
      <a *ngIf="isDarkEnable" (click)="changeTheme()" mode-button style="font-size:30px">LIGHT</a>
      <a *ngIf="!isDarkEnable" (click)="changeTheme()" mode-button style="font-size:30px">DARK</a>
    </app-header>
  </header>

  <main>
    <router-outlet></router-outlet>
  </main>
</body>

Now you will be able to use dark: to change your styles for dark mode either by adding a class to an element like so:

<div class="bg-secondary-bg dark:bg-dark-secondary-bg"></div>

or by adding the following to a class definition in a css file:

.someclass {
  @apply bg-secondary-bg dark:bg-dark-secondary-bg;
}

As you can see, we are using the name of the color in the tailwind.config.js file (secondary-bg and dark-secondary-bg) to set the background (bg) to the appropriate color.

Here is some more info about dark mode with tailwindcss if you are interested.

Happy Coding! :)

Upvotes: 2

Related Questions