🍱 CSS dark mode

1 files changed, 219 insertions, 2 deletions

diff --git a/scss/custom.scss b/scss/custom.scss
index 94a55cc98..6c310607e 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -140,8 +140,8 @@ input[type="file"].form-control{
 .has-previous-value .form-control,
 .has-previous-value .btn,
 .has-previous-value .input-group-text{
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 }
 
 .detail-value.form-control {
@@ -321,6 +321,12 @@ pre {
     white-space: nowrap;
 }
 
+ul.no-bullets {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
 ul.table-import-files > li  span.btn{
     width: 6rem;
 }
@@ -1223,6 +1229,26 @@ ul.simple,
     border: 1px #999 dashed;
 }
 
+#message,
+#message div{
+    display: none;
+}
+
+#message {
+    z-index: 42200;
+    position: fixed;
+    top: 5px;
+    right: 5px;
+    background: #fff;
+    padding: 0.5em 1em;
+    border: 1px solid;
+    border-radius: 3px;
+}
+
+#message span{
+    padding: 0 1em;
+}
+
 /*
 // required
 @import "bootstrap-src/scss/functions";
@@ -1236,3 +1262,194 @@ ul.simple,
 @import "bootstrap-src/scss/code";
 @import "bootstrap-src/scss/grid";
 */
+
+
+$dark-theme-white: #eee;
+$dark-theme-pure-white: #fff;
+$dark-theme-input: #2e3443;
+$dark-theme-header: #3f3f3f;
+$dark-theme-blue: #79a0e9;
+$dark-theme-dark-bg: #171b25;
+$dark-theme-dark-hover: #171717;
+$dark-theme-dark-hover-alt: #6a6a6a;
+$dark-theme-red: #912d2d;
+
+
+@media (prefers-color-scheme: dark) {
+    html {
+        background-image: url('images/ishtar-bg-dark.png');
+        background-color: $dark-theme-dark-bg;
+    }
+
+    .ui-menu-item{ /* autocomplete is kept white on focus -> set color to dark */
+        color: $gray-700;
+    }
+
+    body,
+    input,
+    pre,
+    .form-control,
+    .table,
+    a:hover, 
+    a.add-button,
+    a.add-button:visited,
+    a.btn-success, a.btn-success:visited,
+    a.btn-secondary, a.btm-secondary:visited,
+    a.btn-info, a.btm-info:visited
+    a.page-link,
+    a.btn, a.btn:visited,
+    .btn.no-hover,
+    .close,
+    .import-row-error a, .import-row-error a:visited,
+    .breadcrumb-item + .breadcrumb-item::before,
+    .breadcrumb-item button,
+    .collapse-form .card-header .btn.btn-link,
+    .dt-button.disabled,
+    .dropdown-menu a, .dropdown-menu a:visited,
+    ul.table-import-files > li span.btn,
+    #window-fixed-menu a,
+    #window-fixed-menu a:visited,
+    #main-container table.dataTable.display tbody > tr.selected a,
+    #main-container table.dataTable.display tbody > tr.selected a:visited,
+    #main-container .dataTables_wrapper .dataTables_length,
+    #main-container .dataTables_wrapper .dataTables_filter,
+    #main-container .dataTables_wrapper .dataTables_info,
+    #main-container .dataTables_wrapper .dataTables_processing,
+    #main-container .dataTables_wrapper .dataTables_paginate{
+        color: $dark-theme-white;
+    }
+
+    a {
+        color: #6bbbff;
+    }
+
+    a:visited,
+    #window-fixed-menu a .fa-circle,
+    #window-fixed-menu a:visited .fa-circle {
+        color: #e584f7;
+    }
+
+    .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link,
+    .nav-tabs .nav-link:hover, .nav-tabs .nav-link:hover,
+    .dropdown-item:hover, .dropdown-item:focus,
+    .page-link:hover,
+    .close:hover {
+        color: $dark-theme-pure-white;
+    }
+
+    .nav-tabs .nav-link, .nav-tabs .nav-link,
+    .input-group-text,
+    #news-feed .date {
+        color: $gray-500;
+    }
+
+    .page-link,
+    .input-group-text,
+    .btn-outline-secondary, .btn-outline-secondary:hover,
+    .btn.no-hover, .btn.no-hover:hover,
+    .form-control:disabled, .form-control[readonly],
+    .dropdown-item:hover, .dropdown-item:focus,
+    ul.table-import-files > li span.btn,
+    ul.table-import-files > li span.btn:hover,
+    #window-fixed-menu-list li a.nav-link,
+    #main-container .select2-container--default .select2-selection--multiple .select2-selection__choice,
+    #main-container table.dataTable.display tbody tr:hover,
+    #main-container table.dataTable.order-column.hover tbody tr:hover,
+    #main-container table.dataTable.display tbody tr:hover > .sorting_1,
+    #main-container table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
+    #main-container .table-striped tbody tr:nth-of-type(2n+1):hover,
+    #main-container .dt-bootstrap4 table.dataTable.stripe tbody tr.odd:hover,
+    #main-container .dt-bootstrap4 table.dataTable.display tbody tr.odd:hover,
+    #main-container .dt-bootstrap4 table.dataTable.stripe tbody tr.even:hover,
+    #main-container .dt-bootstrap4 table.dataTable.display tbody tr.even:hover{
+        background-color: $dark-theme-dark-hover;
+    }
+
+    .table, input,
+    .dt-button.disabled,
+    #main-container .select2-container--default .select2-selection--multiple,
+    #main-container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled .page-link,
+    .page-link:hover,
+    #main-container table.dataTable thead tr,
+    #main-container table.dataTable tbody tr,
+    .modal-content, .form-control, .input-sep,
+    .card, .dropdown-menu {   
+        background-color: $dark-theme-input;
+    }
+    
+    #message,
+    .breadcrumb,
+    .form h4, .form h3, .collapse-form .card-header, #window h3,
+    #window-fixed-menu,
+    .page-item.active .page-link,
+    .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link,
+    .modal-header, .modal-footer, .card-header, .input-progress,
+    #main-container .table-striped tbody tr:nth-of-type(2n+1),
+    #main-container .table-striped tbody tr:nth-of-type(2n+1):hover,
+    #main-container .dt-bootstrap4 table.dataTable.stripe tbody tr.odd,
+    #main-container .dt-bootstrap4 table.dataTable.display tbody tr.odd {
+        background-color: $dark-theme-header;
+    }
+
+    .modal-header {
+        border-color: $dark-theme-header;
+    }
+
+    #main-container table.dataTable.stripe tbody > tr.even.selected,
+    #main-container table.dataTable.stripe tbody > tr.even > .selected,
+    #main-container table.dataTable.display tbody > tr.even.selected,
+    #main-container table.dataTable.display tbody > tr.even > .selected,
+    #main-container table.dataTable.stripe tbody > tr.odd.selected,
+    #main-container table.dataTable.stripe tbody > tr.odd > .selected,
+    #main-container table.dataTable.display tbody > tr.odd.selected,
+    #main-container table.dataTable.display tbody > tr.odd > .selected{
+        background-color: $dark-theme-dark-hover-alt;
+    }
+    
+    .dt-button,
+    .page-item.active .page-link,
+    .nav-tabs .nav-link, .nav-tabs .nav-link,
+    .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus,
+    .page-link,
+    a.btn, .btn {
+        border-color: $dark-theme-white;
+    }
+    .dt-button.disabled{
+        border-color: $gray-600;
+    }
+
+    .import-row-error,
+    #main-container .table-striped tbody tr:nth-of-type(2n).import-row-error,
+    #main-container .table-striped tbody tr:nth-of-type(2n+1).import-row-error {
+        background-color: $dark-theme-red;
+    }
+
+    .bg-primary,
+    #window-fixed-menu-list li a.nav-link.active{
+        background-color: $dark-theme-blue !important;
+    }
+
+    .clean-table h4, .form h4, .form h3, .collapse-form .card-header h4 .btn,
+    #main-container .sheet h4, #main-container .sheet h3, #main-container .sheet h2 {
+        text-shadow: none;
+    }
+
+    #main-container table.dataTable.display tbody tr.odd > .sorting_1,
+    #main-container table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
+    #main-container table.dataTable.display tbody tr.even > .sorting_1,
+    #main-container table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
+        background-color: inherit;
+    }
+
+    .table-info, .table-info > th, .table-info > td {
+        background-color: #769499;
+    }
+
+    /* reinit for map, alerts, select2-options */
+    .alert a:hover,
+    .select2-results__option,
+     a.btn-success.btn-warning, a.btn-success.btn-warning:visited,
+    .layer-switcher-base-group {
+        color: $gray-800;
+    }
+}