From ddcede0143911dbd9cdb2f405831de7c4dcdda1f Mon Sep 17 00:00:00 2001
From: lifeadventurer <life0adventurer@gmail.com>
Date: Sat, 23 Dec 2023 15:47:25 +0800
Subject: [PATCH] feat: add colors to :root

---
 fortune_generator/index.html |  8 ++++----
 fortune_generator/styles.css | 22 +++++++++++++++++++---
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/fortune_generator/index.html b/fortune_generator/index.html
index cbb474e..3c84eaa 100644
--- a/fortune_generator/index.html
+++ b/fortune_generator/index.html
@@ -56,7 +56,7 @@
         <p id="ip-to-fortune"></p>
       </div>
       <div class="row">
-        <div class="col">
+        <div class="col left-result">
           <div class="row">
             <p id="l-1-event"></p>
           </div>
@@ -64,7 +64,7 @@
             <p id="l-1-desc"></p>
           </div>
         </div>
-        <div class="col">
+        <div class="col right-result">
           <div class="row">
             <p id="r-1-event"></p>
           </div>
@@ -74,7 +74,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col">
+        <div class="col left-result">
           <div class="row">
             <p id="l-2-event"></p>
           </div>
@@ -82,7 +82,7 @@
             <p id="l-2-desc"></p>
           </div>
         </div>
-        <div class="col">
+        <div class="col right-result">
           <div class="row">
             <p id="r-2-event"></p>
           </div>
diff --git a/fortune_generator/styles.css b/fortune_generator/styles.css
index 64d9e6f..8928632 100644
--- a/fortune_generator/styles.css
+++ b/fortune_generator/styles.css
@@ -2,12 +2,28 @@
   --button-color: #73a3eb;
   --button-hover-color: #459aef;
   --bg-color: #FFFFFF;
+  --good-fortune-color: #e74c3c;
+  --bad-fortune-color: #000000bf;
+  --middle-fortune-color: #5eb95e;
+  --desc-color: #7f7f7f;
+  --date-color: #096e1bC9;
+  --special-event-color: #3e4fbb;
+  --days-to-special-event-color: #485ccd;
+  
 }
 
 .dark-mode {
   --button-color: #5d99f4;
   --button-hover-color: #9ac6f1;
   --bg-color: #1e1d24;
+  --good-fortune-color: #e74c3c;
+  --bad-fortune-color: #dc3939d9;
+  --middle-fortune-color: #5eb95e;
+  --desc-color: #7f7f7f;
+  --date-color: #096e1bC9;
+  --special-event-color: #3e4fbb;
+  --days-to-special-event-color: #485ccd;
+  --dark-mode-icon-color: #ffffff;
 }
 
 
@@ -40,11 +56,11 @@ body {
 }
 
 .left-result {
-  color: #e74c3c !important;
+  color: var(--good-fortune-color) !important;
 }
 
 .right-result {
-  color: #000000bf !important;
+  color: var(--bad-fortune-color) !important;
 }
 
 button {
@@ -70,7 +86,7 @@ button:hover {
 #dark-mode-icon {
   margin-top: 15px;
   font-size: 2.4rem;
-  color: var(--white-color);
+  color: var(--dark-mode-icon-color);
   cursor: pointer;
   opacity: 85%;
 }
\ No newline at end of file