0.0.45

css/main.css

@@ -30,6 +30,10 @@ body[data-theme=dark] {
   --text-color-light: 170, 170, 170;
   --foreground-color: 26, 26, 26;
   --background-color: #111;
+  --dark-shade: #222;
+  --hue: 255;
+  --saturation: 39%;
+  --lightness: 70%;
   background-color: var(--background-color);
 }
 body[data-theme=dark] .balance:nth-of-type(3) {
@@ -154,6 +158,10 @@ button:disabled ~ .loader {
   flex-direction: column;
 }
 
+.justify-right {
+  margin-left: auto;
+}
+
 .space-between {
   justify-content: space-between;
 }
@@ -1236,7 +1244,7 @@ sm-panel {
 
 #settings_page > h4 {
   margin-top: 2rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.4rem;
 }
 #settings_page p {
   color: rgba(var(--text-color), 0.7);
@@ -1244,6 +1252,9 @@ sm-panel {
 #settings_page sm-button {
   margin-top: 0.8rem;
 }
+#settings_page .flex {
+  max-width: 60ch;
+}
 
 @media only screen and (max-width: 640px) {
   #home_page, #deposit {

css/main.scss

@@ -29,6 +29,10 @@ body[data-theme="dark"]{
     --text-color-light: 170, 170, 170;
     --foreground-color: 26, 26, 26;
     --background-color: #111;
+    --dark-shade: #222;
+    --hue: 255;
+    --saturation: 39%;
+    --lightness: 70%;
     background-color: var(--background-color);
     .balance:nth-of-type(3){
         color: rgba(var(--text-color), 1);
@@ -153,6 +157,10 @@ button {
     flex-direction: column;
 }
 
+.justify-right{
+    margin-left: auto;
+}
+
 .space-between {
     justify-content: space-between;
 }
@@ -1299,7 +1307,7 @@ sm-panel{
 #settings_page{
     & > h4{
         margin-top: 2rem;
-        margin-bottom: 0.5rem;
+        margin-bottom: 0.4rem;
     } 
     p{
         color: rgba(var(--text-color), 0.7);
@@ -1307,6 +1315,9 @@ sm-panel{
     sm-button{
         margin-top: 0.8rem;
     }
+    .flex{
+        max-width: 60ch;
+    }
 }
 @media only screen and (max-width: 640px) {
     #home_page, #deposit{

index.html

@@ -828,6 +828,11 @@
                     </svg>
                 </div>
             </section>
+            <h4>Theme</h4>
+            <div class="flex">
+                <p>Toggle dark theme</p>
+                <sm-switch id="theme_switcher" class="justify-right"></sm-switch>
+            </div>
             <h4>My UPIs</h4>
             <div class="upi-container"></div>
             <p class="empty-state">Add UPI address for easier access during various transactions.</p>
@@ -1337,6 +1342,35 @@
             notifications.clearAll()
             notify('We are back online.', '', '', true)
         })
+
+        let themeSwitcher = document.getElementById('theme_switcher')
+
+        if (localStorage.theme === "dark") {
+            nightlight()
+            themeSwitcher.checked = true;
+        } else {
+            daylight()
+            themeSwitcher.checked = false;
+        }
+        
+        function daylight() {
+            document.body.setAttribute("data-theme", "light");
+        }
+        
+        function nightlight() {
+            document.body.setAttribute("data-theme", "dark");
+        }
+        themeSwitcher.addEventListener('change', function(e){
+            if(this.checked){
+                nightlight();
+                localStorage.setItem("theme", "dark");
+            }
+            else{
+                daylight();
+                localStorage.setItem("theme", "light");
+            }
+        })
+
         // function required for popups or modals to appear
         class Stack {
             constructor() {
@@ -1746,7 +1780,8 @@
             })
 
             document.getElementById('settings_page').addEventListener('change', e => {
-                setPrimaryUPI(e.target.value)
+                if(e.target.closest('.upi-container'))
+                    setPrimaryUPI(e.target.value)
             })
             document.getElementById('settings_page').addEventListener('click', async e => {
                 if(e.target.closest('.remove') && await confirmation('Do you want to remove this UPI address?', 'No', 'Remove UPI')){
@@ -1788,7 +1823,7 @@
         function showTransactionDetails(obj){
             let {type, timeStamp, } = obj;
             if(type === 'payCashier')
-                type = 'Pay through cashier'
+                type = 'Paid through cashier'
             transactionType.textContent = type
             transactionTime.textContent = formatedTime(timeStamp)
             showPage('transaction_page')