Dark Mode: Put your Site in HTML Dark Mode this 2023

Hello bloggers, again in a new tutorial to put it into practice on your blog and it's about how you can add the dark mode theme on your page with a few simple lines of JavaScript (JS) code and using CSS style sheets in HTML.

Without further ado, I am going to reveal the best way to apply the dark mode theme on your blog. Let's get started and I'll show you the complete guide.

{getToc} $title={Table of Content}

What does Dark Mode work for?

Many will think that it is just a style to put on our site so that it has a better impression when users come to review the blog. Since the user will have the option to turn on the Dark Mode or turn it off (light mode) so that it is with its default colors.

Let me tell you that the theme in Dark Mode of a site is to offer a better experience to users because there are times when users review your content at night and through this mode it improves the visibility in the text, images or even in videos. . It is pleasing to the eye of the user.

Tutorial to Add Dark Mode Theme on Website

Here, we will go into the step by step to get our Dark mode working on our site, following the step by step instructions:

Add the Style Sheet (CSS)

The first step is to style our blog in Dark Mode by adding the CSS code, you place it before the </head> tag. Copy the following code:

<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/71oqhteef1ctf5x/CSS_Dark_Mode.css">

Add JavaScript(JS)

The second thing we need to do is put the JavaScript code at the end of the blog, before the </body> tag. To give the function to our dark mode in Html.

Copy the following Script in our blog:

<script src="https://dl.dropboxusercontent.com/s/pc4op1cqf98vsru/lax_dark_mode.js"></script>
<script src="https://dl.dropboxusercontent.com/s/1g63ws5huvl1o3d/script_night_light_mode.js"></script>

Add DIV in page body

In this step we are going to put the button to switch to dark mode or light mode. For that, we will place the following Div code in the body of the HTML. Preferably before the </body> tag. Although, it can be placed anywhere in the HTML.

Copy the following line of code to switch to dark mode:

<div class="gn-button-wrapper fixed btn-3">
	<div class="gn-button-3">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
			<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
				<g id="moon-clear-line" transform="translate(-2.000000, 0.000000)">
					<polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
					<path d="M10,6 C9.99928403,8.84922088 11.5140071,11.4837947 13.976694,12.9167056 C16.4393808,14.3496165 19.4783183,14.3645837 21.955,12.956 C21.474,18.03 17.2,22 12,22 C6.477,22 2,17.523 2,12 C2,6.8 5.97,2.526 11.044,2.045 C10.3575564,3.24993728 9.99768299,4.61325082 10,6 Z M4,12 C4,16.418278 7.581722,20 12,20 C14.8774004,19.9998278 17.5333948,18.4555562 18.957,15.955 C18.641,15.985 18.321,16 18,16 C12.477,16 8,11.523 8,6 C8,5.679 8.015,5.36 8.045,5.043 C5.54444377,6.46660517 4.00017218,9.12259959 4,12 Z" id="Shape" fill="#000000" fill-rule="nonzero">
					</path>
					<path d="M18.164,2.291 L19,2.5 L19,3.5 L18.164,3.709 C17.4475681,3.88817506 16.8881751,4.44756809 16.709,5.164 L16.5,6 L15.5,6 L15.291,5.164 C15.1118249,4.44756809 14.5524319,3.88817506 13.836,3.709 L13,3.5 L13,2.5 L13.836,2.291 C14.5520463,2.11150297 15.1109953,1.55216954 15.29,0.836 L15.5,0 L16.5,0 L16.709,0.836 C16.8881751,1.55243191 17.4475681,2.11182494 18.164,2.291 Z" id="star1" class="moon-star" fill="#000000">
					</path>
					<path d="M23.164,7.291 L24,7.5 L24,8.5 L23.164,8.709 C22.4475681,8.88817506 21.8881751,9.44756809 21.709,10.164 L21.5,11 L20.5,11 L20.291,10.164 C20.1118249,9.44756809 19.5524319,8.88817506 18.836,8.709 L18,8.5 L18,7.5 L18.836,7.291 C19.5524319,7.11182494 20.1118249,6.55243191 20.291,5.836 L20.5,5 L21.5,5 L21.709,5.836 C21.8881751,6.55243191 22.4475681,7.11182494 23.164,7.291 Z" id="star2" class="moon-star" fill="#000000">
					</path>
				</g>
			</g>
		</svg>
	</div>
</div>

add jquery

For it to work correctly, you must add the JQuery version you have, preferably from version 3.4.1 onwards. Also, you can try with an older version. If it doesn't work, then try the ones I mentioned.

You place it before the </body> tag

HTML Night Mode Installation Guide

Download Night Mode CSS, JS and HTML

In the following link you can acquire the documents to put the night mode in HTML to work.

https://dl.dropboxusercontent.com/s/0l8gudf1tik91ix/Night%20Light%20Mode%20HTML.rar