Tag: css

A few weeks ago, we published implementation of darkmode for static website without any javascript part 1, and part 2. This week, we would like to show you, how this useful feature can be implemented in any React application. Good news is, that coding such feature in React is way easier and requires less code!

In the previous part Dark Mode Toggle without Javascript, we demonstrated how to set up CSS variables and style the wrapper div container. In this second part, we will focus on styling the toggle itself.

The following code snippets of HTML and CSS demonstrates a simple setup to enable dark mode using only HTML and CSS, without any JavaScript. This solution takes user preferences into account and allows the user to manually toggle between light and dark mode. Practical example can be seen in the header of this page.