Saisie de remplissage automatique en mode sombre à l'aide de Tailwind

Question

Après avoir utilisé le mode sombre pour saisir le mot de passe mémorisé, j'ai rencontré un problème avec la couleur d'entrée qui était moche. En mode clair c'est jaune, ce qui n'est pas mal.

J'ai trouvé des réponses ici en utilisant webkit-autofill mais j'ai du mal à utiliser tailwind dark: J'ai du mal à l'implémenter dans sass dans le fichier code>

Answer 1

La solution est d'ajouter ceci au fichier global.scss :

@layer components {
  .inputDarkModeOverride {
    &:-webkit-autofill {
      box-shadow: 0 0 0 30px #1c1c1d inset;
    }

    &:-webkit-autofill:hover {
      box-shadow: 0 0 0 30px #1c1c1d inset;
    }

    &:-webkit-autofill:focus {
      box-shadow: 0 0 0 30px #1c1c1d inset;
    }

    &:-webkit-autofill:active {
      box-shadow: 0 0 0 30px #1c1c1d inset;
    }
  }
}

Puis ajoutez className={`${styles.input} dark:inputDarkModeOverride`} dans l'attribut d'entrée.