Programmiererforum

Posted: **19 Aug 2025, 13:16**

Verwenden von Light -Dark () wäre für mich ansprechend, aber es ist Teil der 2024 -Basislinie und erhöht die von Tailwindcss v4 festgelegte Minimum -Browser -Versionsanforderung - das bereits hoch ist - ursprünglich auf die 2023 -Basislinie abzielt. (Baseline 2023)
[*]https://caniuse.com/?search=light-dark (Baseline 2024)

Erforderliche minimale Browser-Versionen: />
Tailwind CSS v4 (without light-dark())
with light-dark()

Chrome 111 < /td>
Chrom 123 < /td>
(+) < /td>
< /tr>

safari 16.4 < /td>
< /td> < /td>
/>

Firefox 128
Firefox 128
(=)

https://caniuse.com/usage-table

Der LightningCSS-Engine, den TailwindCSS v4 unter der Haube verwendet, bietet eine Lösung für einen Polyfill-ähnlichen Ersatz von helldark () mit einigen extra code. Light-Dark () < /code> Farbfunktion < /li>
< /ul>
Aus Gründen der Kompatibilität hat Tailwindcss jedoch einfach die Verwendung dieser Funktion hier deaktiviert.

Code: Select all

tailwindlabs/tailwindcss

Ausgabe #15438-[v4] Hell-Dark ist in optimierter Build gebrochen. />

Code: Select all

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

Es funktioniert, aber aus den in der Frage beschriebenen Gründen erhöht es die Anforderungen an die minimale Browserversion.

Programmiererforum

Wie kann ich sicher die Verwendung von "Hell-Dark ()` `einführen, ohne die minimale Browser-Versionsanforderung zu erhöh

Wie kann ich sicher die Verwendung von "Hell-Dark ()` `einführen, ohne die minimale Browser-Versionsanforderung zu erhöh