forced-color-adjust

Ejemplos

Optar por no usar colores forzados

Utiliza la utilidad forced-color-adjust-none para excluir un elemento de los colores impuestos por el modo de colores forzados. Esto es útil en situaciones donde imponer una paleta de colores limitada degradará la usabilidad.

Intenta emular `forced-colors: active` en tus herramientas de desarrollador para ver los cambios

Camiseta Básica

$35

Elige un color

BlancoGrisNegro

<form>
  <img src="/img/shirt.jpg" />
  <div>
    <h3>Camiseta Básica</h3>
    <h3>$35</h3>
    <fieldset>
      <legend class="sr-only">Elige un color</legend>
      <div class="forced-color-adjust-none ...">
        <label>
          <input class="sr-only" type="radio" name="color-choice" value="White" />
          <span class="sr-only">Blanco</span>
          <span class="size-6 rounded-full border border-black/10 bg-white"></span>
        </label>
        <!-- ... -->
      </div>
    </fieldset>
  </div>
</form>

También puedes usar la variante de colores forzados para agregar estilos condicionalmente cuando el usuario ha habilitado un modo de color forzado.

Restaurando colores forzados

Utiliza la utilidad forced-color-adjust-auto para hacer que un elemento se adhiera a los colores impuestos por el modo de colores forzados:

<form>
  <fieldset class="forced-color-adjust-none lg:forced-color-adjust-auto ...">
    <legend>Elige un color:</legend>
    <select class="hidden lg:block">
      <option value="White">Blanco</option>
      <option value="Gray">Gris</option>
      <option value="Black">Negro</option>
    </select>
    <div class="lg:hidden">
      <label>
        <input class="sr-only" type="radio" name="color-choice" value="White" />
        <!-- ... -->
      </label>
      <!-- ... -->
    </div>
  </fieldset>
</form>

Esto puede ser útil si quieres deshacer la utilidad forced-color-adjust-none, por ejemplo, en un tamaño de pantalla más grande.

Responsive design

Prefija una utilidad forced-color-adjust con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="forced-color-adjust-none md:forced-color-adjust-auto ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.