Принудительная настройка цвета

​Основы использования

​Отказ от принудительных цветов

Используйте forced-color-adjust-none, чтобы отключить для элемента цвета, заданные режимом принудительного цвета. Это полезно в ситуациях, когда ограничение цветовой палитры ухудшит удобство использования.

Попробуйте эмулировать `forced-colors: active` в инструментах разработчика, чтобы увидеть изменения

Basic Tee

$35

Choose a color

White Gray Black

<form>
  <img src="..." />
  <div>
    <h3>Basic Tee</h3>
    <h3>$35</h3>
    <fieldset>
      <legend class="sr-only">Choose a color</legend>
      <div class="forced-color-adjust-none ...">
        <label >
          <input class="sr-only" type="radio" name="color-choice" value="White" />
          <span class="sr-only">White</span>
          <span class="size-6 rounded-full border border-black border-opacity-10 bg-white"></span>
        </label>
        <!-- ... -->
      </div>
    </fieldset>
</form>

Вы также можете использовать модификатор forced-colors для условного добавления стилей, когда пользователь включил принудительный цветовой режим.

​Восстановление вынужденных цветов

Используйте forced-color-adjust-auto, чтобы отменить forced-color-adjust-none, заставляя элемент придерживаться цветов, установленных в режиме принудительного цвета.

Это может быть полезно, если вы используете другой элемент управления на экране большего размера, например:

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

​Применение условно

​Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте focus:forced-color-adjust-none, чтобы применять утилиту forced-color-adjust-none только при focus.

<a href="#content" class="forced-color-adjust-none focus:forced-color-adjust-auto">
  Перейти к содержимому
</a>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:forced-color-adjust-auto, чтобы применить утилиту forced-color-adjust-auto только на экранах среднего размера и выше.

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

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.