We will use :root because we want to avail the variables globally. The default appearance will be the light theme. So far we’ve set up the project so that: The data-theme'dark' theme can be toggled on/off (we’ll cover how to do this in the section below). The value is either light or dark, though the W3C spec states that it might support future values like sepia. Prefers-color-scheme contains that value. The user can configure their operating system to use a light or dark theme. It matches with the root element in your document tree, generally the tag. Notice that it’s similiar to the :root declaration, except the text color is white and the background color is a dark gray. The prefers-color-scheme media query works the same way. 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. For example, if you have a prefix of tw-, youll need to use the tw-dark. 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. If youve set a prefix in your Tailwind config, be sure to add that to the dark class. It is ready to use dark mode plugin that works out of the box and is compatible with all WordPress themes and offers many options to customize the position, width, height, and border radius of the toggle button. If you wish to read more about custom properties you can read on MDN. The users can easily switch between a dark or light scheme by clicking on the toggle button. Dark mode switch (dark mode) Now whenever a user clicks on the button the whole layout will change from dark to light and vice-versa. When linking another Pen as a resource, make sure you use a URL Extension of the type of code you want to link to. 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. Click the button to toggle between dark and light mode for this page. 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. Switch between dark and light mode with CSS and JavaScript. Giving your users a way to customise the interface to their preference is a huge win for user experience.
0 Comments
Leave a Reply. |