How to detect if the user is in dark mode ( Tailwind / Angular )

Question

I have a navbar with a dark mode button that I would like to change when the user is on dark mode and back to the old one when he is back to light mode. picture

 <a (click)="toggleDarkMode()" class="lots" >
   <i class="fa-solid fa-moon fa-2xl dark:text-yellow-500" id="moon"></i>
 </a>

Basically, I would like a

  if (darkmode){
    <i class="fa-solid fa-moon fa-2xl dark:text-yellow-500"></i>
  }
  else{
    <i class="fa-solid fa-sun fa-2xl dark:text-yellow-500"></i>
  }

Answer 1

Nevermind, i managed it myself :

html:

<a (click)="toggleDarkMode()" class="cursor-pointer px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" >
          <i (click)="clickEvent()"  
    [ngClass]="status ? 'fa-sun' : 'fa-moon'"    class="fa-solid fa-2xl dark:text-yellow-500"></i>
        </a>

ts:

clickEvent(){
      this.status = !this.status;       
  }