Fixed darkmode for some elements

assets/controllers/elements/datatables/datatables_controller.js

@@ -97,7 +97,7 @@ export default class extends Controller {
             },
             buttons: [{
                 "extend": 'colvis',
-                'className': 'mr-2 btn-light',
+                'className': 'mr-2 btn-outline-secondary',
                 'columns': ':not(.no-colvis)',
                 "text": "<i class='fa fa-cog'></i>"
             }],
@@ -123,6 +123,22 @@ export default class extends Controller {
                 console.error("Error initializing datatables: " + err);
             });
 
+        //Fix height of the length selector
+        promise.then((dt) => {
+            //Find all length selectors (select with name dt_length), which are inside a label
+            const lengthSelectors = document.querySelectorAll('label select[name="dt_length"]');
+            //And remove the surrounding label, while keeping the select with all event handlers
+            lengthSelectors.forEach((selector) => {
+                selector.parentElement.replaceWith(selector);
+            });
+
+            //Find all column visibility buttons (button with buttons-colvis class) and remove the btn-secondary class
+            const colVisButtons = document.querySelectorAll('button.buttons-colvis');
+            colVisButtons.forEach((button) => {
+                button.classList.remove('btn-secondary');
+            });
+        });
+
         //Dispatch an event to let others know that the datatables has been loaded
         promise.then((dt) => {
             const event = new CustomEvent(EVENT_DT_LOADED, {bubbles: true});

assets/controllers/elements/tree_controller.js

@@ -81,6 +81,14 @@ export default class extends Controller {
             this._tree.remove();
         }
 
+        const BS53Theme = {
+            getOptions() {
+                return {
+                    onhoverColor: 'var(--bs-secondary-bg)',
+                };
+            }
+        }
+
         this._tree = new BSTreeView(this.treeTarget, {
             levels: 1,
             showTags: this._showTags,
@@ -93,7 +101,7 @@ export default class extends Controller {
                 }
             },
             //onNodeContextmenu: contextmenu_handler,
-        }, [BS5Theme, FAIconTheme]);
+        }, [BS5Theme, BS53Theme, FAIconTheme]);
 
         this.treeTarget.addEventListener(EVENT_INITIALIZED, (event) => {
             /** @type {BSTreeView} */

assets/css/app/bs-overrides.css

@@ -99,7 +99,7 @@ label:not(.form-check-label, .custom-control-label) {
 
 form .col-form-label.required:after, form label.required:after {
     bottom: 4px;
-    color: var(--bs-dark);
+    color: var(--bs-secondary-color);
     content: "\2022";
     filter: opacity(75%);
     position: relative;

assets/css/app/tables.css

@@ -91,7 +91,7 @@ th.select-checkbox {
 /** Fix datatables select-checkbox position */
 table.dataTable tr.selected td.select-checkbox:after
 {
-    margin-top: -28px !important;
+    margin-top: -25px !important;
 }
 
 
@@ -116,23 +116,33 @@ table.dataTable > thead > tr > th.select-checkbox:before,
 table.dataTable > thead > tr > th.select-checkbox:after {
     display: block;
     position: absolute;
-    top: 1.2em;
+    top: 0.9em;
     left: 50%;
-    width: 12px;
+    width: 1em !important;
-    height: 12px;
+    height: 1em !important;
     box-sizing: border-box;
 }
 table.dataTable > thead > tr > th.select-checkbox:before {
     content: " ";
     margin-top: -5px;
     margin-left: -6px;
-    border: 1px solid black;
+    border: 2px solid var(--bs-tertiary-color);
     border-radius: 3px;
 }
+
+table.dataTable > tbody > tr > td.select-checkbox:before, table.dataTable > tbody > tr > th.select-checkbox:before {
+    border: 2px solid var(--bs-tertiary-color) !important;
+}
+
+table.dataTable > tbody > tr > td.select-checkbox:before, table.dataTable > tbody > tr > td.select-checkbox:after, table.dataTable > tbody > tr > th.select-checkbox:before, table.dataTable > tbody > tr > th.select-checkbox:after {
+    width: 1em !important;
+    height: 1em !important;
+}
+
 table.dataTable > thead > tr.selected > th.select-checkbox:after {
     content: "✓";
     font-size: 20px;
-    margin-top: -23px;
+    margin-top: -20px;
     margin-left: -6px;
     text-align: center;
     /*text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9; */

assets/css/components/tom-select_extensions.css

@@ -18,6 +18,6 @@
  */
 
 .tagsinput.ts-wrapper.multi .ts-control > div {
-    background: var(--bs-secondary);
+    background: var(--bs-secondary-bg);
-    color: var(--bs-white);
+    color: var(--bs-body-color);
 }

templates/_navbar_search.html.twig

@@ -1,6 +1,6 @@
 <form id="navbar-search-form" action="{{ path('parts_search') }}" class="d-flex my-lg-0 ms-auto" method="get" data-turbo-permanent>
     <div class="dropdown">
-        <button class="btn btn-light dropdown-toggle my-2" type="button" id="navbar-search-options" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-auto-close="false">
+        <button class="btn dropdown-toggle my-2" type="button" id="navbar-search-options" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-auto-close="false">
             {% trans %}search.options.label{% endtrans %}
             <span class="caret"></span>
         </button>

templates/components/tree_macros.html.twig

@@ -28,7 +28,7 @@
 {% macro treeview_sidebar(id, default_mode) %}
     <div {{ stimulus_controller('elements/sidebar_tree') }} data-default-mode="{{ default_mode }}" id="{{ id }}">
         <div class="input-group input-group-sm mb-2 mt-1">
-            <button class="btn btn-light dropdown-toggle" type="button"
+            <button class="btn bg-body-tertiary dropdown-toggle" type="button"
                     data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
             ><span class="sidebar-title" {{ stimulus_target('elements/sidebar_tree', 'sourceText') }}>Loading... / Access Denied</span></button>
             <ul class="dropdown-menu" aria-labelledby="dropdownCat">

templates/helper.twig

@@ -126,7 +126,7 @@
 
 {% macro breadcrumb_entity_link(entity, link_type = "list_parts", icon = "") %}
     <nav aria-label="breadcrumb">
-        <ol class="breadcrumb py-2 px-3 rounded" style="background-color: var(--bs-gray-200);">
+        <ol class="breadcrumb py-2 px-3 rounded bg-body-tertiary">
             {% if icon is not empty %}
                 <i class="{{ icon }} fa-fw me-1" style="line-height: inherit;"></i>
             {% else %}