diff --git a/Dark-Mode.png b/Dark-Mode.png
new file mode 100644
index 0000000..7fdd17c
Binary files /dev/null and b/Dark-Mode.png differ
diff --git a/Light-Mode.png b/Light-Mode.png
new file mode 100644
index 0000000..1e90bab
Binary files /dev/null and b/Light-Mode.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..958ba4b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>Dark Mode</title> 
+	<meta charset="UTF-8">
+    <link rel="stylesheet" href="style.css">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<script src="script.js" defer></script>
+
+	<script src=
+"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js">
+	</script>	
+	
+</head>
+
+<body>
+	<div class="mode">
+		Dark mode:			 
+		<span class="change">OFF</span>
+	</div>
+	
+	<div>
+		<h1>Contribution Project</h1>
+		<p><i>A Contribution Project for Developers</i></p>
+
+		<h3>Light and Dark Mode</h3>
+		<div>
+			<img src="Light-Mode.png" id="lightImage" alt="Light-Mode">
+		</div>
+		<p>
+			Click on the switch on top-right
+			to move to dark mode.
+		</p>
+
+	</div>
+	
+</body>
+</html>
+
+<!-- https://www.geeksforgeeks.org/how-to-create-dark-light-mode-for-website-using-javascript-jquery/ -->
diff --git a/javascript20-projects b/javascript20-projects
new file mode 160000
index 0000000..6f28e56
--- /dev/null
+++ b/javascript20-projects
@@ -0,0 +1 @@
+Subproject commit 6f28e56563ca51bf1e3530fe993eb40fa56baff0
diff --git a/light-dark-mode b/light-dark-mode
new file mode 160000
index 0000000..79e8a22
--- /dev/null
+++ b/light-dark-mode
@@ -0,0 +1 @@
+Subproject commit 79e8a22139a2d0e98d4898ed77746d765fa78461
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..08b7aea
--- /dev/null
+++ b/script.js
@@ -0,0 +1,39 @@
+$( ".change" ).on("click", function()
+			{
+			if ( $( "body" ).hasClass( "dark" ))
+			{
+				$( "body" ).removeClass( "dark" );
+				$( ".change" ).text( "OFF" );
+			}
+			else
+			{
+				$( "body" ).addClass( "dark" );
+				$( ".change" ).text( "ON" );
+			}
+			if (lightImage.getAttribute('src') === "Light-Mode.png")
+			{
+				lightImage.setAttribute('src', "Dark-Mode.png");
+				lightImage.addClass("img-toggle");
+			}
+			else
+			{
+				lightImage.setAttribute('src', "Light-Mode.png");
+			}
+});
+
+/*
+let lightImage = document.getElementById("lightImage");
+let change = document.getElementById("change");
+
+function changeToDark()
+{
+	if (lightImage.getAttribute('src') === "Light-Mode.png")
+	{
+		lightImage.setAttribute('src', "Dark-Mode.png");
+	}
+	else
+	{
+		lightImage.setAttribute('src', "Light-Mode.png");
+	}
+}
+*/
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..cab51f0
--- /dev/null
+++ b/style.css
@@ -0,0 +1,37 @@
+body{
+        padding: 10% 3% 10% 3%;
+        text-align: center;
+    }
+
+img {
+         height: 100%;
+         width: 100%;
+         object-fit: cover;
+    }
+
+.img-toggle {
+        height: 140px;
+        width: 140px;
+    }
+
+h1 {
+         color: #E67451;
+    }
+
+.mode {
+         float: right;
+      }
+
+.change {
+            cursor: pointer;
+            border: 1px solid #555;
+            border-radius: 40%;
+            width: 20px;
+            text-align: center;
+            padding: 5px;
+            margin-left: 8px;
+        }
+.dark {
+            background-color: #222;
+            color: #e6e6e6;
+      }
\ No newline at end of file
