dark mode switch added

kognise · Oct 2, 2023 · abe07fc · abe07fc
1 parent d950cbc
commit abe07fc
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 4 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -71,9 +71,22 @@
         { element: '#icon-32', href: { dark: './icons/light-favicon-32x32.png' } }
       ])
     </script>
+                      <script>
+                        function myFunction() {
+                           var element = document.body;
+                           element.classList.toggle("dark-mode");
+                        }
+                        </script>
   </head>
 
   <body>
+    <ul>
+      <li><a href="#home">Water CSS</a></li>
+      <li style="float:right"><label class="switch">
+                    <input type="checkbox" onclick="myFunction()"checked>
+                    <span class="slider round"></span>
+                  </label></a></li>
+    </ul>
     <h1>Water.css</h1>
 
     <p>
@@ -163,14 +176,14 @@ <h3>Version info</h3>
     </div>
 
     <h2 id="goals">Goals</h2>
-    <ul>
+    <ul1>
       <li>Responsive</li>
       <li>Good code quality</li>
       <li>Good browser support</li>
       <li>Small size (&lt; 2kb)</li>
       <li>Beautiful</li>
       <li>No classes</li>
-    </ul>
+    </ul1>
 
     <h2 id="responsive">Is it responsive?</h2>
     <p>
@@ -328,11 +341,11 @@ <h3 id="typography">Typography</h3>
       </footer>
     </blockquote>
 
-    <ul>
+    <ul1>
       <li>Unordered list item 1</li>
       <li>Unordered list item 2</li>
       <li>Unordered list item 3</li>
-    </ul>
+    </ul1>
     <ol>
       <li>Ordered list item 1</li>
       <li>Ordered list item 2</li>

diff --git a/docs/style.css b/docs/style.css
@@ -63,3 +63,98 @@ body > footer {
   align-items: center;
   justify-content: space-between;
 }
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #bf24e1;
+}
+
+li {
+  float: left;
+}
+
+li a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+li a:hover:not(.active) {
+  background-color: #633aea;
+}
+
+.active {
+  background-color: #04AA6D;
+}
+                    .switch {
+                      position: relative;
+                      display: inline-block;
+                      width: 55px;
+                      height: 28px;
+                      margin-left: 30px;
+                      margin-top:10px;
+                    }
+
+                    .switch input { 
+                      opacity: 0;
+                      width: 0;
+                      height: 0;
+                    }
+
+                    .slider {
+                      position: absolute;
+                      cursor: pointer;
+                      top: 0;
+                      left: 0;
+                      right: 0;
+                      bottom: 0;
+                      background-color: #ccc;
+                      -webkit-transition: .4s;
+                      transition: .4s;
+                    }
+
+                    .slider:before {
+                      position: absolute;
+                      content: "";
+                      height: 20px;
+                      width: 20px;
+                      left: 4px;
+                      bottom: 4px;
+                      background-color: white;
+                      -webkit-transition: .4s;
+                      transition: .4s;
+                    }
+
+                    input:checked + .slider {
+                      background-color: #2196F3;
+                    }
+
+                    input:focus + .slider {
+                      box-shadow: 0 0 1px #2196F3;
+                    }
+
+                    input:checked + .slider:before {
+                      -webkit-transform: translateX(26px);
+                      -ms-transform: translateX(26px);
+                      transform: translateX(26px);
+                    }
+
+                    /* Rounded sliders */
+                    .slider.round {
+                      border-radius: 34px;
+                    }
+
+                    .slider.round:before {
+                      border-radius: 50%;
+                    }
+                    .dark-mode {
+                      background-color: black;
+                      color: white;
+                    }
+
+