From afb1f375a864bee9c301815948fac2d88aab42d2 Mon Sep 17 00:00:00 2001
From: Rainyy21 <simonzheng950@gmail.com>
Date: Tue, 9 Sep 2025 12:39:41 -0400
Subject: [PATCH] added color and darkmode button. need to finish the darkmode

---
 css/style.css                                 | 40 +++++++++++++++++++
 ...p_E3E3E3_FILL1_wght400_GRAD0_opsz40(1).svg |  1 +
 ...40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg |  1 +
 index.html                                    | 39 +++++++++++++++++-
 4 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 image/dark_mode_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40(1).svg
 create mode 100644 image/light_mode_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg

diff --git a/css/style.css b/css/style.css
index e69de29..e512c5f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,40 @@
+/* color for normal and darkmode */
+:root{
+    --primary-background-color: #ECEEDF;
+    --ground-footer-color: #CFAB8D;
+    --second-footer-color: #D9C4B0;
+    --secondary-background-color: #BBDCE5;
+
+}
+
+.dark{
+    --primary-background-color: #78B9B5;
+    --ground-footer-color: #320A6B;
+    --second-footer-color: #065084;
+    --secondary-background-color: #0F828C;
+}
+
+/* the darkmode button */
+#theme_switch{
+    padding: 0;
+    background: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-style: none;
+    cursor: pointer;
+}
+#theme_switch svg{
+    width: 3.5rem;
+    height: auto;
+    fill:var(--secondary-background-color);
+    
+}
+
+#theme_switch svg:last-child{
+    display: none;
+}
+
+.dark #theme_switch svg:first-child{
+    display: none;
+}
\ No newline at end of file
diff --git a/image/dark_mode_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40(1).svg b/image/dark_mode_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40(1).svg
new file mode 100644
index 0000000..81a7703
--- /dev/null
+++ b/image/dark_mode_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40(1).svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q10 0 20.5.67 10.5.66 24.17 2-37.67 31-59.17 77.83T444-660q0 90 63 153t153 63q53 0 99.67-20.5 46.66-20.5 77.66-56.17 1.34 12.34 2 21.84.67 9.5.67 18.83 0 150-105 255T480-120Z"/></svg>
\ No newline at end of file
diff --git a/image/light_mode_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg b/image/light_mode_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg
new file mode 100644
index 0000000..070b2aa
--- /dev/null
+++ b/image/light_mode_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-446.67H40v-66.66h160v66.66Zm720 0H760v-66.66h160v66.66ZM446.67-760v-160h66.66v160h-66.66Zm0 720v-160h66.66v160h-66.66ZM260-655.33l-100.33-97 47.66-49 96 100-43.33 46Zm493.33 496-97.66-100.34 45-45.66 99.66 97.66-47 48.34Zm-98.66-541.34 97.66-99.66 49 47L702-656l-47.33-44.67ZM159.33-207.33 259-305l46.33 45.67-97.66 99.66-48.34-47.66Z"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 13db1a6..cb05175 100644
--- a/index.html
+++ b/index.html
@@ -7,12 +7,47 @@
     <title>Rain website</title>
     <!-- add a image -->
 
+    <!-- css and js -->
+    <link rel="stylesheet" href="./css/style.css">
+    <link rel="mainJS" href="./js/main.js">
+
 </head>
 
 <!-- the main body to edit -->
 <body>
-    
-    
+    <div class = "bg_color">
+        <!-- have a header -->
+        <div class = "header">
+            <!-- topright would be the dark mode -->
+            <div class = "darkmode">
+                <button id = "theme_switch">
+                    <!-- add the mood and sun icon here -->
+                    <svg xmlns="http://www.w3.org/2000/svg" class = "darkmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q10 0 20.5.67 10.5.66 24.17 2-37.67 31-59.17 77.83T444-660q0 90 63 153t153 63q53 0 99.67-20.5 46.66-20.5 77.66-56.17 1.34 12.34 2 21.84.67 9.5.67 18.83 0 150-105 255T480-120Z"/></svg> 
+                    <svg xmlns="http://www.w3.org/2000/svg" class = "lightmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-446.67H40v-66.66h160v66.66Zm720 0H760v-66.66h160v66.66ZM446.67-760v-160h66.66v160h-66.66Zm0 720v-160h66.66v160h-66.66ZM260-655.33l-100.33-97 47.66-49 96 100-43.33 46Zm493.33 496-97.66-100.34 45-45.66 99.66 97.66-47 48.34Zm-98.66-541.34 97.66-99.66 49 47L702-656l-47.33-44.67ZM159.33-207.33 259-305l46.33 45.67-97.66 99.66-48.34-47.66Z"/></svg>
+                </button>
+            </div>
+
+        </div>
+
+        <!-- my info from who i am and my social linke -->
+        <div class = "content">
+            <!-- this might be where the whole stuff should be in -->
+            <div class = "temp-mid-box">
+                <div class = "title_name">
+
+                </div>
+                <!-- social box might need to move it -->
+                <div class = "social">
+                    
+                </div>
+            </div>
+        </div>
+        
+        <!-- footer for design look -->
+        <footer>
+            <!-- i could have a wavery floor background for art -->
+        </footer>
+    </div>
 </body>