summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ishtar_common/static/js/ishtar.js45
-rw-r--r--ishtar_common/static/media/styles.css6
-rw-r--r--ishtar_common/templates/base.html1
-rw-r--r--ishtar_common/templates/navbar.html7
-rw-r--r--scss/custom.scss49
5 files changed, 92 insertions, 16 deletions
diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index fde903ac3..519c17158 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -85,6 +85,51 @@ text_truncate = function(str, length) {
}
};
+function switchTheme(e) {
+ var toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');
+ if (e.target.checked) {
+ localStorage.setItem('theme', 'dark');
+ document.documentElement.setAttribute('data-theme', 'dark');
+ toggleSwitch.checked = true;
+ $("#theme-switch .fa.fa-sun-o").addClass("d-none");
+ $("#theme-switch .fa.fa-moon-o").removeClass("d-none");
+ } else {
+ localStorage.setItem('theme', 'light');
+ document.documentElement.setAttribute('data-theme', 'light');
+ toggleSwitch.checked = false;
+ $("#theme-switch .fa.fa-moon-o").addClass("d-none");
+ $("#theme-switch .fa.fa-sun-o").removeClass("d-none");
+ }
+}
+
+function manageColorScheme(){
+ var theme = "light";
+ if(localStorage.getItem("theme")){
+ if(localStorage.getItem("theme") == "dark"){
+ theme = "dark";
+ }
+ } else {
+ const dark_mode_mql = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
+ if (dark_mode_mql && dark_mode_mql.matches) {
+ theme = "dark";
+ }
+ }
+ if (theme == "dark") {
+ document.documentElement.setAttribute("data-theme", "dark");
+ $("#theme-switch .fa.fa-sun-o").addClass("d-none");
+ $("#theme-switch .fa.fa-moon-o").removeClass("d-none");
+ } else {
+ $("#theme-switch .fa.fa-moon-o").addClass("d-none");
+ $("#theme-switch .fa.fa-sun-o").removeClass("d-none");
+ }
+ var toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');
+ toggleSwitch.addEventListener('change', switchTheme, false);
+ // pre-check the dark-theme checkbox if dark-theme is set
+ if (document.documentElement.getAttribute("data-theme") == "dark"){
+ toggleSwitch.checked = true;
+ }
+}
+
/* default function to prevent undefined */
function get_next_table_id(){}
function get_previous_table_id(){}
diff --git a/ishtar_common/static/media/styles.css b/ishtar_common/static/media/styles.css
index 515293653..2ed496c31 100644
--- a/ishtar_common/static/media/styles.css
+++ b/ishtar_common/static/media/styles.css
@@ -202,8 +202,6 @@ table.dataTable thead th, table.dataTable thead td {
height: 50px;
}
-@media (prefers-color-scheme: dark) {
- html{
- background-image: url('images/ishtar-bg-dark.png');
- }
+html[data-theme="dark"] {
+ background-image: url('images/ishtar-bg-dark.png');
}
diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index 7d57fa54e..8b3ed35a1 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -234,6 +234,7 @@
<script type="text/javascript">{% localize off %}
{% block end_js %}
{% endblock %}
+ $(document).ready(manageColorScheme);
{% endlocalize %}</script>
</body>
diff --git a/ishtar_common/templates/navbar.html b/ishtar_common/templates/navbar.html
index 79023100a..627269302 100644
--- a/ishtar_common/templates/navbar.html
+++ b/ishtar_common/templates/navbar.html
@@ -65,6 +65,13 @@
</div>
</li>
{% endif %}
+ <li class="nav-item">
+ <label id="theme-switch" class="theme-switch nav-link" for="checkbox_theme">
+ <i class="fa fa-sun-o" aria-hidden="true"></i>
+ <i class="fa fa-moon-o d-none" aria-hidden="true"></i>
+ <input type="checkbox" id="checkbox_theme">
+ </label>
+ </li>
{% if user.is_staff %}
<li class="nav-item">
<a class="nav-link" href="/admin/">
diff --git a/scss/custom.scss b/scss/custom.scss
index 5672eb61a..97935ffca 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -1270,6 +1270,11 @@ ul.simple,
padding: 0 1em;
}
+
+#theme-switch input {
+ display: none;
+}
+
/*
// required
@import "bootstrap-src/scss/functions";
@@ -1291,17 +1296,18 @@ $dark-theme-input: #2e3443;
$dark-theme-header: #3f3f3f;
$dark-theme-blue: #79a0e9;
$dark-theme-dark-bg: #171b25;
+$dark-theme-dark-odd: #202020;
$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;
- }
+html[data-theme="dark"] {
+ background-image: url('images/ishtar-bg-dark.png');
+ background-color: $dark-theme-dark-bg;
+}
+[data-theme="dark"] {
.ui-menu-item{ /* autocomplete is kept white on focus -> set color to dark */
color: $gray-700;
}
@@ -1328,6 +1334,8 @@ $dark-theme-red: #912d2d;
.dt-button.disabled,
.dropdown-menu a, .dropdown-menu a:visited,
ul.table-import-files > li span.btn,
+ .select2-container--default .select2-selection--single .select2-selection__rendered,
+ .select2-results__option,
#window-fixed-menu a,
#window-fixed-menu a:visited,
#main-container table.dataTable.display tbody > tr.selected a,
@@ -1360,6 +1368,9 @@ $dark-theme-red: #912d2d;
.nav-tabs .nav-link, .nav-tabs .nav-link,
.input-group-text,
+ a:visited.input-group-text.input-link,
+ a.page-link,
+ a:visited.page-link,
#news-feed .date {
color: $gray-500;
}
@@ -1373,7 +1384,10 @@ $dark-theme-red: #912d2d;
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,
+ .select2-container--default .select2-selection--multiple .select2-selection__choice,
+ .select2-container--default .select2-selection--single .select2-selection__choice,
+ .select2-container--open .select2-dropdown--below,
+ .select2-container--default .select2-results__option--highlighted[aria-selected],
#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,
@@ -1388,12 +1402,16 @@ $dark-theme-red: #912d2d;
.table, input,
.dt-button.disabled,
- #main-container .select2-container--default .select2-selection--multiple,
+ .select2-container--default .select2-selection--multiple,
+ .select2-container--default .select2-selection--single,
+ .input-progress.form-control:focus, .input-progress,
#main-container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled .page-link,
.page-link:hover,
+ .select2-results__option,
#main-container table.dataTable thead tr,
#main-container table.dataTable tbody tr,
.modal-content, .form-control, .input-sep,
+ .table-striped tbody tr:nth-of-type(2n+1),
.card, .dropdown-menu {
background-color: $dark-theme-input;
}
@@ -1404,13 +1422,21 @@ $dark-theme-red: #912d2d;
#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,
+ .modal-header, .modal-footer, .card-header,
+ .table-scroll thead th,
+ .select2-container--default .select2-results__option[aria-selected="true"],
+ .table-striped tbody tr:nth-of-type(2n+1),
+ .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;
}
+ .table-striped tbody tr:nth-of-type(2n+1),
+ .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-dark-odd;
+ }
.modal-header {
border-color: $dark-theme-header;
@@ -1467,9 +1493,8 @@ $dark-theme-red: #912d2d;
background-color: #769499;
}
- /* reinit for map, alerts, select2-options */
+ /* reinit for map, alerts */
.alert a:hover,
- .select2-results__option,
a.btn-success.btn-warning, a.btn-success.btn-warning:visited,
.layer-switcher-base-group {
color: $gray-800;
generated by cgit v1.2.3 (git 2.39.1) at 2026-05-18 14:43:24 +0000