Feature/Adding DarkMode option to project

app/routers/audio.py

@@ -37,11 +37,9 @@ def audio_settings(
     user: User = Depends(current_user),
 ) -> templates.TemplateResponse:
     """A route to the audio settings.
-
     Args:
         request (Request): the http request
         session (Session): the database.
-
     Returns:
         templates.TemplateResponse: renders the audio.html page
         with the relevant information.
@@ -75,7 +73,6 @@ async def get_choices(
     user: User = Depends(current_user),
 ) -> RedirectResponse:
     """This function saves users' choices in the db.
-
     Args:
         request (Request): the http request
         session (Session): the database.
@@ -92,7 +89,6 @@ async def get_choices(
         sfx_vol (Optional[int], optional): a number in the range (0, 1)
         indicating the desired sfx volume, or None if disabled.
         user (User): current user.
-
     Returns:
         RedirectResponse: redirect the user to home.html.
     """
@@ -113,10 +109,8 @@ async def start_audio(
     user: User = Depends(current_user),
 ) -> RedirectResponse:
     """Starts audio according to audio settings.
-
     Args:
         session (Session): the database.
-
     Returns:
         RedirectResponse: redirect the user to home.html.
     """

app/static/credits_style.css

@@ -1,6 +1,7 @@
 body {
 	margin-left: 6.25em;
 	margin-right: 6.25em;
+	background-color: var(--backgroundcol);
 }
 
 div.gallery {

app/static/global.css

@@ -49,14 +49,14 @@ body {
 }
 
 body {
-    background-color: #F7F7F7;
-    color: #222831;
-    font-family: "Assistant", "Ariel", sans-serif;
-    font-weight: 400;
-    line-height: 1.7;
-    text-rendering: optimizeLegibility;
-    scroll-behavior: smooth;
-    width: 100%;
+  background-color: var(--backgroundcol);
+  color: var(--textcolor);
+  font-family: "Assistant", "Ariel", sans-serif;
+  font-weight: 400;
+  line-height: 1.7;
+  text-rendering: optimizeLegibility;
+  scroll-behavior: smooth;
+  width: 100%;
 }
 
 a {

app/static/grid_style.css

@@ -1,3 +1,22 @@
+:root[data-color-mode="regular"] {
+  --backgroundcol: #F7F7F7;
+  --textcolor: #222831;
+  --start-of-month: #E9ECEf;
+  --primary-variant: #FFDE4D;
+  --secondary: #EF5454;
+  --borders: #E7E7E7;
+  --borders-variant: #F7F7F7;
+}
+
+:root[data-color-mode="dark"] {
+  --backgroundcol: #000000;
+  --textcolor: #EEEEEE;
+  --start-of-month: #8C28BF;
+  --secondary: #EF5454;
+  --borders: #E7E7E7;
+  --borders-variant: #F7F7F7;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -24,7 +43,7 @@ nav {
   position: sticky;
   display: flex;
   flex-direction: column;
-  top:var(--space_s);
+  top: var(--space_s);
 }
 
 .fixed-features,
@@ -37,6 +56,7 @@ nav {
   flex: 1;
   display: flex;
   flex-direction: column;
+  background: var(--backgroundcol);
 }
 
 .user-features {
@@ -84,10 +104,12 @@ nav {
 }
 
 .settings-open {
-    width: 20rem;
+  width: 20rem;
 }
 
-img {fill: var(--background);}
+img {
+  fill: var(--background);
+}
 
 header {
   z-index: 5;
@@ -96,7 +118,8 @@ header {
   display: flex;
   grid-flow: row wrap;
   margin: 0 var(--space_s);
-  background-color: var(--background);
+  margin: 0 1rem 0 1rem;
+  background-color: var(--backgroundcol);
 }
 
 header div {
@@ -135,7 +158,8 @@ main {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   margin: var(--space_s) var(--space_s) 0 var(--space_s);
-  background-color: var(--background);
+  margin: 1rem 1rem 0 1rem;
+  background-color: var(--backgroundcol);
   align-self: stretch;
 }
 
@@ -192,9 +216,13 @@ main {
   font-weight: 400;
 }
 
-.day:hover {border: 0.1rem solid var(--primary);}
+.day:hover {
+  border: 0.1rem solid var(--primary);
+}
 
-.day:hover .day-number{color: var(--negative);}
+.day:hover .day-number {
+  color: var(--negative);
+}
 
 .day:hover .add-small {
   display: block;
@@ -288,7 +316,7 @@ main {
   height: 1.5rem;
 }
 
-.month-event div{
+.month-event div {
   height: 1.5rem;
   width: 100%;
   transition: all 0.3s ease;
@@ -334,31 +362,59 @@ main {
 }
 
 /* Text Colors */
-.text-yellow {color: var(--secondary);}
+.text-yellow {
+  color: var(--secondary);
+}
 
-.text-gray {color: var(--on-surface);}
+.text-gray {
+  color: var(--on-surface);
+}
 
-.text-lightgray {color: var(--background);}
+.text-lightgray {
+  color: var(--background);
+}
 
-.text-darkblue {color: var(--primary);}
+.text-darkblue {
+  color: var(--primary);
+}
 
 /* Borders */
-.border-dash-darkblue {border: 0.125rem dashed  var(--primary);}
+.border-dash-darkblue {
+  border: 0.125rem dashed var(--primary);
+}
 
-.border-darkblue {border: 0.125rem solid  var(--primary);}
+.border-darkblue {
+  border: 0.125rem solid var(--primary);
+}
 
-.underline-yellow {border-bottom: 0.25rem solid  var(--secondary);}
+.underline-yellow {
+  border-bottom: 0.25rem solid var(--secondary);
+}
 
 /* Background Color */
-.background-darkblue {background-color: var(--primary-variant);}
+.background-darkblue {
+  background-color: var(--primary-variant);
+}
 
-.background-red {background-color: var(--negative);}
+.background-red {
+  background-color: var(--negative);
+}
+
+.background-yellow {
+  background-color: var(--secondary);
+}
 
-.background-lightgray {background-color: var(--surface);}
+.background-green {
+  background-color: var(--positive);
+}
 
-.background-yellow {background-color: var(--secondary);}
+.background-lightgray {
+  background-color: var(--start-of-month);
+}
 
-.background-green {background-color: var(--positive);}
+.background-green {
+  background-color: var(--bold_tertiary);
+}
 
 /* Buttons */
 
@@ -376,4 +432,8 @@ main {
 .dates-calc {
     background-color: #222831;
     color: white;
-}
+}
+
+#darkmode {
+  cursor: pointer;
+}

app/static/js/darkmode.js

@@ -0,0 +1,29 @@
+const ROOT = document.documentElement;
+
+window.addEventListener("DOMContentLoaded", (event) => {
+  const button = document.getElementById("darkmode");
+  let isDarkMode = localStorage.getItem("isDarkMode") == "true";
+  setThemeMode(isDarkMode, button, ROOT);
+  button.addEventListener("click", (event) => {
+    isDarkMode = !isDarkMode;
+    localStorage.setItem("isDarkMode", isDarkMode);
+    setThemeMode(isDarkMode, button, ROOT);
+  });
+});
+
+function changeIcon(mode) {
+  const modeButton = document.getElementById("darkmode");
+  modeButton.name = mode;
+}
+
+function setThemeMode(isDarkMode, button, root) {
+  if (isDarkMode) {
+    root.dataset['colorMode'] = "dark";
+    button.name = "moon";
+    changeIcon("moon");
+  } else {
+    root.dataset['colorMode'] = "regular";
+    button.name = "moon-outline";
+    changeIcon("moon-outline");
+  }
+}

app/static/style.css

@@ -1,3 +1,19 @@
+:root[data-color-mode="regular"] {
+  --backgroundcol: #F7F7F7;
+  --textcolor: #222831;
+  --navcolor: rgba(0, 0, 0, 0.55);
+  --navhovercolor: rgba(0, 0, 0, 0.7);
+  --cardcolor: #FFF;
+}
+
+:root[data-color-mode="dark"] {
+  --backgroundcol: #000000;
+  --textcolor: #EEEEEE;
+  --navcolor: #E9ECEF;
+  --navhovercolor: rgb(255 255 255);
+  --cardcolor: #230A88;
+}
+
 .profile-image {
   width: 7em;
 }
@@ -88,7 +104,12 @@ p {
   margin: 0;
 }
 
+.card {
+  background-color: var(--cardcolor);
+}
+
 .card-body {
+  color: var(--textcolor);
   overflow: auto;
 }
 
@@ -146,6 +167,31 @@ p {
   margin-top: 1em;
 }
 
+.relative.overflow-hidden {
+  background-color: var(--backgroundcol);
+  height: 100vh;
+}
+
+.navbar-light .navbar-nav .nav-link {
+  color: var(--navcolor);
+}
+
+.navbar-light .navbar-nav .nav-link:hover {
+  color: var(--navhovercolor);
+}
+
+.main-text-color {
+  color: var(--textcolor);
+}
+
+.cal-img {
+  text-align: center;
+}
+
+#darkmode {
+  cursor: pointer;
+}
+
 .upload-file {
   margin: auto 1em auto 0em;
 }

app/templates/agenda.html

@@ -56,7 +56,7 @@
     </div>
   </div>
 
-  <div class="pt-4 px-5">
+  <div class="pt-4 px-5 main-text-color">
     {% if start_date > end_date %}
       <p>{{ gettext("Start date is greater than end date") }}</p>
     {% elif events | length == 0 %}

app/templates/base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-color-mode="regular">
 
 <head>
     {% block head %}
@@ -75,6 +75,11 @@
                               <ion-icon name="notifications-outline"></ion-icon>
                           </a>
                         </li>
+                        <li class="nav-item">
+                            <a class="nav-link">
+                                <ion-icon id="darkmode" name="moon-outline"></ion-icon>
+                            </a>
+                        </li>
                     </ul>
                 </div>
             </nav>
@@ -92,6 +97,7 @@
     <script src="{{ url_for('static', path='/horoscope.js') }}"></script>
     <script src="{{ url_for('static', path='/graph.js') }}"></script>
     <script type="text/javascript" src="{{ url_for( 'static', path='/audio_settings.js' ) }}"></script>
+    <script src="{{ url_for('static', path='/js/darkmode.js') }}"></script>
     <script src="{{ url_for('static', path='/joke.js') }}"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
     <audio id="my-audio" muted="true"></audio>