Dark mode theme added

iamrahulmahato · Nov 10, 2024 · 4705311 · 4705311
1 parent 1745e43
commit 4705311
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 1 deletion.
diff --git a/projects/guess_the_shape/index.html b/projects/guess_the_shape/index.html
@@ -5,8 +5,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Guess the Shape!</title>
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
 </head>
-<body>
+<body data-theme="light"> 
+                <button id="theme-toggle"> <i class="fas fa-sun"></i> </button> 
+                 <section id="content">  </section> 
+                 <script> const toggleButton = document.getElementById('theme-toggle'); 
+                 const body = document.body; 
+                 toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark'); 
+                 toggleButton.innerHTML = '<i class="fas fa-moon"></i>'; 
+                 } else { 
+                    body.setAttribute('data-theme', 'light'); 
+                    toggleButton.innerHTML = '<i class="fas fa-sun"></i>';
+                     } }); 
+                     </script>
+
     <div class="game-container">
         <h1>Guess the Shape!</h1>
         <div id="shape-display" class="shape"></div>

diff --git a/projects/guess_the_shape/styles.css b/projects/guess_the_shape/styles.css
@@ -57,3 +57,120 @@ body {
     font-weight: bold;
     color: #ff7f50;
 }
+:root { /* Light theme colors */ 
+    --background-color: linear-gradient(to right, #ffcccb, #ffebcd);
+    --text-color: #000000; 
+    --navbar-background: #f8f9fa; 
+    --navbar-text: #000000; 
+    --link-color: #1a73e8; 
+    --button-background: #008cba; 
+    --button-text: #ffffff; 
+} [data-theme="dark"] { /* Dark theme colors */ 
+    --background-color: #121212; 
+    --text-color: #ffffff;
+     --navbar-background: #333333; 
+     --navbar-text: #ffffff; 
+     --link-color: #bb86fc;
+      --button-background: #3d3d3d; 
+      --button-text: #ffffff;
+     }
+     [data-theme="dark"] #container {
+background-color: #222;
+border-radius: 8px;
+box-shadow: 0 4px 20px #f1f1f15c;
+padding: 20px;
+width: 80%;
+max-width: 800px;
+text-align: center;
+}
+[data-theme="dark"]   
+.story-builder-container {
+width: 90%;
+max-width: 700px;
+background: #222;
+padding: 20px;
+box-shadow: -1px 0px 11px 6px #3d3d3d;
+border-radius: 10px;
+}
+[data-theme="dark"]         
+input[type="text"] {
+width: 70%;
+padding: 10px;
+color: #ddd;
+border: 1px solid #ddd;
+border-radius: 5px;
+background-color: #333;
+}
+[data-theme="dark"] 
+th {
+background-color: #222;
+}
+
+
+     * {
+         padding: 0;
+          margin: 0; box-sizing: 
+          border-box; 
+        }
+         body {
+     font-family: "Poppins", sans-serif;
+         /* background-color: var(--background-color); */
+      color: var(--text-color); 
+     font-family: 'Roboto', sans-serif;
+     background:  var(--background-color); 
+     padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh; /* Full height */
+        }
+         #navbar ul { list-style: none;
+             padding: 0;
+             } #navbar ul li { 
+                display: inline;
+                 margin-right: 10px; 
+                } 
+                #navbar ul li a { 
+                    color: var(--navbar-text); 
+                    text-decoration: none; 
+                } 
+                button   {
+                     border: none;
+display: inline-flex;
+appearance: none;
+align-items: center;
+justify-content: center;
+border-radius: 9999px;
+padding: 8px;
+align-items: center;
+background-color: #f43f5e;
+color: #ffffff;
+cursor: pointer;
+}
+ #theme-toggle 
+ { position: fixed;
+     top: 10px; 
+     right: 10px;
+ }
+
+ #clue {
+    font-size: 1.2em;
+    margin-bottom: 20px;
+    color: black;
+}
+[data-theme="dark"] 
+.game-container {
+    text-align: center;
+    background: #222;
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 8px 16px #f1f1f1;
+    width: 90%;
+    max-width: 400px;
+}
+[data-theme="dark"] 
+#clue {
+    font-size: 1.2em;
+    margin-bottom: 20px;
+    color: #f1f1f1;
+}