Dark mode for everyone
This website is me trying to learn css dark mode. Right now, I am following the article at web.dev for prefers color scheme https://web.dev/prefers-color-scheme/
For example, below is an svg that uses currentColor
to fill
the check mark.
On dark mode, the check mark should be light colored, and on light mode, the check mark should be dark colored.
Now we will add some filler text here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero massa, blandit id nisi sit amet, vestibulum aliquam elit. Donec orci ligula, porttitor eu velit quis, sollicitudin efficitur erat. Donec a aliquam ante. Sed ac suscipit velit. In a ligula vitae quam fringilla convallis dapibus quis magna. Sed libero odio, venenatis non eros id, porttitor porta ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pulvinar varius purus vitae tincidunt. Maecenas eu ultrices est, vel tincidunt leo. Nullam justo lacus, commodo non sodales eu, imperdiet eget elit.
Phasellus in pharetra massa, eget aliquam sapien. Maecenas consectetur diam magna, id condimentum quam accumsan sit amet. Phasellus id enim dui. In feugiat aliquet felis non venenatis. Sed justo purus, ornare ac ex non, pretium luctus eros. Sed pharetra nibh ipsum, ac rutrum ligula tincidunt eu. Curabitur accumsan dignissim diam scelerisque ultricies. Phasellus egestas viverra elit sit amet blandit. Mauris nibh ante, malesuada quis bibendum in, auctor sed sapien. Nullam semper turpis in tortor dapibus consequat. Etiam condimentum iaculis augue at posuere. In hac habitasse platea dictumst.
Proin nec massa facilisis, sodales nibh quis, lacinia est. Vivamus nec vestibulum libero. Ut pellentesque dictum commodo. Morbi et libero quis ligula tempus ullamcorper. Aliquam non dignissim orci, at rhoncus lorem. Donec consectetur est quis orci fermentum vehicula. Donec neque erat, tincidunt a turpis quis, aliquet interdum sapien.
Suspendisse sit amet felis interdum, sollicitudin sapien sit amet, ornare lacus. Duis rhoncus semper leo, ut tincidunt ante vestibulum non. Aenean congue quis erat a ultrices. Nunc a ipsum sit amet nisl fermentum porta. Vestibulum non magna pharetra, laoreet leo at, tempor nisi. Mauris eget rhoncus nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sit amet placerat leo. Curabitur odio ligula, rutrum a lobortis eu, auctor a quam. Phasellus suscipit blandit diam, id aliquam lacus malesuada eget. Nulla sed ligula urna. Vivamus volutpat fermentum justo ac auctor. Aliquam nec iaculis erat. Proin cursus mattis nulla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Aenean eget finibus elit, nec scelerisque sapien. Praesent malesuada eros turpis, a consequat magna commodo at. Integer aliquet ac magna vitae pretium. Pellentesque consequat, felis sed condimentum pharetra, felis risus lobortis urna, sed pretium purus lectus eu lacus. Suspendisse sodales sagittis libero, in rutrum augue venenatis eu. Nullam enim nisi, dictum sed velit sed, pharetra laoreet mauris. Mauris elit nibh, tincidunt finibus aliquam eu, blandit at elit. Mauris posuere quam sit amet dictum consequat. Sed congue risus sit amet augue facilisis consectetur.