Dark mode

package.json

@@ -25,5 +25,8 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "prettier": "^3.2.5"
+  },
+  "dependencies": {
+    "thecourseforum": "file:"
   }
 }

tcf_core/context_processors.py

@@ -46,9 +46,16 @@ def history_cookies(request):
 def searchbar_context(request):
     """Provide context for the search bar."""
     latest_semester = Semester.latest()
-    recent_semesters = Semester.objects.filter(
-        number__gte=latest_semester.number - 50  # 50 = 5 years * 10 semesters
-    ).order_by("-number")
+    # recent_semesters = Semester.objects.filter(
+    #     number__gte=latest_semester.number - 50  # 50 = 5 years * 10 semesters
+    # ).order_by("-number")
+
+    if latest_semester:
+        recent_semesters = Semester.objects.filter(
+            number__gte=latest_semester.number - 50  # 50 = 5 years * 10 semesters
+        ).order_by("-number")
+    else:
+        recent_semesters = Semester.objects.none()
 
     # Get saved filters from the session (or use defaults)
     saved_filters = request.session.get("search_filters", {})

tcf_website/static/about/about.css

@@ -55,3 +55,15 @@
   overflow: hidden;
   opacity: 0.8;
 }
+
+.jumbotron {
+  background-color: var(--input-background-color) !important;
+}
+
+.text-muted {
+  color: var(--basic-text-color) !important;
+}
+
+.card-text {
+  color: var(--basic-text-color) !important;
+}

tcf_website/static/base/navbar.css

@@ -1,7 +1,7 @@
 /*
     Any css that involves the navbar should go in this file!
-    This way things are kept insolated and de-coupled from one
-    another, making components more maliable and maintainable.
+    This way things are kept isolated and de-coupled from one
+    another, making components more malleable and maintainable.
 */
 
 .navbar {
@@ -25,14 +25,8 @@
   transition-timing-function: ease;
 }
 
-.logo-container:hover {
-  transform: scale(1.05);
-}
-
-.logo-container:active {
-  transform: scale(1.05);
-}
-
+.logo-container:hover,
+.logo-container:active,
 .logo-container:focus {
   transform: scale(1.05);
 }
@@ -41,7 +35,6 @@
   .logo-container {
     width: calc(var(--sidebar-width) - 16px);
     height: auto;
-
     /* Animation */
     padding-left: 0.55rem; /* centers logo in logo-container */
     padding-right: 0rem;
@@ -85,6 +78,32 @@
   background-color: rgb(190, 190, 190);
 }
 
+.dark-mode .navbar {
+  flex-wrap: nowrap;
+  background-color: var(--card-background-color);
+  color: var(--basic-text-color);
+}
+.navbar {
+  background-color: white;
+}
+
+.dark-mode .navbar-toggler.menu {
+  border-color: var(--input-border-color);
+  background-color: var(--button-bg-color);
+}
+
+.dark-mode .navbar-toggler.menu:hover {
+  background-color: #2a2a2a;
+}
+
+.dark-mode .navbar-toggler.menu:active {
+  background-color: #333333;
+}
+
+.dark-mode .navbar-toggler.menu:focus {
+  background-color: #2a2a2a;
+}
+
 @media (max-width: 768px) {
   .account-settings {
     display: none;
@@ -95,4 +114,4 @@
   .dropdown-menu.settings {
     min-width: 140px !important;
   }
-}
+}

tcf_website/static/base/sidebar.css

@@ -84,3 +84,8 @@ body {
 .modal {
   z-index: 10000;
 }
+
+/* styles the right border of sidebar */
+.border-right { 
+  border-right: 1px solid var(--input-border-color) !important;
+}

tcf_website/static/base/tcf-style.css

@@ -11,9 +11,45 @@
   --shadow-color: #a6a6a6; /* Medium grey, used for shadows */
   --shaded-color: #cfcfcf; /* Medium light grey, used for shading */
   --background-color: #ebebeb; /* Light grey, used for backgrounds */
+  --landing-page-background-color: #F8F9FA;
+  --card-background-color: #ffffff; 
+  --navbar-color: #ffffff;
+  /* newly added */
+  --basic-text-color: #212529;
+  --accent-text-white: #ffffff; /* White text color */
+  /* changes the border color of the search bar on landing page */
+  --input-border-color: #DEE2E6;
+  /* changes the color of the title and icons on the landing page */
+  --title-color: #274f97;
+  --filter-input-background-color: white;
+  --icon-color-white: #ffffff; /* White icon color */
+  --input-background-color: #EBEBEB;
+  --landing-page-input-background-color: white;
+  --filter-background-color: white;
+
+  /* #f8f9fa is the og background color styled by .bg-light in _background_variant.scss */
   /* Note: Can use Bootstrap "light" color and white color */
 }
 
+/* only main-color (tcf blue) and accent-color (tcf organge) are being utilized by the landing page */
+body.dark-mode {
+
+/* Added updated variables names */
+  --background-color: black; /* Dark background color */
+  --card-background-color: #333333;  /* Dark card background */
+  --input-background-color: #545454;  /* Dark input background */
+  --filter-input-background-color: #545454;  /* Dark input background */
+  --input-text-color: #a6a6a6;   /* Light text in inputs */
+  --accent-text-color: #d75626; /* Accent color for dark mode */
+  --basic-text-color: white;    /* White text color */
+  --icon-color: white; /* Light icon color */
+  --input-border-color: #5a5c5d; /* Lighter border color for inputs */
+  --button-bg-color: #1e1e1e; /* Darker button background */
+  --landing-page-background-color: black; /* replace tcf-blue as tcf logo text color */
+  --title-color: white; /* make title and icons on landing page white */
+  --filter-background-color: #333333;
+}
+
 /*************DEFAULT STYLES**************/
 h1,
 h2,
@@ -29,6 +65,36 @@ h6,
 .h6 {
   /* Default heading font: Lato (others are fallbacks) */
   font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  /* Chai: initially didn't have a color element, this color element overrides color in _reboot.cscc */
+  /* color: var(--h4-card-title-color);  */
+}
+
+h1, .h1 {
+  color: var(--basic-text-color);
+}
+
+h2, .h2 {
+  color: var(--basic-text-color);
+}
+
+h4, .h4 {
+  color: var(--basic-text-color);
+}
+
+h3, .h3 {
+  color: var(--basic-text-color);
+}
+
+h5, .h5 {
+  color: var(--basic-text-color);
+}
+
+h6, .h6 {
+  color: var(--basic-text-color);
+}
+
+label {
+  color: var(--basic-text-color);
 }
 
 body {
@@ -68,13 +134,16 @@ ul {
 
 /* Main color: Indigo/Dark blue */
 .text-tcf-indigo {
-  color: var(--main-color);
+  color: var(--title-color);
 }
+
 .bg-tcf-indigo {
-  background-color: var(--main-color);
+  /* background-color: var(--main-color); */
+  /* Chai: this banner color should be tcf blue no matter if theme is light or dark */
+  background-color: #274f97;
 }
 .border-tcf-indigo {
-  border-color: var(--main-color);
+  border-color: var(--title-color);
 }
 
 /* Secondary color: Light blue */
@@ -89,6 +158,7 @@ ul {
 .text-tcf-orange {
   color: var(--accent-color);
 }
+/* colors specifically the 'Meet the full team' button */
 .bg-tcf-orange {
   background-color: var(--accent-color);
 }
@@ -124,8 +194,114 @@ ul {
   border-color: var(--background-color);
 }
 
-/* Note: Can use Bootstrap "light" color
-  .text-light
-  .bg-light
-  .border-light
-*/
+/* OVERRIDES scss stylings */
+/* Chai: background color on landing page is being styled by .bg-light in _background-variant.scss, has to have !important to override the !important in the scss */
+.bg-light {
+  background-color: var(--landing-page-background-color) !important;
+}
+
+/* Chai: card background color is being styled by .card in _card.scss; color will be card-background-color when in dark-mode */
+.card {
+  background-color: var(--card-background-color) !important;
+  /* border: 1px solid var(--input-border-color); */
+}
+.card.bg-tcf-orange {
+  background-color: var(--accent-color) !important;
+}
+
+
+p {
+  color: var(--basic-text-color);
+}
+
+.form-control {
+  background-color: var(--input-background-color);
+  color: var(--input-text-color);
+  border: 1px solid var(--input-border-color);
+}
+
+.form-control:focus {
+  background-color: var(--input-background-color);
+  color: var(--basic-text-color);
+}
+
+.form-control::placeholder {
+  color: var(--input-text-color);
+}
+
+/* overrides the input:-internal-autofill-selected setting from User Agent Stylesheet */
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0px 1000px var(--input-background-color) inset !important;
+  -webkit-text-fill-color: white !important;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+.forcontrol:disabled {
+  background-color: var(--background-color);
+}
+
+/* originally in borders.scss */
+.border {
+  border: 0.5px solid var(--input-border-color) !important;
+}
+
+.modal-body {
+  background-color: var(--background-color);
+}
+
+.modal-header {
+  background-color: var(--background-color);
+  border-bottom: 1px solid var(--input-border-color);
+}
+
+.modal-footer {
+  background-color: var(--background-color);
+  border-top: 1px solid var(--input-border-color);
+}
+
+.dropdown-menu {
+  background-color: var(--filter-background-color);
+}
+
+.dropdown-item {
+  color: var(--basic-text-color);
+}
+
+.dropdown-divider {
+  border-top: 1px solid var(--input-border-color);
+}
+
+/* styles the input range bar on the write review page */
+input[type="range"] {
+  width: 100%;
+  height: 6px;
+  background: transparent;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  height: 6px;
+  background: var(--input-background-color); /* Track color */
+  border-radius: 3px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 16px;
+  width: 16px;
+  background: var(--accent-color);
+  border-radius: 50%;
+  margin-top: -5px; /* aligns thumb with the track */
+  cursor: pointer;
+}
+
+#darkModeToggle {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: var(--icon-color, #212529); /* Customizable */
+}
+
+#sunIcon {
+  vertical-align: middle;
+}