From 8703ac25090b3e57949ffddf43386560a3d3768a Mon Sep 17 00:00:00 2001
From: Gaurav <gauravgunjal71@gmail.com>
Date: Sat, 11 Apr 2020 13:14:10 +0530
Subject: [PATCH] added dark mode

---
 expensetrack/__pycache__/views.cpython-35.pyc | Bin 1460 -> 1460 bytes
 expensetrack/static/darkmode.js               |  32 ++
 expensetrack/static/style1.css                | 261 +++++++++++++
 .../templates}/index1.html                    | 346 +-----------------
 .../__pycache__/settings.cpython-35.pyc       | Bin 2618 -> 2583 bytes
 expensetracker/settings.py                    |   2 +-
 6 files changed, 311 insertions(+), 330 deletions(-)
 create mode 100644 expensetrack/static/darkmode.js
 create mode 100644 expensetrack/static/style1.css
 rename {templates => expensetrack/templates}/index1.html (54%)

diff --git a/expensetrack/__pycache__/views.cpython-35.pyc b/expensetrack/__pycache__/views.cpython-35.pyc
index 5542bd8e0b15eb7226fe78def86fac409efe7b85..431232716faf4268692b5ddc9bc59e1302a40917 100644
GIT binary patch
delta 16
XcmdnOy@i`yoR^pD#KXRg>}y#8DzF7&

delta 16
XcmdnOy@i`yoR^o&^iuCe_O+}4CQJms

diff --git a/expensetrack/static/darkmode.js b/expensetrack/static/darkmode.js
new file mode 100644
index 0000000..889c468
--- /dev/null
+++ b/expensetrack/static/darkmode.js
@@ -0,0 +1,32 @@
+// // function to set a given theme/color-scheme
+function setTheme(themeName) {
+    localStorage.setItem('theme', themeName);
+    document.documentElement.className = themeName;
+}
+const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
+const currentTheme = localStorage.getItem('theme');
+
+if (currentTheme) {
+
+    if (currentTheme === 'theme-dark') {
+        toggleSwitch.checked = true;
+    }
+}
+
+toggleSwitch.addEventListener('change', switchTheme, false);
+
+function switchTheme(e) {
+    if (e.target.checked) {
+        setTheme('theme-dark')
+    } else {
+        setTheme('theme-light')
+    }
+}
+
+(function () {
+    if (localStorage.getItem('theme') === 'theme-dark') {
+        setTheme('theme-dark');
+    } else {
+        setTheme('theme-light');
+    }
+})();
\ No newline at end of file
diff --git a/expensetrack/static/style1.css b/expensetrack/static/style1.css
new file mode 100644
index 0000000..e5bda66
--- /dev/null
+++ b/expensetrack/static/style1.css
@@ -0,0 +1,261 @@
+.theme-light {
+    --body-color: #566787;
+    --body-background: #f5f5f5;
+    --table-wrapper-background: #fff;
+    --table-title-background: #2f3260;
+    --table-title-color: #fff;
+    --table-title-button-text: #fff;
+    --table-title-button-background: #079e05;
+    --table-border: #e9e9e9;
+    --table-row-background: #fcfcfc;
+    --table-row-hover: #f5f5f5;
+    --modal-footer: #ecf0f1;
+    --modal-body: #fff;
+    --modal-text: #566787;
+    --modal-btn-close: black;
+    --modal-form-text-background: #fff;
+    --modal-form-text-color: black;
+}
+
+.theme-dark{
+    --body-color: #ffffff;
+    --body-background: #2f3260;
+    --table-wrapper-background: #435d7d;
+    --table-title-background: #232250;
+    --table-title-color: #fff;
+    --table-title-button-text: #fff;
+    --table-title-button-background: #079e05;
+    --table-border: #e9e9e9;
+    --table-row-background: #435d7d;
+    --table-row-hover: #2f3260;
+    --modal-footer: #2f3260;
+    --modal-body: #2f3260;
+    --modal-text: #fff;
+    --modal-btn-close: #fff;
+    --modal-form-text-background: #435d7d;
+    --modal-form-text-color: #fff;
+}
+
+body {
+    color: var(--body-color);
+    background: var(--body-background);
+    font-family: 'Varela Round', sans-serif;
+    font-size: 17px;
+}
+
+
+.table-wrapper {
+    background: var(--table-wrapper-background);
+    padding: 20px 25px;
+    margin: 30px 0;
+    border-radius: 3px;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+}
+
+.table-title {
+    padding-bottom: 15px;
+    background: var(--table-title-background);
+    color: var(--table-title-color);
+    padding: 16px 30px;
+    margin: -20px -25px 10px;
+    border-radius: 3px 3px 0 0;
+}
+
+.table-title h2 {
+    margin: 5px 0 0;
+    font-size: 24px;
+}
+
+.table-title .btn-group {
+    float: right;
+}
+
+.table-title .btn {
+    color: var(--table-title-button-text);
+    background: var(--table-title-button-background);
+    float: right;
+    font-size: 13px;
+    border: none;
+    min-width: 50px;
+    border-radius: 2px;
+    border: none;
+    outline: none !important;
+    margin-left: 10px;
+}
+
+.table-title .btn i {
+    float: left;
+    font-size: 21px;
+    margin-right: 5px;
+}
+
+.table-title .btn span {
+    float: left;
+    margin-top: 2px;
+}
+
+table.table tr th, table.table tr td {
+    border-color: #e9e9e9;
+    padding: 12px 15px;
+    vertical-align: middle;
+}
+
+table.table tr th:first-child {
+    width: 200px;
+}
+
+table.table tr th:last-child {
+    width: 200px;
+}
+
+table.table-striped tbody tr:nth-of-type(odd) {
+    background-color: var(--table-row-background);
+}
+
+table.table-striped.table-hover tbody tr:hover {
+    background: var(--table-row-hover);
+}
+
+table.table th i {
+    font-size: 20px;
+    margin: 0 5px;
+    cursor: pointer;
+}
+
+table.table td:last-child i {
+    opacity: 0.9;
+    font-size: 22px;
+    margin: 0 5px;
+}
+
+table.table td a.edit {
+    color: #FFC107;
+}
+
+table.table td a.delete {
+    color: #F44336;
+}
+
+table.table td i {
+    font-size: 19px;
+}
+
+table.table .avatar {
+    border-radius: 50%;
+    vertical-align: middle;
+    margin-right: 10px;
+}
+
+.pagination {
+    float: right;
+    margin: 0 0 5px;
+}
+
+/* Modal styles */
+.modal .modal-dialog {
+    max-width: 400px;
+}
+
+.modal .modal-header, .modal .modal-body, .modal .modal-footer {
+    padding: 20px 30px;
+}
+
+.modal .modal-content {
+    background: var(--modal-body);
+    color: var(--modal-text);
+    border-radius: 3px;
+}
+
+.modal .modal-footer {
+    background: var(--modal-footer);
+    border-radius: 0 0 3px 3px;
+}
+
+.modal .modal-title {
+    display: inline-block;
+}
+
+.modal .form-control {
+    background: var(--modal-form-text-background);
+    color: var(--modal-form-text-color);
+    border-radius: 2px;
+    box-shadow: none;
+    border-color: #dddddd;
+}
+
+.modal textarea.form-control {
+    resize: vertical;
+}
+
+.modal .btn {
+    border-radius: 2px;
+    min-width: 100px;
+}
+
+.modal .btn-close {
+    color: var(--modal-btn-close);
+}
+
+.modal form label {
+    font-weight: normal;
+}
+
+
+.theme-switch-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+em {
+    margin-left: 10px;
+    font-size: 2rem;
+}
+
+.theme-switch {
+    display: inline-block;
+    height: 34px;
+    position: relative;
+    width: 60px;
+}
+
+.theme-switch input {
+    display: none;
+}
+
+.slider {
+    background-color: #ccc;
+    bottom: 0;
+    cursor: pointer;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: .4s;
+}
+
+.slider:before {
+    background-color: #fff;
+    bottom: 4px;
+    content: "";
+    height: 26px;
+    left: 4px;
+    position: absolute;
+    transition: .4s;
+    width: 26px;
+}
+
+input:checked + .slider {
+    background-color: #66bb6a;
+}
+
+input:checked + .slider:before {
+    transform: translateX(26px);
+}
+
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
\ No newline at end of file
diff --git a/templates/index1.html b/expensetrack/templates/index1.html
similarity index 54%
rename from templates/index1.html
rename to expensetrack/templates/index1.html
index 139a6a9..7ae4eff 100644
--- a/templates/index1.html
+++ b/expensetrack/templates/index1.html
@@ -1,3 +1,4 @@
+{% load static %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -9,339 +10,24 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <link rel="stylesheet" href="{% static 'style1.css' %}">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
-    <style type="text/css">
-        body {
-            color: #566787;
-            background: #f5f5f5;
-            font-family: 'Varela Round', sans-serif;
-            font-size: 17px;
-        }
 
-        .dark-mode {
-            background-color: black;
-            color: white;
-        }
-
-        .table-wrapper {
-            background: #fff;
-            padding: 20px 25px;
-            margin: 30px 0;
-            border-radius: 3px;
-            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
-        }
-
-        .table-title {
-            padding-bottom: 15px;
-            background: #435d7d;
-            color: #fff;
-            padding: 16px 30px;
-            margin: -20px -25px 10px;
-            border-radius: 3px 3px 0 0;
-        }
-
-        .table-title h2 {
-            margin: 5px 0 0;
-            font-size: 24px;
-        }
-
-        .table-title .btn-group {
-            float: right;
-        }
-
-        .table-title .btn {
-            color: #fff;
-            float: right;
-            font-size: 13px;
-            border: none;
-            min-width: 50px;
-            border-radius: 2px;
-            border: none;
-            outline: none !important;
-            margin-left: 10px;
-        }
-
-        .table-title .btn i {
-            float: left;
-            font-size: 21px;
-            margin-right: 5px;
-        }
-
-        .table-title .btn span {
-            float: left;
-            margin-top: 2px;
-        }
-
-        table.table tr th, table.table tr td {
-            border-color: #e9e9e9;
-            padding: 12px 15px;
-            vertical-align: middle;
-        }
-
-        table.table tr th:first-child {
-            width: 200px;
-        }
-
-        table.table tr th:last-child {
-            width: 200px;
-        }
-
-        table.table-striped tbody tr:nth-of-type(odd) {
-            background-color: #fcfcfc;
-        }
-
-        table.table-striped.table-hover tbody tr:hover {
-            background: #f5f5f5;
-        }
-
-        table.table th i {
-            font-size: 20px;
-            margin: 0 5px;
-            cursor: pointer;
-        }
-
-        table.table td:last-child i {
-            opacity: 0.9;
-            font-size: 22px;
-            margin: 0 5px;
-        }
-
-        table.table td a {
-            font-weight: bold;
-            color: #566787;
-            display: inline-block;
-            text-decoration: none;
-            outline: none !important;
-        }
-
-        table.table td a:hover {
-            color: #2196F3;
-        }
-
-        table.table td a.edit {
-            color: #FFC107;
-        }
-
-        table.table td a.delete {
-            color: #F44336;
-        }
-
-        table.table td i {
-            font-size: 19px;
-        }
-
-        table.table .avatar {
-            border-radius: 50%;
-            vertical-align: middle;
-            margin-right: 10px;
-        }
-
-        .pagination {
-            float: right;
-            margin: 0 0 5px;
-        }
-
-        .pagination li a {
-            border: none;
-            font-size: 13px;
-            min-width: 30px;
-            min-height: 30px;
-            color: #999;
-            margin: 0 2px;
-            line-height: 30px;
-            border-radius: 2px !important;
-            text-align: center;
-            padding: 0 6px;
-        }
-
-        .pagination li a:hover {
-            color: #666;
-        }
-
-        .pagination li.active a, .pagination li.active a.page-link {
-            background: #03A9F4;
-        }
-
-        .pagination li.active a:hover {
-            background: #0397d6;
-        }
-
-        .pagination li.disabled i {
-            color: #ccc;
-        }
-
-        .pagination li i {
-            font-size: 16px;
-            padding-top: 6px
-        }
-
-        .hint-text {
-            float: left;
-            margin-top: 10px;
-            font-size: 13px;
-        }
-
-        /* Custom checkbox */
-        .custom-checkbox {
-            position: relative;
-        }
-
-        .custom-checkbox input[type="checkbox"] {
-            opacity: 0;
-            position: absolute;
-            margin: 5px 0 0 3px;
-            z-index: 9;
-        }
-
-        .custom-checkbox label:before {
-            width: 18px;
-            height: 18px;
-        }
-
-        .custom-checkbox label:before {
-            content: '';
-            margin-right: 10px;
-            display: inline-block;
-            vertical-align: text-top;
-            background: white;
-            border: 1px solid #bbb;
-            border-radius: 2px;
-            box-sizing: border-box;
-            z-index: 2;
-        }
-
-        .custom-checkbox input[type="checkbox"]:checked + label:after {
-            content: '';
-            position: absolute;
-            left: 6px;
-            top: 3px;
-            width: 6px;
-            height: 11px;
-            border: solid #000;
-            border-width: 0 3px 3px 0;
-            transform: inherit;
-            z-index: 3;
-            transform: rotateZ(45deg);
-        }
-
-        .custom-checkbox input[type="checkbox"]:checked + label:before {
-            border-color: #03A9F4;
-            background: #03A9F4;
-        }
-
-        .custom-checkbox input[type="checkbox"]:checked + label:after {
-            border-color: #fff;
-        }
-
-        .custom-checkbox input[type="checkbox"]:disabled + label:before {
-            color: #b8b8b8;
-            cursor: auto;
-            box-shadow: none;
-            background: #ddd;
-        }
-
-        /* Modal styles */
-        .modal .modal-dialog {
-            max-width: 400px;
-        }
-
-        .modal .modal-header, .modal .modal-body, .modal .modal-footer {
-            padding: 20px 30px;
-        }
-
-        .modal .modal-content {
-            border-radius: 3px;
-        }
-
-        .modal .modal-footer {
-            background: #ecf0f1;
-            border-radius: 0 0 3px 3px;
-        }
-
-        .modal .modal-title {
-            display: inline-block;
-        }
-
-        .modal .form-control {
-            border-radius: 2px;
-            box-shadow: none;
-            border-color: #dddddd;
-        }
-
-        .modal textarea.form-control {
-            resize: vertical;
-        }
-
-        .modal .btn {
-            border-radius: 2px;
-            min-width: 100px;
-        }
-
-        .modal form label {
-            font-weight: normal;
-        }
-
-        .material-switch > input[type="checkbox"] {
-            display: none;
-        }
-
-        .material-switch > label {
-            cursor: pointer;
-            height: 0px;
-            position: relative;
-            top: 2px;
-            width: 40px;
-        }
-
-        .material-switch > label::before {
-            background: rgb(0, 0, 0);
-            box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
-            border-radius: 8px;
-            content: '';
-            height: 16px;
-            margin-top: -8px;
-            position: absolute;
-            opacity: 0.3;
-            transition: all 0.4s ease-in-out;
-            width: 40px;
-        }
-
-        .material-switch > label::after {
-            background: rgb(255, 255, 255);
-            border-radius: 16px;
-            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
-            content: '';
-            height: 24px;
-            left: -4px;
-            margin-top: -8px;
-            position: absolute;
-            top: -4px;
-            transition: all 0.3s ease-in-out;
-            width: 24px;
-        }
-
-        .material-switch > input[type="checkbox"]:checked + label::before {
-            background: inherit;
-            opacity: 0.5;
-        }
-
-        .material-switch > input[type="checkbox"]:checked + label::after {
-            background: inherit;
-            left: 20px;
-        }
-    </style>
 
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
 <div class="container">
-    <div class="material-switch" style="float: right">
-        <input id="switch-primary" name="switch-primary" type="checkbox">
-        <label for="switch-primary" class="primary-color"></label>
-        Dark Mode
+    </br>
+    <div class="theme-switch-wrapper" style="float: right">
+        <label class="theme-switch" for="checkbox">
+            <input onclick="toggleTheme()" style="display: inline" type="checkbox" id="checkbox"/>
+            <div class="slider round"></div>
+        </label>
+        <em style="display: inline">Dark mode toggle!!</em>
     </div>
-Helloo
+    </br>
     <div class="table-wrapper">
         <div class="table-title">
             <div class="row">
@@ -351,7 +37,7 @@ <h2>Manage <b>Expenses</b></h2>
 
 
                 <div class="col-sm-offset-3">
-                    <a href="#addExpenseModal" class="btn btn-success" data-toggle="modal"><i class="material-icons">&#xE147;</i>
+                    <a href="#addExpenseModal" class="btn" data-toggle="modal"><i class="material-icons">&#xE147;</i>
                         <span>Add New Expense</span></a>
                 </div>
             </div>
@@ -392,7 +78,7 @@ <h2>Manage <b>Expenses</b></h2>
                                 {% csrf_token %}
                                 <div class="modal-header">
                                     <h4 class="modal-title">Edit Expense</h4>
-                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                                    <button type="button" class="btn-close close" data-dismiss="modal" aria-hidden="true">
                                         &times;
                                     </button>
                                 </div>
@@ -452,7 +138,7 @@ <h4 class="modal-title">Edit Expense</h4>
                                 {% csrf_token %}
                                 <div class="modal-header">
                                     <h4 class="modal-title">Delete Expense</h4>
-                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                                    <button type="button" class="btn-close close" data-dismiss="modal" aria-hidden="true">
                                         &times;
                                     </button>
                                 </div>
@@ -472,7 +158,7 @@ <h4 class="modal-title">Delete Expense</h4>
         </table>
     </div>
 </div>
-<!-- Edit Modal HTML -->
+<!-- Add Modal HTML -->
 <div id="addExpenseModal" class="modal fade">
     <div class="modal-dialog">
         <div class="modal-content">
@@ -480,7 +166,7 @@ <h4 class="modal-title">Delete Expense</h4>
                 {% csrf_token %}
                 <div class="modal-header">
                     <h4 class="modal-title">Add Expense</h4>
-                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                    <button type="button" class="btn-close close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 </div>
                 <div class="modal-body">
                     <div class="form-group">
@@ -492,6 +178,7 @@ <h4 class="modal-title">Add Expense</h4>
                         <input class="form-control" type="text" name="amount" placeholder="Enter the amount" required>
                     </div>
                     <div class="form-group">
+                        <label>Category</label>
                         <select class="form-control" name="category" required>
                             <option value="" selected disabled hidden>Choose the category</option>
                             <option value="food" name="category">Food</option>
@@ -514,4 +201,5 @@ <h4 class="modal-title">Add Expense</h4>
 </div>
 
 </body>
+<script src="{% static 'darkmode.js' %}"></script>
 </html>
\ No newline at end of file
diff --git a/expensetracker/__pycache__/settings.cpython-35.pyc b/expensetracker/__pycache__/settings.cpython-35.pyc
index 921db3a2987af633e042ad0dcbdad2aa9e5581a3..da3a74d19cb0a1ca1d57139f8270a42d6ec38d77 100644
GIT binary patch
delta 283
zcmYk1%Sr=55JgWXV-f?SQAZQsk8#xae&SYe=T>mh3s)D0tOEK0?pzyMBKRBG`4b9$
zf<Iz+gJ3~jP8C$ut&i+2%iC$%G<SphmlS^Z7cI|MJ|FEMA3l|!HcC(j&7%dhh?dYY
zWkS!;ODGLCMJw0|w2IcyI@&-v+C&A~in@(<P#5jSZF^`xZm0*flX2uAaF{)eaO3Id
zuXP;2U$rfCf}KLA*y&)-&P2`7S#&cS%Q<w8_3kU&b}vS+=BqmDk9}86$6Ys`-Dl&y
RR`^FB3fCWZrsk^6%U@waGYJ3y

delta 318
zcmYjN%Sr=55Ug1@F&kKoy1I$)xG`&dzrFeaUc}oVf>2A?B^oig3ksgR$cP^N1dn_3
zD?IoCf<NNSK){ABs-dg8=(pfAh(g~l^X2Ix_kmyhtBU5wx_h1H==ClU$Q)!ok|G%5
z!9iPqRnP@%;50Y`&VqB`JlZZ&fz&lSas*s}90eD_I=BQzU;|tRn_z5l1#E$<;F@(?
z2RE$4ut8Y?&$VXL3`V>)Aln17V~D;g$G~04ac~cE!i1B7#Yu4ArkS#12p&M{^bXEi
yhxxtu8Y+AJ<m#q#*-v`;Y2n)uHPtLV7Tm0xUaODNdok9(xQ*3`r$kl#ct?MPIy}t)

diff --git a/expensetracker/settings.py b/expensetracker/settings.py
index aeb101e..3269294 100644
--- a/expensetracker/settings.py
+++ b/expensetracker/settings.py
@@ -55,7 +55,7 @@
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [os.path.join(BASE_DIR, 'templates')],
+        'DIRS': [],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [