added dark mode

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');
+    }
+})();

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%;
+}