Folder Diff Store

routes.py (+18, -1)

From: curriculum/section14/lectures/05_toggle_dark_mode_css_variables/start/movie_library/routes.py

To: curriculum/section14/lectures/05_toggle_dark_mode_css_variables/end/movie_library/routes.py

            
            index b921167..3d58ec5 100644
--- a/curriculum/section14/lectures/05_toggle_dark_mode_css_variables/start/movie_library/routes.py
+++ b/curriculum/section14/lectures/05_toggle_dark_mode_css_variables/end/movie_library/routes.py
@@ -1,4 +1,10 @@
-from flask import Blueprint, render_template
+from flask import (
+    Blueprint,
+    redirect,
+    render_template,
+    session,
+    request,
+)
 
 
 pages = Blueprint(
@@ -12,3 +18,14 @@ def index():
         "index.html",
         title="Movies Watchlist",
     )
+
+
+@pages.get("/toggle-theme")
+def toggle_theme():
+    current_theme = session.get("theme")
+    if current_theme == "dark":
+        session["theme"] = "light"
+    else:
+        session["theme"] = "dark"
+
+    return redirect(request.args.get("current_page"))

main.css (+13, -0)

From: curriculum/section14/lectures/05_toggle_dark_mode_css_variables/start/movie_library/static/css/main.css

To: curriculum/section14/lectures/05_toggle_dark_mode_css_variables/end/movie_library/static/css/main.css

            
            index 04548ab..efedc79 100644
--- a/curriculum/section14/lectures/05_toggle_dark_mode_css_variables/start/movie_library/static/css/main.css
+++ b/curriculum/section14/lectures/05_toggle_dark_mode_css_variables/end/movie_library/static/css/main.css
@@ -11,6 +11,19 @@
   --border: 3px solid #000;
 }
 
+:root.dark-mode {
+  --text-dark: #fbf2f2;
+  --text-light: #000;
+  --text-muted: #595959;
+
+  --background-color: #1c2023;
+  --accent-colour: #f56565;
+  --accent-colour-2: #3bb54a;
+  --tag-colour: var(--accent-colour-2);
+
+  --border: 3px solid #fff;
+}
+
 .button {
   --background-color: #e2e8f0;
   --background-color-hover: #bdd1eb;

layout.html (+1, -1)

From: curriculum/section14/lectures/05_toggle_dark_mode_css_variables/start/movie_library/templates/layout.html

To: curriculum/section14/lectures/05_toggle_dark_mode_css_variables/end/movie_library/templates/layout.html

            
            index 7fbdd18..f594bed 100644
--- a/curriculum/section14/lectures/05_toggle_dark_mode_css_variables/start/movie_library/templates/layout.html
+++ b/curriculum/section14/lectures/05_toggle_dark_mode_css_variables/end/movie_library/templates/layout.html
@@ -2,7 +2,7 @@
 {% from "macros/footer.html" import footer %}
 
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="{{ 'dark-mode' if session.get('theme') == 'dark' }}">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

nav.html (+14, -0)

From: curriculum/section14/lectures/05_toggle_dark_mode_css_variables/start/movie_library/templates/macros/nav.html

To: curriculum/section14/lectures/05_toggle_dark_mode_css_variables/end/movie_library/templates/macros/nav.html

            
            index 5e86ce3..72b17c5 100644
--- a/curriculum/section14/lectures/05_toggle_dark_mode_css_variables/start/movie_library/templates/macros/nav.html
+++ b/curriculum/section14/lectures/05_toggle_dark_mode_css_variables/end/movie_library/templates/macros/nav.html
@@ -1,3 +1,5 @@
+{% from "macros/svgs.html" import moon, sun %}
+
 {% macro header(email, theme) %}
 <header class="header">
     <div class="nav-container">
@@ -34,6 +36,18 @@
                     <span class="nav__item">Log out</span>
                 </a>
             {% endif %}
+            <a
+                href="{{ url_for('pages.toggle_theme', current_page=request.path) }}"
+                class="nav__link"
+            >
+                <span class="nav__item">
+                    {% if theme == "dark" %}
+                        {{ sun("nav__icon") }}
+                    {% else %}
+                        {{ moon("nav__icon") }}
+                    {% endif %}
+                </span>
+            </a>
         </nav>
     </div>
 </header>

svgs.jinja2 (+23, -0)

From: curriculum/section14/lectures/05_toggle_dark_mode_css_variables/end/movie_library/templates/macros/svgs.jinja2

To: curriculum/section14/lectures/05_toggle_dark_mode_css_variables/end/movie_library/templates/macros/svgs.jinja2

            
            new file mode 100644
index 0000000..83e6749
--- /dev/null
+++ b/curriculum/section14/lectures/05_toggle_dark_mode_css_variables/end/movie_library/templates/macros/svgs.jinja2
@@ -0,0 +1,23 @@
+{% macro star(class_) %}
+<svg xmlns="http://www.w3.org/2000/svg" class="{{ class_ }}" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+</svg>
+{% endmacro %}
+
+{% macro pencil(class_) %}
+<svg xmlns="http://www.w3.org/2000/svg" class="{{ class_ }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+</svg>
+{% endmacro %}
+
+{% macro moon(class_) %}
+<svg xmlns="http://www.w3.org/2000/svg" class="{{ class_ }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+</svg>
+{% endmacro %}
+
+{% macro sun(class_) %}
+<svg xmlns="http://www.w3.org/2000/svg" class="{{ class_ }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+</svg>
+{% endmacro %}