The question is, how can we "enable" the dark theme? We can write some JavaScript to do the work for us: const htmlClasses = document. In the above example, the text will be black for the light theme however it will change to white if the dark theme is enabled. In this article, we will make a light/dark mode switch using only a CSS checkbox. Once this configuration is done, dark variants can be added to our application, in the following way: Light | Dark Lets make a dark mode switch without JavaScript and without CSS variables.
#Css dark mode switch manual#
media considers the prefers-color-scheme feature however if we'd like to enable switching between the themes manually, we need to use class.Įnabling the manual switch requires the darkMode property added to the file with a value of class. Let's take a look at a potential implementation of this using the framework mentioned above.Įnabling dark mode using Tailwind, there are two options: class and media. Different CSS frameworks offer different solutions, including TailwindCSS. In these implementations, we can switch between the light and the dark theme, as expected. The first option is what we could call a "two-state" switch.
After doing some research, which involved visiting numerous sites and reading articles around the subject, I found that there seem to be two distinctive implementation options for switching between themes.īefore I continue, I wanted to thank Chee Aun for pointing me in the right direction regarding the various state options for the light/dark theme. Large companies - most notable in the recent months, Stack Overflow and GitHub have also implemented a dark theme. What we'll discuss, however, is the correct implementation of the light/dark theme in modern websites. Do you want to change the theme of the page if users default scheme is dark Zain Zafar. The science behind this is more complex, and in this article, we are not exploring this subject.
Research by the Harvard Medical School shows that extended exposure to blue light can affect how well we sleep during the night. We will use :root because we want to avail the variables globally.In recent years more websites have implemented "dark" mode, a theme that reduced the light emitted by the device's screen and therefore causing the reader less eye strain. It matches with the root element in your document tree, generally the tag. They are set using custom property notation (e.g., -main-color: black ) and are accessed using the var() function (e.g., color: var(-main-color) )įirst, we'll add our light or default mode css variables to the :root pseudo class. This is the excited part in the article, first you need to create a file called compnents/theme. Here's the tldr version - Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. After that, include the compiled CSS output.css and include it into your HTML file, then enjoy. If you wish to read more about custom properties you can read on MDN. We will be adding CSS custom properties also known as CSS variables, which we can reference and modify throughout the document. If you don't have a website of your own to which you wish to add this functionality, use this demo website to follow along. Here we are going to provide the user with a simple switch to toggle between dark mode and light mode and we will also try to remember their preference for future visits. Giving your users a way to customise the interface to their preference is a huge win for user experience.
0 kommentar(er)
