Home Explore Help
Sign In
girishm
/
girishm.nfshost.com
Watch 2
Star 1
Fork 0

2 Commits 90856606dd ... 74729b208c

Author SHA1 Message Date
  girishm 74729b208c dark mode implementation 1 year ago
  Girish M 3ac802b54d dark mode for index 1 year ago
10 changed files with 121 additions and 20 deletions
Split View Show Diff Stats
  1. 67 0
      assets/css/main.css
  2. 19 1
      assets/js/main.js
  3. 5 3
      books.html
  4. 5 3
      education.html
  5. 5 1
      index.html
  6. 5 3
      photo.html
  7. 5 3
      project.html
  8. 5 3
      services.html
  9. 5 3
      subscribe.html
  10. 0 0
      workExperience.html

+ 67 - 0
assets/css/main.css
View File 

@@ -3285,3 +3285,70 @@
 
 		display: none;
 
 	}
 
 }
 
+
 
+/* Define dark theme styles */
 
+body.dark {
 
+  background-color: #1a1a1a;
 
+  color: #fff;
 
+}
 
+
 
+.dark h1, .dark h2, .dark h3 {
 
+  color: #fff;
 
+}
 
+
 
+.dark a {
 
+  color: #ff9800;
 
+}
 
+
 
+#header.dark {
 
+  background-color: #212121;
 
+  color: #fff;
 
+}
 
+
 
+#footer.dark {
 
+    background-color: #333;
 
+    color: #fff;
 
+}
 
+
 
+#menu.dark {
 
+    background-color: #333;
 
+    color: #fff;
 
+}
 
+.dark-theme-checkbox {
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 50px;
 
+  height: 24px;
 
+  background-color: #555;
 
+  border-radius: 12px;
 
+  margin-right: 10px;
 
+}
 
+
 
+.dark-theme-checkbox::before {
 
+  content: "";
 
+  display: block;
 
+  position: absolute;
 
+  top: 2px;
 
+  left: 2px;
 
+  width: 20px;
 
+  height: 20px;
 
+  border-radius: 50%;
 
+  background-color: #fff;
 
+  transition: all 0.3s ease;
 
+}
 
+
 
+.dark-theme-checkbox.checked::before {
 
+  transform: translateX(26px);
 
+  background-color: #333;
 
+}
 
+
 
+.dark-theme-checkbox::after {
 
+  content: "Dark";
 
+  display: block;
 
+  position: absolute;
 
+  top: 50%;
 
+  left: 50%;
 
+  transform: translate(-50%, -50%);
 
+  color: #fff;
 
+  font-size: 14px;
 
+}

+ 19 - 1
assets/js/main.js
View File 

@@ -60,6 +60,24 @@
 
 					side: 'right'

 				});

 

+		// Check local storage for the "darkTheme" key

+		if (localStorage.getItem("darkTheme") === "true") {

+			$('#dark-theme-checkbox').prop('checked', true);

+			$('body').addClass('dark');

+			$('#header').addClass('dark');

+			$('#footer').addClass('dark');

+			$('#menu').addClass('dark');

+		}

+

+	    $('#dark-theme-checkbox').change(function() {

+			$('.dark-theme-checkbox').toggleClass('checked');

+			$('body').toggleClass('dark');

+			$('#header').toggleClass('dark');

+			$('#footer').toggleClass('dark');

+			$('#menu').toggleClass('dark');

+			// Save the current state of the dark theme to local storage

+			localStorage.setItem("darkTheme", $('#dark-theme-checkbox').prop('checked'));

+	    });

 	});

 

-})(jQuery);
 
+})(jQuery);

+ 5 - 3
books.html
View File 

@@ -9,13 +9,15 @@
 
 <body>
 
 <!-- Header -->
 
 <header id="header">
 
+    <nav class="right">
 
+        <label for="dark-theme-checkbox">Dark Mode</label>
 
+        <input type="checkbox" id="dark-theme-checkbox">
 
+        <a href="index.html"><img src="assets/img/home.jpg"></a>
 
+    </nav>
 
     <nav class="left">
 
         <a href="#menu"><span>Menu</span></a>
 
     </nav>
 
     <a href="books.html" class="logo">Girish's Book Library</a>
 
-    <nav class="right">
 
-        <a href="index.html"><img src="assets/img/home.jpg"></a>
 
-    </nav>
 
 </header>
 
 <!-- Menu -->
 
 <nav id="menu">

+ 5 - 3
education.html
View File 

@@ -36,13 +36,15 @@
 
 
 <!-- Header -->
 
 <header id="header">
 
+    <nav class="right">
 
+        <label for="dark-theme-checkbox">Dark Mode</label>
 
+        <input type="checkbox" id="dark-theme-checkbox">
 
+        <a href="index.html"><img src="assets/img/home.jpg"></a>
 
+    </nav>
 
     <nav class="left">
 
         <a href="#menu"><span>Menu</span></a>
 
     </nav>
 
     <a href="education.html" class="logo">Girish's education</a>
 
-    <nav class="right">
 
-        <a href="index.html"><img src="assets/img/home.jpg"></a>
 
-    </nav>
 
 </header>
 
 
 <!-- Menu -->

+ 5 - 1
index.html
View File 

@@ -40,10 +40,14 @@
 
         }
 
     </style>
 
 </head>
 
-<body><!--  -->
 
+<body>
 
 
 <!-- Header -->
 
 <header id="header">
 
+    <nav class="right">
 
+        <label for="dark-theme-checkbox">Dark Mode</label>
 
+        <input type="checkbox" id="dark-theme-checkbox">
 
+    </nav>
 
     <nav class="left">
 
         <a href="#menu"><span>Menu</span></a>
 
     </nav>

+ 5 - 3
photo.html
View File 

@@ -37,13 +37,15 @@
 
 
 <!-- Header -->
 
 <header id="header">
 
+    <nav class="right">
 
+        <label for="dark-theme-checkbox">Dark Mode</label>
 
+        <input type="checkbox" id="dark-theme-checkbox">
 
+        <a href="index.html"><img src="assets/img/home.jpg"></a>
 
+    </nav>
 
     <nav class="left">
 
         <a href="#menu"><span>Menu</span></a>
 
     </nav>
 
     <a href="photo.html" class="logo">Girish's photos</a>
 
-    <nav class="right">
 
-        <a href="index.html"><img src="assets/img/home.jpg"></a>
 
-    </nav>
 
 </header>
 
 
 <!-- Menu -->

+ 5 - 3
project.html
View File 

@@ -36,13 +36,15 @@
 
 
 <!-- Header -->
 
 <header id="header">
 
+    <nav class="right">
 
+        <label for="dark-theme-checkbox">Dark Mode</label>
 
+        <input type="checkbox" id="dark-theme-checkbox">
 
+        <a href="index.html"><img src="assets/img/home.jpg"></a>
 
+    </nav>
 
     <nav class="left">
 
         <a href="#menu"><span>Menu</span></a>
 
     </nav>
 
     <a href="project.html" class="logo">Projects worked on</a>
 
-    <nav class="right">
 
-        <a href="index.html"><img src="assets/img/home.jpg"></a>
 
-    </nav>
 
 </header>
 
 
 <!-- Menu -->

+ 5 - 3
services.html
View File 

@@ -36,13 +36,15 @@
 
 
 <!-- Header -->
 
 <header id="header">
 
+    <nav class="right">
 
+        <label for="dark-theme-checkbox">Dark Mode</label>
 
+        <input type="checkbox" id="dark-theme-checkbox">
 
+        <a href="index.html"><img src="assets/img/home.jpg"></a>
 
+    </nav>
 
     <nav class="left">
 
         <a href="#menu"><span>Menu</span></a>
 
     </nav>
 
     <a href="services.html" class="logo">Services offered</a>
 
-    <nav class="right">
 
-        <a href="index.html"><img src="assets/img/home.jpg"></a>
 
-    </nav>
 
 </header>
 
 
 <!-- Menu -->

+ 5 - 3
subscribe.html
View File 

@@ -39,13 +39,15 @@
 
 
 <!-- Header -->
 
 <header id="header">
 
+    <nav class="right">
 
+        <label for="dark-theme-checkbox">Dark Mode</label>
 
+        <input type="checkbox" id="dark-theme-checkbox">
 
+        <a href="index.html"><img src="assets/img/home.jpg"></a>
 
+    </nav>
 
     <nav class="left">
 
         <a href="#menu"><span>Menu</span></a>
 
     </nav>
 
     <a href="subscribe.html" class="logo">Sponsor me</a>
 
-    <nav class="right">
 
-        <a href="index.html"><img src="assets/img/home.jpg"></a>
 
-    </nav>
 
 </header>
 
 
 <!-- Menu -->

+ 0 - 0
workExperience.html
View File


Some files were not shown because too many files changed in this diff