Как я могу безопасно ввести использование `light-dark ()` без увеличения минимальной требования к версии браузера? ⇐ CSS

[Anonymous]

Использование Light -Dark () было бы привлекательным для меня, но он является частью базовой линии 2024 года и несколько повышает минимальные требования к версии браузера, установленную Tailwindcs V4 - который уже высокий - первоначально нацеленный на базовую линию 2023. 2023). />
TailWind CSS V4 (без Light-dark () < /code>) < /th>
с Light-dark () < /code> < /th>
< /th>
< /tr>
< /thead>


< /thead>


chrome 123 < /td>
(+) < /td>
< /tr>

safari 16.4 < /td>
safari 17.5 < /td>
(+) < /br />) < /td> < /td>) < /td>) < /td>) /> < /tr>

Firefox 128 < /td>
Firefox 128 < /td>
(=) < /td>
< /tr>
< /tbody>
< /table> < /div>

• />
• https://caniuse.com/usage-table

Двигатель LightningCss, который используется под капотом, используется под капотом. Transpilation: Light-Dark () < /code> Цветовая функция < /li>
< /ul>
Однако, по причинам совместимости, Tailwindcss просто отключил использование этой функции здесь. < /p>

• Список исключенных функций LightningCs < /li>

  Код: Выделить всё

  tailwindlabs/tailwindcss

  Проблема № 15438-[v4] Light-Dark сломлен в оптимизированной Build

Как я могу использовать Light-dark () без увеличения минимальной версии браузера, даже без полагаться на эту функцию? />

Код: Выделить всё

document.querySelector('button').addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
});< /code>


@custom-variant dark (&:where(.dark, .dark *));

@theme {
--color-primary: light-dark(#da373d, #fd96b0);
}

* {
color-scheme: light; /* apply "light" (first) color from light-dark() */

@variant dark {
color-scheme: dark; /* apply "dark" (second) color from light-dark() */
}
}



Hello world!


Toggle Light/Dark

это работает, но по причинам, подробно описанным в вопросе, это увеличивает минимальные требования к версии браузера.
По причинам, описанным выше, фрагмент кода работает только на chrome 123+ и . However, I'd like an alternative so that I don't have to target these versions, but instead align with the Chrome 111+ and Safari 16.4+ versions preferred by v4.
The goal is to be able to declare the light and dark color-scheme values in a single line, similar to light-dark(), so that both can be seen at once in Одна строка.
note : мне нравится решение Light-dark () , но я не хочу налагать базовые требования браузера 2024>

Подробнее здесь: https://stackoverflow.com/questions/797 ... g-the-mini