Creating A Dark And Light Theme Using Just One Line Of HTML Code

Creating A Dark And Light Theme Using Just One Line Of HTML Code
September 06, 2022

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.


<!DOCTYPE html>
<html lang="en">

  <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>

  Set dark and light mode using color-scheme
  <button>Click Me</button>

  <select id="theme" onChange="switchTheme()">
    <option value="light">Light</option>
    <option value="dark">Dark</option>

function switchTheme() {
  const theme = document.getElementById("theme").value;
  document.getElementsByTagName("meta")[2].content = theme;




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?

Resources for You

ChatGPT Guide For Software Developers

Learn to use ChatGPT to stay ahead of competition

Front-End Developer Interview Kit

Today, Start preparing to get your dream job!

JavaScript Developer Kit

Start your JavaScript journey today!

Are you looking for Front-end Developer Job?

Get Front-end Interview Kit Now, And Be Prepared to Get Your Dream Job

Get Front-end Interview Kit

Newsletter for Developers!

Join our newsletter to get important Web Development and Technology Updates