如何检测用户是否处于黑暗模式（Tailwind / Angular）

Question

我有一个带有深色模式按钮的导航栏，我想在用户处于深色模式时更改该按钮，并在他返回浅色模式时返回旧按钮。 picture

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

没关系，我自己搞定了:

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

如何检测用户是否处于黑暗模式（Tailwind / Angular）

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

angular

tailwind-css