DEV Community

Discussion on: Setup TailwindCSS in Angular the easy way

Collapse
 
rahiyansafz profile image
Rahiyan Safin • Edited

Could anyone help me out? i made an custom css dark toggle mode theme.
and i want to make it with the tailwind.

stackblitz.com/edit/angular-ivy-b9...

we know that the root of the angular project is app component, so i made like this in the custom css project,

  <a>NIGHT</a>
  <a>DAYa&gt;
</a>
Enter fullscreen mode Exit fullscreen mode

and app component ts:

isDarkEnable = false;
presentTheme$ = new BehaviorSubject('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;
}

and the global scss is:

.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);
}

now could anyone help me how to modify it in the tailwind?