Websites with a dark theme are popular because they emphasize the content on their pages and help reduce eye strain.
The process of changing a full website to a dark theme can be ambitious, taking days of designing and coding in order to ensure the entire site looks the way you want it to.
That's where this article comes in: it will show you how easy it is to convert an existing light-themed design into a dark one by just changing one line of HTML code!
What is the color-scheme meta tag?
The color-scheme meta tag is a relatively new addition to HTML. It allows developers to specify whether a page should be displayed in a light or dark theme. This can be useful for pages that are heavy on text, as it can help improve readability.
You can now easily set a dark or light theme with one line of HTML code. This is great for those who want to change their website's appearance without having to edit the CSS.
HTML one line code to set dark theme
<meta name="color-scheme" content="dark">
That's it. You can test it. Your web page will have a dark theme.
This feature works well when you use pure HTML components. For custom CSS this meta tag doesn't overwrite the css.
Here I have created a basic HTML Page.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light">
<title>Theme Color Demo</title>
</head>
<body>
<p>
Set dark and light mode using color-scheme
</p>
<p>
<button>Click Me</button>
</p>
<div>
<select id="theme" onChange="switchTheme()">
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
</body>
<script>
function switchTheme() {
const theme = document.getElementById("theme").value;
document.getElementsByTagName("meta")[2].content = theme;
}
</script>
</html>
Output:
As you can see, by using just one line of HTML code, you can easily change the entire look and feel of your website.
This is a great way to add some variety to your site without having to invest a lot of time or money into creating new code.
So if you're looking for a quick and easy way to give your site a fresh new look, why not try creating a dark and light theme?