Shulou(Shulou.com)06/01 Report--

This article is about how to use stylesheets to add dark patterns to websites in html5. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Add dark mode to your site

Dark mode has been applied to many popular websites and applications, such as Twitter, Instagram, WhatsApp, and YouTube. But how do you add this model to your website?

I have always liked the dynamic website color theme switch very much. They allow you to choose your favorite color theme, thus improving the user experience!

For example, here are the color theme options found under display Settings in Twitter.

Let's create a similar feature this time. It may not be as classy as Twitter's theme changer, but we'll explain the technical details used here and show you how to use optional stylesheets (alternate style sheets) and JavaScript to switch theme definitions contained in CSS.

First of all. Let's take a look at what this article is going to create.

The following is a running example where you can switch the color theme of this site:

Https://www.javascriptteacher.com/dark-mode-alternate-css-style-sheet.html?rt

Click each button to immediately switch the CSS theme for the entire site. In the rest of this tutorial, I'll show you how to add dark mode functionality to your own site!

If you can grab the optional stylesheet used in this dark mode tutorial page, you can also copy it to your own website or use it in your Wordpress (or similar site building tool).

You may have heard that CSS can be inline, internal and external. This determines how CSS is included in your document. But in order to understand the concept of optional stylesheets, we first need to look at …...

Three types of cascading style sheets

However, cascading stylesheets (that is, CSS) have three other forms. They are persistent, preferred and optional, respectively.

Persistent styles refer to CSS styles that are always enabled and combined with active style sheets. To specify persistent stylesheets, add the rel = "stylesheet" attribute to your link tag and skip the title attribute.

This is how you specify a stylesheet.

To create an optional stylesheet, all you have to do is set the rel attribute in the link tag to "alternate stylesheet". That's it. This is only the first step. Now we need to write a script to switch stylesheets.

Dynamically switch between style sheets

When I was doing relevant research, I found a lot of optional stylesheet JavaScript functions on the Internet for some years. But they are a little out of date, so I wrote a version myself.

Most importantly, you need to set the property disabled to false on the optional stylesheet object you want to enable.

Function setActiveStyleSheet (title) {let css = `link [rel= "alternate stylesheet"] `; let stylesheets = document.querySelectorAll (css); stylesheets.forEach (sheet = > sheet.disabled = true); let selector = `link [title= "${title}"]`; let stylesheet = document.querySelector (selector); stylesheet.disabled = false

To dynamically switch to a new stylesheet, you must first disable all available optional stylesheets. If you fail to do this, you will find that your optional stylesheet does not work (cannot be switched). Therefore, in the first step of this function, we disabled all available optional stylesheets. When we are done, we enable the one specified in the title parameter.

Let DarkModeButton = document.getElementById ("DarkModeButton"); DarkModeButton.addEventListener ("click", event = > setActiveStyleSheet ("darkmode"))

You can attach the setActiveStyleSheet function as a callback to the "click" event of the button responsible for toggling it. Note that the above example assumes we have a stylesheet with title = "darkmode". Alternatively, you can use the onclick attribute directly on the element:

In terms of the work required to dynamically switch CSS stylesheets, this is all done. But there's one more thing! If the user leaves the site after choosing a different theme, you need to make sure that the site loads the last theme they chose when the user returns. This can be done using cookie, but in this tutorial, I will use HTML5 localStorage to do it.

Memorize the selected theme

We can use localStorage to remember the theme that the user has previously selected. The code here is straightforward. Each time we select a theme, we store its title name in a localStorage project named "theme". Let's update the function already written in the previous step:

Function setActiveStyleSheet (title) {let css = `link [rel= "alternate stylesheet"] `; let stylesheets = document.querySelectorAll (css); stylesheets.forEach (sheet = > sheet.disabled = true); let selector = `link [title= "${title}"]`; let stylesheet = document.querySelector (selector); stylesheet.disabled = false; localStorage.setItem ("theme", title);}

Notice that we have added a new localStorage call here. Now, every time you switch to an optional stylesheet, it is stored under the keyword "theme".

Now, if the user leaves the site and (after closing the browser tab) enters the site again, we need to restore the default theme saved in localStorage.

To do this, we need to read the local storage from the DOMContentLoaded event (shortly after the DOM is loaded) and select the stylesheet using the values stored in the theme project:

Window.addEventListener ('DOMContentLoaded', (event) = > {console.log (' DOM fully loaded and parsed'); let title = localStorage.getItem ("theme"); setActiveStylesheet (title);}) Thank you for reading! This is the end of this article on "how to use stylesheets to add dark mode to a website in html5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.