Implemented darkmode in items module

application/items/static/ItemListHandler.js

@@ -9,24 +9,6 @@ var settingsState = false;
 
 var item_subtypes = [['Food', 'FOOD'], ['Food PLU', 'FOOD_PLU'], ['Other', 'OTHER'], ['Medicinal', 'MEDICINE'], ['Hygenic', 'HYGENIC']];
 
-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()
-}
-
 var detailedList = false
 async function setViewMode() {
     detailedList = !detailedList;

application/items/static/itemEditHandler.js

@@ -1,34 +1,3 @@
-var darkmode = false
-function toggleDarkMode(){
-    if (!darkmode){
-        document.body.classList.add('dark-mode-body')
-        document.body.classList.add('uk-light')
-        document.getElementById('navbar').classList.add('uk-light')
-        document.getElementById('navbar').style = "background-color: #121212;"
-        document.getElementById('weblinkModal').classList.add('dark-mode-element')
-        document.getElementById('weblinkModalFooter').classList.add('dark-mode-element')
-        document.getElementById('brandsModalinner').classList.add('dark-mode-element')
-        document.getElementById('locationsModalInner').classList.add('dark-mode-element')
-        document.getElementById('zonesModalInner').classList.add('dark-mode-element')
-        document.getElementById('modeToggle').innerHTML = "light_mode"
-
-        darkmode = true
-    } else {
-        document.body.classList.remove('dark-mode-body')
-        document.body.classList.remove('uk-light')
-        document.getElementById('navbar').classList.remove('uk-light')
-        document.getElementById('navbar').style = ""
-        document.getElementById('weblinkModal').classList.remove('dark-mode-element')
-        document.getElementById('weblinkModalFooter').classList.remove('dark-mode-element')
-        document.getElementById('brandsModalinner').classList.remove('dark-mode-element')
-        document.getElementById('locationsModalInner').classList.remove('dark-mode-element')
-        document.getElementById('zonesModalInner').classList.remove('dark-mode-element')
-        document.getElementById('modeToggle').innerHTML = "dark_mode"
-
-        darkmode=false
-    }
-}
-
 var item;
 var linked_items;
 var tags = new Set();

application/items/static/transactionHandler.js

@@ -453,19 +453,3 @@ async function openLineEditModal(ind, line_data) {
 
     UIkit.modal(document.getElementById("lineEditModal")).show();
 }
-
-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')
-
-    }
-
-}

application/items/templates/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">

application/items/templates/item_new.html

@@ -16,6 +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') }}"/>
+        {% 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>
@@ -37,7 +40,11 @@
             background-color: whitesmoke;
         }
     </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">

application/items/templates/itemlink.html

@@ -14,13 +14,19 @@
      
      <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
      <link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
+    {% 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>
+    <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/items/templates/transaction.html

@@ -13,7 +13,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 %}
 
 
 
@@ -24,7 +26,11 @@
             cursor: pointer;
         }
     </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">

application/items/templates/transactions.html

@@ -16,11 +16,19 @@
         
         <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
 
+        {% 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">