Implemented dark mode in recipes module

application/recipes/recipes_api.py

@@ -26,6 +26,7 @@ def recipes():
 def recipe(id, mode='view'):
     units = database_recipes.getUnits()
     print("woot")
+    print(session)
     if mode == "edit":
         return render_template("recipe_edit.html", recipe_id=id, current_site=session['selected_site'], units=units)
     if mode == "view":

application/recipes/sql/getRecipeByID.sql

@@ -1,7 +1,7 @@
 WITH passed_id AS (SELECT %s AS passed_id),
     cte_recipe_items AS (
             SELECT items.*,
-            COALESCE(%%site_name%%_items.barcode, items.uuid) AS uuid,
+            /*COALESCE(%%site_name%%_items.barcode, items.uuid) AS uuid,*/
             (SELECT COALESCE(row_to_json(units.*), '{}') FROM units WHERE units.id=%%site_name%%_item_info.uom) AS item_uom,
             COALESCE(%%site_name%%_items.item_name, items.item_name) AS item_name,
             COALESCE(%%site_name%%_items.links, items.links) AS links,

application/recipes/static/js/recipeEditHandler.js

@@ -1,23 +1,3 @@
-var mode = false
-async function toggleDarkMode() {
-    let darkMode = document.getElementById("dark-mode");    
-    darkMode.disabled = !darkMode.disabled;
-    mode = !mode;
-    if(mode){
-        document.getElementById('modeToggle').innerHTML = "light_mode"
-        document.getElementById('main_html').classList.add('uk-light')
-        
-    } else {
-        document.getElementById('modeToggle').innerHTML = "dark_mode"
-        document.getElementById('main_html').classList.remove('uk-light')
-    }
-}
-
-
-if(session.user.flags.darkmode){
-    toggleDarkMode()
-}
-
 // Beginning of site specific code!
 var recipe = [];
 document.addEventListener('DOMContentLoaded', async function() {

application/recipes/static/js/recipeViewHandler.js

@@ -1,22 +1,3 @@
-var mode = false
-async function toggleDarkMode() {
-    let darkMode = document.getElementById("dark-mode");    
-    darkMode.disabled = !darkMode.disabled;
-    mode = !mode;
-    if(mode){
-        document.getElementById('modeToggle').innerHTML = "light_mode"
-        document.getElementById('main_html').classList.add('uk-light')
-        
-    } else {
-        document.getElementById('modeToggle').innerHTML = "dark_mode"
-        document.getElementById('main_html').classList.remove('uk-light')
-    }
-}
-
-if(session.user.flags.darkmode){
-    toggleDarkMode()
-}
-
 // Beginning of site specific code!
 var recipe = [];
 document.addEventListener('DOMContentLoaded', async function() {

application/recipes/static/js/recipesListHandler.js

@@ -1,22 +1,3 @@
-var mode = false
-async function toggleDarkMode() {
-    let darkMode = document.getElementById("dark-mode");    
-    darkMode.disabled = !darkMode.disabled;
-    mode = !mode;
-    if(mode){
-        document.getElementById('modeToggle').innerHTML = "light_mode"
-        document.getElementById('main_html').classList.add('uk-light')
-    } else {
-        document.getElementById('modeToggle').innerHTML = "dark_mode"
-        document.getElementById('main_html').classList.remove('uk-light')
-    }
-}
-
-
-if(session.user.flags.darkmode){
-    toggleDarkMode()
-}
-
 async function changeSite(site){
     console.log(site)
     const response = await fetch(`/changeSite`, {

application/recipes/templates/recipe_edit.html

@@ -16,13 +16,18 @@
         
         <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
         <link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
-        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>
-
+        {% if session['user']['flags']['darkmode'] %}
+        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
+        {% endif %}
 
         <script src="{{ url_for('static', filename='js/uikit.min.js') }}"></script>
         <script src="{{ url_for('static', filename='js/uikit-icons.min.js') }}"></script>
     </head>
+    {% if session['user']['flags']['darkmode'] %}
+    <body class="uk-light">
+    {% else %}
     <body>
+    {% endif %}     
         <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
                 <div class="uk-navbar uk-navbar-primary">

application/recipes/templates/recipe_view.html

@@ -16,8 +16,9 @@
         
         <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
         <link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
-        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>
-
+        {% if session['user']['flags']['darkmode'] %}
+        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
+        {% endif %}
 
         <script src="{{ url_for('static', filename='js/uikit.min.js') }}"></script>
         <script src="{{ url_for('static', filename='js/uikit-icons.min.js') }}"></script>
@@ -29,7 +30,11 @@
             border-radius: 50%;
         }
     </style>
+    {% if session['user']['flags']['darkmode'] %}
+    <body class="uk-light">
+    {% else %}
     <body>
+    {% endif %}
         <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
                 <div class="uk-navbar uk-navbar-primary">
@@ -38,7 +43,7 @@
                         <ul class="uk-navbar-nav">
                             <li>
                                 <a href>Apps</a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                <div class="uk-navbar-dropdown uk-light" uk-drop="mode: click; multi:false">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li><a href="/recipes">Recipes</a></li>
                                         <li><a href="/shopping-lists">Shopping Lists</a></li>

application/recipes/templates/recipes_index.html

@@ -15,13 +15,19 @@
         <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet" />
         
         <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
-        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>
+        {% if session['user']['flags']['darkmode'] %}
+        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
+        {% endif %}
 
         <script src="{{ url_for('static', filename='js/uikit.min.js') }}"></script>
         <script src="{{ url_for('static', filename='js/uikit-icons.min.js') }}"></script>
 
     </head>
+    {% if session['user']['flags']['darkmode'] %}
+    <body class="uk-light">
+    {% else %}
     <body>
+    {% endif %}
         <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
                 <div class="uk-navbar uk-navbar-primary">

logs/database.log

@@ -65,3 +65,6 @@
 2025-08-09 16:10:49.684466 --- ERROR --- DatabaseError(message='operator does not exist: integer = character varyingLINE 4: ...(row_to_json(un), '{}') FROM units un WHERE un.id = items.uo...                                                             ^HINT:  No operator matches the given name and argument types. You might need to add explicit type casts.',
                                          payload=(1,),
                                          sql='WITH passed_id AS (SELECT %s AS passed_id),    cte_receipt_items AS (            SELECT items.* ,            (SELECT COALESCE(row_to_json(un), '{}') FROM units un WHERE un.id = items.uom LIMIT 1) AS uom            FROM testa_receipt_items items            WHERE items.receipt_id = (SELECT passed_id FROM passed_id)            ORDER BY items.name ASC        )SELECT (SELECT passed_id FROM passed_id) AS passed_id,     testa_receipts.*,     logins.username as submitted_by,     (SELECT COALESCE(array_agg(row_to_json(ris)), '{}') FROM cte_receipt_items ris) AS receipt_items,     row_to_json(testa_vendors.*) as vendorFROM testa_receiptsJOIN logins ON testa_receipts.submitted_by = logins.idLEFT JOIN testa_vendors ON testa_receipts.vendor_id = testa_vendors.id WHERE testa_receipts.id=(SELECT passed_id FROM passed_id)')
+2025-08-09 16:20:46.492869 --- ERROR --- DatabaseError(message='relation "testa_recipes" does not existLINE 3:  FROM testa_recipes LIMIT 10 OFFSET 0;              ^',
+                                         payload=(10, 0),
+                                         sql='SELECT *,    (SELECT COALESCE(array_agg(row_to_json(g)), '{}') FROM testa_recipe_items g WHERE rp_id = testa_recipes.id) AS rp_items FROM testa_recipes LIMIT %s OFFSET %s;')

static/css/dark-mode.css

@@ -5,6 +5,8 @@
     --surface: #121212;
     --surface-text: #ffffff;
 
+    --surface-two: #252525;
+
     --error: #CF6679;
     --error-text: #000000;
     
@@ -52,6 +54,14 @@ select, option {
     pointer-events: none;
 }
 
+.uk-navbar-container {
+    background-color: var(--surface) !important;
+}
+
+.uk-navbar-dropdown {
+    background-color: var(--surface-two) !important;
+    box-shadow: var(--elevation-low);
+}
 
 .uk-input.uk-disabled {
     background-color: var(--background-secondary);