[MAJOR] theme shift bug fix

Author: codeIntrovert

app.py

@@ -7,11 +7,6 @@
 
 app = Flask(__name__)
 
-def get_theme_css():
-    # Implement logic to retrieve the user's theme preference and return the corresponding CSS path
-    theme_preference = "light"  # Replace with your actual logic
-    return f"static/{theme_preference}_theme.css"
-    
 # Register the Blueprints from separate files
 app.register_blueprint(index_blueprint)
 app.register_blueprint(browse_blueprint)

routes/browse_routes.py

@@ -32,27 +32,31 @@
 
 @browse_blueprint.route('/browse/<course_name>', endpoint='browse_details')
 def details(course_name):
+    theme_preference = request.cookies.get('theme', 'light')  # Default to 'light' if cookie not found
+    theme_css = theme_preference + "_theme"  # Assuming your CSS files are named "light_theme.css" and "dark_theme.css"
 
     # Check if the given course_name exists in the mapping, if not, return an error or redirect
     if course_name not in course_mapping:
-        return render_template('components/error.html')
+        return render_template('components/error.html', theme_css=theme_css )
 
     # Get the corresponding course data from the course_mapping
     course = course_mapping[course_name]
     lectures_data = lecturesData.get(course_name, [])  # Get lectures data for the course
 
     trending = menuData.trending
-    return render_template('details.html', course=course, lectures_data=lectures_data, trending=trending)
+    return render_template('details.html', course=course, lectures_data=lectures_data, trending=trending, theme_css=theme_css)
 
 ####################### details end #######################
+
+
 ################### General /browse page ###################
 @browse_blueprint.route('/browse', endpoint='browse_home', methods=['GET', 'POST']) # used when no course_name is provided
 def browse():
     trending = menuData.trending
     allCourses = menuData.all
     theme_preference = request.cookies.get('theme', 'light')  # Default to 'light' if cookie not found
-    theme_css = f"static/assets/sass/{theme_preference}_theme.css"
-
+    theme_css = theme_preference + "_theme"  # Assuming your CSS files are named "light_theme.css" and "dark_theme.css"
+    
     # If the form is submitted (POST request), get the search keyword from the form
     if request.method == 'POST':
         search_keyword = request.form.get('searchKeyword')

routes/error_routes.py

@@ -6,5 +6,6 @@
 @error_blueprint.errorhandler(404)
 def page_not_found(e):
     theme_preference = request.cookies.get('theme', 'light')  # Default to 'light' if cookie not found
-    theme_css = f"static/assets/sass/{theme_preference}_theme.css"
+    theme_css = theme_preference + "_theme"  # Assuming your CSS files are named "light_theme.css" and "dark_theme.css
+    
     return render_template('components/error.html', theme_css=theme_css), 404

routes/index_routes.py

@@ -8,5 +8,6 @@
 def index():
     trending = menuData.trending
     theme_preference = request.cookies.get('theme', 'light')  # Default to 'light' if cookie not found
-    theme_css = f"static/assets/sass/{theme_preference}_theme.css"
+    theme_css = theme_preference + "_theme"  # Assuming your CSS files are named "light_theme.css" and "dark_theme.css
+    
     return render_template('index.html', trending=trending, theme_css=theme_css)

routes/login_routes.py

@@ -6,5 +6,6 @@
 @login_blueprint.route('/login')
 def login():
     theme_preference = request.cookies.get('theme', 'light')  # Default to 'light' if cookie not found
-    theme_css = f"static/assets/sass/{theme_preference}_theme.css"
+    theme_css = theme_preference + "_theme"  # Assuming your CSS files are named "light_theme.css" and "dark_theme.css
+    
     return render_template('login.html', theme_css=theme_css)

static/assets/js/theme.js

@@ -3,10 +3,14 @@ function setCookie(name, value) {
 }
 
 function toggleTheme() {
+    
     const currentTheme = document.querySelector("link[href*='theme']").getAttribute("href");
     const newTheme = currentTheme.includes("light") ? "dark" : "light";
-    document.querySelector("link[href*='theme']").setAttribute("href", `/static/assets/sass/${newTheme}_theme.css`);
 
-    // Set the theme preference as a cookie
+    // Set the theme preference as a cookie before changing the theme
     setCookie("theme", newTheme);
+
+    // Change the theme by updating the CSS link
+    const themeLink = document.querySelector("link[href*='theme']");
+    themeLink.setAttribute("href", `/static/assets/sass/${newTheme}_theme.css`);
 }

static/assets/sass/light_theme.css

@@ -27,7 +27,7 @@ figcaption {
 }
 
 .cardborder:hover {
-  border: 5px #D7EEFF solid;
+  border: 5px #a5d8ff solid;
 }
 
 clearfix:after {
@@ -110,7 +110,7 @@ img {
 
 html,
 body {
-  background: #D7EEFF;
+  background: #a5d8ff;
   font-family: "Poppins", sans-serif;
 }
 
@@ -225,7 +225,7 @@ section {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: #D7EEFF;
+  background-color: #a5d8ff;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -679,7 +679,7 @@ section {
   }
 }
 .main-banner {
-  background: linear-gradient(310deg, rgb(83, 141, 255) 0%, rgb(215, 238, 255) 100%);
+  background: linear-gradient(310deg, rgb(83, 141, 255) 0%, #b2dcfc 100%);
   background-position: center center;
   background-size: cover;
   min-height: 380px;
@@ -708,7 +708,7 @@ section {
 .most-popular {
   margin-top: 60px;
   padding: 30px;
-  background-color: #D7EEFF;
+  background-color: #a5d8ff;
   border-radius: 23px;
 }
 
@@ -771,7 +771,7 @@ section {
 .gaming-library {
   margin-top: 60px;
   padding: 30px;
-  background-color: #D7EEFF;
+  background-color: #a5d8ff;
   border-radius: 23px;
 }
 
@@ -829,7 +829,7 @@ section {
 }
 
 footer {
-  background-color: #D7EEFF;
+  background-color: #a5d8ff;
   bottom: 0;
   width: 100%;
 }
@@ -867,7 +867,7 @@ footer p a:hover {
 .game-details .content {
   border-radius: 23px;
   padding: 30px;
-  background-color: #D7EEFF;
+  background-color: #a5d8ff;
 }
 
 .game-details .content .left-info {