prefers color scheme czy ktoś już wykonywał projekt

[rkonik]

Mam tak naprawdę dwa pytania. Pierwsze to czy ktoś z was już wykonywał tak prefers-color-scheme?

Sprawdziłem jak czy jest to realne do użytku i w jak radzą sobie z tym przeglądarki. Wydaje się że świetnie:
https://caniuse.com/#search=prefers-color-scheme

Wszystko działa świetnie, osobiście uważam to za wspaniałe narzędzie.
I w tym miejscu pojawia się dla mnie mały problem lub źle coś zrozumiałem.
Bardzo istotne jest to że do testów używam wyłącznie przeglądarek, które to wspierają. Jeżeli wszystkie reguły umieszczę w jednym pliku jest dobrze, dla prostych stron mogę użyć jednego pliku CSS z zminennymi CSS i jest to akceptowalne. Jednak przy bardziej skomplikowanych szablonach lepiej jest rozdzielić to na kilka plików np dark.css, light.css template.css
Tak też zrobiłem i kod wygląda następująco:


<link href="path_to_dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">
<link href="path_to_light.css" rel="stylesheet" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference) ">
<link href="path_to_template.css" rel="stylesheet">


Zastanawiam się dlaczego przeglądarka ładuje wszystkie pliki? Jeżeli ustawione mam w przeglądarce Dark Mode powinna załadować wyłącznie niezbędne pliki. W przeciwnym wypadku jeżeli nie mam ustawione zupełnie nic nie powinna ładować pliku dark.css
Niestety tak się nie dzieje. Czy ja coś źle rozumiem czy popełniłem jakiś błąd?

[siristru]

LOL, doczytaj dobrze w dokumentacji :)
Wszystkie linkowane pliki MUSZĄ być załadowane jako zasoby strony. Kwestią jest PRIORYTET danego pliku:


Try toggling dark mode and reload the page: the particular currently non-matching stylesheets are still loaded, but with the lowest priority, so that they never compete with resources that are needed by the site right now.

Bibuła:

https://web.dev/prefers-color-scheme/

https://blog.tomayac.com/2018/11/08/why-browsers-download-stylesheets-with-non-matching-media-queries-180513/

[rkonik]

Człowiek ciągle się uczy. Nie doczytałem tego fragmentu który przytoczyłeś.
Bardzo Ci dziękuję za zwrócenie uwagi, dla mnie jest bardzo pomocna.

Realizowałeś już projekt w oparciu o prefers-color-scheme? Może ktoś inny już realizował i jest w stanie się pochwalić.

[siristru]

Nie, jeszcze nie ale to bardzo interesujące. Może być pomocne by wprowadzać np. WCAG

[rkonik]

To jest pomocne nie tylko może być. Wystarczy że ustawisz swoje preferencje w systemie lub przeglądarce i wszystko działa. Nie musisz specjalnie tworzyć dodatkowych elementów w stronie aby móc przełączać pomiędzy preferencjami. Poza prefers-color-scheme masz do dyspozycji prefers-reduced-motion, a w przyszłości mają być wprowadzone inne rozwiązania, które mam nadzieję w niesamowicie prosty sposób dla odbiorcy końcowego ułatwią korzystanie ze strony w sposób w jaki on preferuje.
Co za tym idzie łatwiej będzie wprowadzać WCAG, jestem bardzo podekscytowany tymi rozwiązaniami ponieważ z poziomu samego CSS-a będzie można to uzyskać.

Jednocześnie jestem ciekaw czy ktoś już wdrażał prefers-color-scheme ponieważ chciałbym zobaczyć jak to w produkcie finalnym się sprawdza.