diff --git a/assets/src/legacy/attributeTable.js b/assets/src/legacy/attributeTable.js
index 95a15bce5d..24399c73b5 100644
--- a/assets/src/legacy/attributeTable.js
+++ b/assets/src/legacy/attributeTable.js
@@ -484,7 +484,8 @@ var lizAttributeTable = function() {
                 var canPopup = false
                 if( config.layers[lname]
                     && config.layers[lname]['popup'] == 'True'
-                    && config.layers[lname]['geometryType'] != 'none'
+                    // We should NOT  deactivate popup for non-spatial layers, as it can be very useful
+                    // && config.layers[lname]['geometryType'] != 'none'
                     && config.layers[lname]['geometryType'] != 'unknown'
                 ){
                     canPopup = true;
@@ -666,6 +667,7 @@ var lizAttributeTable = function() {
                 }
 
                 // Bind click on detail button
+                // It just toggles the right panel visibility
                 if( canPopup ){
                     $('#attribute-layer-'+ cleanName + ' button.btn-detail-attributeTable')
                     .click(function(){
@@ -1685,6 +1687,11 @@ var lizAttributeTable = function() {
                 };
             }
 
+            /**
+             *
+             * @param {string} aName  The layer name
+             * @param {string} aTable The HTML table selector
+             */
             function bindTableLineClick(aName, aTable){
                 $(aTable +' tr').click(function() {
 
@@ -1711,6 +1718,8 @@ var lizAttributeTable = function() {
 
                         lizMap.getFeaturePopupContent( aName, feat, function(data){
                             $('#attribute-table-panel-' + parentLayerCleanName ).html(data);
+                            // Add the missing Bootstrap classes
+                            $('#attribute-table-panel-' + parentLayerCleanName + ' table').addClass('table table-condensed table-striped table-bordered');
 
                             // Trigger event
                             lizMap.events.triggerEvent('lizmappopupdisplayed_inattributetable'
diff --git a/assets/src/legacy/edition.js b/assets/src/legacy/edition.js
index 47823c7ae3..4205ba2cfc 100644
--- a/assets/src/legacy/edition.js
+++ b/assets/src/legacy/edition.js
@@ -1,5 +1,20 @@
 var lizEdition = function() {
 
+    /**
+     * Prevent the user from quitting the page
+     * when and editing session is active.
+     *
+     * @param {Event} event
+     */
+    const beforeUnloadHandler = (event) => {
+        if (lizMap.editionPending) {
+            event.preventDefault();
+            event.returnValue = '';
+        }
+    }
+    window.addEventListener('beforeunload', beforeUnloadHandler);
+
+
     function FeatureEditionData(layerID, feature, relation) {
         /** @var {string} QGIS layer id */
         this.layerId = layerID;
@@ -1005,6 +1020,7 @@ OpenLayers.Geometry.pointOnSegment = function(point, segment) {
                 },
                 'geolocation.position'
             );
+
         } else {
             $('#edition').parent().remove();
             $('#button-edition').remove();
diff --git a/lizmap/www/assets/css/dataviz/dataviz.css b/lizmap/www/assets/css/dataviz/dataviz.css
index 6d9c70b9b1..5a8222c941 100644
--- a/lizmap/www/assets/css/dataviz/dataviz.css
+++ b/lizmap/www/assets/css/dataviz/dataviz.css
@@ -18,7 +18,7 @@ Toolbar buttons
 */
 
 #dataviz h3 .icon {
-    background-image: url(dataviz-icon-white.png);
+    background-image: url(dataviz-icon-dark.png);
     background-position: 0 0;
 }
 
@@ -37,7 +37,7 @@ Toolbar buttons
 }
 
 #dataviz-main.bottom-content div.menu-content{
-    background-color: #F0F0F0 !important;
+    background-color: var(--color-background-primary-content) !important;
     border:none !important;
 }
 
@@ -45,12 +45,13 @@ Toolbar buttons
     padding: 5px;
     font-size: 0.8em;
 }
+/* Title "Dataviz" of the bottom dock */
 #nav-tab-dataviz-main > a{
     background: none !important;
     border: none;
-    color: white;
+    color: var(--color-text-primary);
     margin-top: 10px;
-    font-weight: bold;
+    font-weight: 500;
 }
 #dataviz-content > h3{
     margin-left:0px;
@@ -64,9 +65,13 @@ Toolbar buttons
 /*
 DARK THEME
 */
+#dataviz-content.dark h3 .icon {
+    background-image: url(dataviz-icon-white.png);
+    background-position: 0 0;
+}
 #dataviz-content.dark div.menu-content {
     background: rgb(74, 74, 74) !important;
-    color: white;
+    color: var(--color-contrasted-text);
 }
 #dataviz-content.dark h3 {
     font-weight: bold !important;
@@ -75,7 +80,7 @@ DARK THEME
 #dataviz-content.dark g text.legendtext,
 #dataviz-content.dark g.xtick text,
 #dataviz-content.dark g.ytick text{
-    fill: white !important;
+    fill: var(--color-contrasted-text) !important;
 }
 
 /*
@@ -89,12 +94,11 @@ Diagram height, 450px by default*/
 /*
 TABS AND GROUPS
 */
-/* Edition style */
 #dataviz ul.nav-tabs {
-    border-bottom: 1px solid gray;
+    border-bottom: 1px solid var(--color-contrasted-elements-light);
 }
 #dataviz .nav-tabs > li > a {
-    color: white;
+    color: var(--color-text-primary);
     padding: 5px;
     border: none;
 }
@@ -106,9 +110,8 @@ TABS AND GROUPS
 #dataviz .nav-tabs > li > a:focus {
     background: none;
     border: none;
-    /* border-bottom: 3px solid #0094d6; */
-    border-bottom: 3px solid white;
-    color: white;
+    border-bottom: 3px solid var(--color-contrasted-elements);
+    color: var(--color-text-primary);
     cursor: pointer;
 }
 
@@ -117,32 +120,68 @@ TABS AND GROUPS
 #dataviz .nav-tabs > li.active > a:focus {
     background: none;
     border: none;
-    border-bottom: 3px solid white;
-    color: white;
+    border-bottom: 3px solid var(--color-contrasted-elements);
+    color: var(--color-text-primary);
     cursor: auto;
 }
+/* In bottom-dock, do not use a thick border bottom */
+#bottom-dock #nav-tab-dataviz-main > a {
+  border: none;
+}
 
 #dataviz div.tab-pane {
-    border-left: 1px solid gray;
-    border-right: 1px solid gray;
-    border-bottom: 1px solid gray;
+    border-left: 1px solid var(--color-contrasted-elements-light);
+    border-right: 1px solid var(--color-contrasted-elements-light);
+    border-bottom: 1px solid var(--color-contrasted-elements-light);
     padding: 5px;
 }
 
 #dataviz legend {
-    color: white;
+    color: var(--color-text-primary);
     border-bottom: none;
     padding: 5px;
     width: unset;
     max-width: 100%;
     margin-bottom: 0px;
+    font-weight: normal !important;
+    font-size: 1em;
 }
 
 #dataviz fieldset {
     padding: 10px;
     padding-top: 0px;
     margin: 0px 5px;
-    border: 1px solid lightgray;
+    border: 1px solid var(--color-contrasted-elements);
     border-radius: 5px;
     background: rgba(255, 255, 255, 0.2);
 }
+
+/* Dataviz in bottom-dock */
+#bottom-dock #dataviz ul.nav-tabs {
+    border: none;
+}
+#bottom-dock div.dataviz_plot_container,
+#right-dock div.dataviz_plot_container
+{
+    border: 1px solid lightgray;
+    margin-top: 10px;
+}
+
+#bottom-dock div.dataviz_plot_container h3,
+#right-dock div.dataviz_plot_container h3
+{
+    margin-left: 0px !important;
+    border-bottom: 1px solid lightgray;
+}
+#bottom-dock #dataviz-content.light span.icon {
+    background-image: url("dataviz-icon-dark.png");
+}
+
+
+/* Some plotly adaptations */
+/* deactivated because it moves the plotly toolbar */
+.js-plotly-plot .plotly
+/* ,.js-plotly-plot .plotly div  */
+{
+  margin: 0 auto;
+}
diff --git a/lizmap/www/assets/css/map.css b/lizmap/www/assets/css/map.css
index 264e2b98bd..265b326c22 100644
--- a/lizmap/www/assets/css/map.css
+++ b/lizmap/www/assets/css/map.css
@@ -98,10 +98,6 @@ button.btn-primary:hover > [class*=" icon-"] {
   display:none;
 }
 
-#headermenu .dropdown-menu > li > a{
-  color:white;
-}
-
 /* mapmenu */
 #mapmenu {
   position:absolute;
@@ -381,11 +377,15 @@ ul.nav.nav-tabs {
   right:5px;
   width: 32px;
   height: 32px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-left-square' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm11.5 5.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-arrow-left-square' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm11.5 5.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
 }
 
+#dock-close:hover {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-left-square' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm11.5 5.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z'/%3E%3C/svg%3E");
+}
+
 #right-dock div.tabbable {
   height: 100%;
   margin-top: 5px;
@@ -525,14 +525,20 @@ SubDock
 
 #bottom-dock-window-buttons {
   display:none;
-  position:absolute;
+  position:fixed;
   bottom:0px;
   padding:2px;
 }
 #bottom-dock.visible #bottom-dock-window-buttons {
   display:block;
 }
-
+#bottom-dock.half-transparent {
+  opacity: 1;
+  height: 48%;
+}
+#bottom-dock.half-transparent #bottom-dock-window-buttons {
+  display: block;
+}
 
 #bottom-dock-tabs {
   display:none;
@@ -1507,6 +1513,7 @@ lizmap-print .flex {
 
 #switcher-layers-actions {
   background-color: inherit;
+  margin-top: 5px;
   margin-bottom: 1px;
   padding-right: 10px;
   text-align: right;
@@ -2122,7 +2129,7 @@ lizmap-mouse-position > div.coords-unit > select{
 #map-content .lizmapPopupContent h4,
 #popupcontent .lizmapPopupContent h4{
   margin: 0px;
-  color : white !important;
+  color : white;
   font-size: 1em;
   padding: 2px;
   padding-left: 5px;
@@ -2308,9 +2315,9 @@ lizmap-mouse-position > div.coords-unit > select{
 
 #edition-form-container h3 {
   color: black;
-  background-color: lightgrey;
+  background-color: transparent;
   line-height: 20px;
-  font-size: 1em;
+  font-size: 1.2em;
   padding: 1px 5px;
   margin-bottom: 4px;
 }
@@ -2366,7 +2373,6 @@ lizmap-mouse-position > div.coords-unit > select{
 
 .edition-tabs .nav-pills > .active > a, .edition-tabs .nav-pills > .active > a:hover, .edition-tabs .nav-pills > .active > a:focus{
   background-color: #93C01F;
-  background-image: linear-gradient(to bottom, #9BC144, #93C01F);
   color: white;
 }
 
@@ -2471,14 +2477,15 @@ div.tooltip {
     border: 1px solid darkgray;
     border-bottom-color: transparent;
 }
+/* Remove border & padding */
 #edition div.tab-content {
-  border: 1px solid lightgrey;
-  padding: 10px;
+  /* border: 1px solid lightgrey;
+  padding: 10px; */
 }
 #edition div.jforms-table-group{
-  background-color: lightgrey;
-  padding: 10px 0px;
-  border-radius: 10px;
+  /* background-color: lightgrey; */
+  padding: 5px 0px;
+  /* border-radius: 10px; */
 }
 
 #edition-point-coord-form,
@@ -2937,6 +2944,7 @@ lizmap-reverse-geom svg{
 .btn-print-launch.spinner::after {
   right: 5px;
 }
+
 /* lizmap-feature-toolbar */
 lizmap-feature-toolbar button.btn:hover,
 .attribute-layer-action-bar button.btn:not(.dropdown-toggle):hover{
@@ -3149,6 +3157,10 @@ lizmap-treeview .icon-remove-sign {
 lizmap-treeview .icon-info-sign {
   visibility: hidden;
   margin-left: auto;
+  /* Make it centered vertically & horizontally */
+  background-origin: content-box;
+  border: 1px solid gray;
+  border-radius: 5px;
 }
 
 lizmap-treeview .node:hover .icon-info-sign {
@@ -3180,4 +3192,9 @@ lizmap-treeview .symbols img.legend {
 
 lizmap-treeview img.legend[src="data:image/png;base64, "]{
   visibility: hidden;
-}
\ No newline at end of file
+}
+
+/* CKEDITOR adaptations */
+.ck.ck-balloon-panel.ck-balloon-panel_visible {
+  z-index: 9999;
+}
diff --git a/lizmap/www/themes/default/css/img/logo.png b/lizmap/www/themes/default/css/img/logo.png
index 8e31fc74f7..661aa6d2a8 100644
Binary files a/lizmap/www/themes/default/css/img/logo.png and b/lizmap/www/themes/default/css/img/logo.png differ
diff --git a/lizmap/www/themes/default/css/main.css b/lizmap/www/themes/default/css/main.css
index 7d60477ed6..6b35a9575b 100644
--- a/lizmap/www/themes/default/css/main.css
+++ b/lizmap/www/themes/default/css/main.css
@@ -1,13 +1,114 @@
+/* VARIABLES */
+:root {
+  --header-color: #43718c;
+  /* --header-background-image: url(img/header-background-medium.jpg); */
+  --header-background-image: none;
+  --color-background-primary: #ffffffdb;
+  --color-background-primary-content: #ffffffdb;
+  --color-text-primary: rgb(51, 51, 51);
+  --color-text-primary-content: rgb(51, 51, 51);
+  --color-contrasted-elements: #43718c;
+  --color-contrasted-elements-light: #c3dceb;
+  --color-contrasted-text: white;
+  --color-dark-gray-elements: rgb(51, 51, 51);
+  --color-red-elements: #da4f49;
+}
+
+/* BODY */
 body {
-  background : #EFEFEF;
+  background : var(--color-background-primary);
+}
+
+/* BUTTONS */
+button.btn, a.btn, input.btn {
+  background-image: none;
+  border: 1px solid transparent;
+  background-color: var(--color-contrasted-elements-light);
+  color: var(--color-text-primary);
+  box-shadow: none;
+  text-shadow: none;
+}
+button.btn:focus, a.btn:focus, , input.btn:focus {
+  background-color: var(--color-contrasted-elements-light);
+  color: var(--color-text-primary);
+}
+button.btn:hover,
+button.btn.active,
+a.btn:hover,
+a.btn.active,
+input.btn:hover,
+input.btn.active {
+  background-color: var(--color-contrasted-elements);
+  color: var(--color-contrasted-text);
+}
+/* button types */
+.btn.btn-primary, .btn.btn-primary:focus {
+  background-color: var(--color-contrasted-elements);
+  color: white;
+}
+.btn.btn-danger, .btn.btn-danger:focus {
+  background-color: var(--color-red-elements);
+  color: white;
+}
+
+
+/* DROP-DOWN LISTS */
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus,
+.dropdown-submenu:hover > a,
+.dropdown-submenu:focus > a {
+  background-image: none;
+  background-color: var(--color-contrasted-elements);
+  color: var(--color-contrasted-text);
+}
+.btn-group.open .btn.dropdown-toggle {
+  background-color: var(--color-contrasted-elements);
+  color: var(--color-contrasted-text);
+}
+
+/* FORMS */
+/* Form submit button container */
+div.jforms-submit-buttons {
+  padding: 5px;
+  padding-top: 20px;
+  background: none;
+  border: none;
+}
+
+/* Form submit buttons */
+div.jforms-submit-buttons.form-actions .btn{
+  transition: none;
+  border: 1px solid transparent;
+  box-shadow: none;
+  text-shadow: none;
+}
+
+div.jforms-submit-buttons.form-actions .btn:hover,
+div.jforms-submit-buttons.form-actions .btn:focus
+{
+  filter: brightness(0.95);
+  color: black;
+}
+
+div.jforms-submit-buttons.form-actions .btn.jforms-ctrl-reset {
+  background-color: lightgrey;
 }
+div.jforms-submit-buttons.form-actions #jforms_view_edition__submit_cancel {
+  background-color: #fd8c62;
+}
+div.jforms-submit-buttons.form-actions #jforms_view_edition__submit_submit {
+  background-color: #aedb6a;
+}
+
+/* HEADER */
 
 #header {
-  background-color: #2B2B2B;
-  background-image : url(img/header-background-medium.jpg);
+  background-color: var(--header-color);
+  background-image : var(--header-background-image);
   background-repeat: repeat;
-  color : #FBFBFB;
+  color: var(--color-contrasted-text);
 }
+
 #logo {
   background : url(img/logo.png) no-repeat;
   background-size:contain;
@@ -20,22 +121,27 @@ body {
 #auth {
   background: transparent;
 }
+.navbar .nav > a,
+.navbar .nav > li > a ,
+.navbar .nav > li > a {
+  color: var(--color-contrasted-text);
+}
 .navbar .nav .active > a,
 .navbar .nav > li > a:focus ,
 .navbar .nav > li > a:hover {
-  background-color: #eeeeee;
+  background-color: var(--color-background-primary);
 }
 .navbar .nav li.dropdown.open > .dropdown-toggle,
 .navbar .nav li.dropdown.active > .dropdown-toggle,
 .navbar .nav li.dropdown.open.active > .dropdown-toggle {
-  color : #333;
-  background-color: #08C;
+  color : var(--color-text-primary);
+  background-color: var(--color-background-primary);
 }
 .navbar .nav > li > .dropdown-menu:after {
-  border-bottom: 6px solid #F5F5F5;
+  border-bottom: 6px solid var(--color-background-primary);
 }
 .dropdown-menu {
-  background-color: #F5F5F5;
+  background-color: var(--color-background-primary);
 }
 .navbar .navbar-inner .icon {
   background-image:url(images/sprite_20_tools.png);
diff --git a/lizmap/www/themes/default/css/map.css b/lizmap/www/themes/default/css/map.css
index 5656f09f1c..f33b7d1eaf 100644
--- a/lizmap/www/themes/default/css/map.css
+++ b/lizmap/www/themes/default/css/map.css
@@ -1,13 +1,53 @@
+/* VARIABLES */
+:root {
+  --header-color: #43718c;
+  --header-background-image: none;
+  --color-background-primary: #ffffffdb;
+  --color-background-primary-content: #ffffffdb;
+  --color-text-primary: rgb(51, 51, 51);
+  --color-text-primary-content: rgb(51, 51, 51);
+  --color-contrasted-elements: #43718c;
+  --color-contrasted-elements-light: #c3dceb;
+  --color-contrasted-text: white;
+  --color-dark-gray-elements: rgb(51, 51, 51);
+  --color-red-elements: #da4f49;
+}
+
+
+/* CHECKBOXES */
+#dock .tree button.checkbox.checked,
+#right-dock .tree button.checkbox.checked,
+#bottom-dock .tree button.checkbox.checked,
+#mini-dock .tree button.checkbox.checked,
+#tmLayers .tree button.checkbox.checked {
+  background-color: var(--color-contrasted-elements);
+}
+
+/* HEADER */
+#header {
+  background-color: var(--header-color);
+  background-image : var(--header-background-image);
+  background-repeat: repeat;
+  color: var(--color-contrasted-text);
+}
+
 #title h1 {
-  color : #E9E9E9;
+  color : var(--color-contrasted-text);
 }
 #title h2 {
-  color : lightgrey;
+  color : var(--color-contrasted-text);
 }
+
+/* HEADER NAVBAR */
 #headermenu .navbar-search .icon {
   background-color: transparent;
   background-position: -400px 0px;
 }
+#header-clear {
+  background-position: -875px 0px !important;
+}
+
+#headermenu .dropdown-menu > li > a
 
 #headermenu .btn-locate-clear.icon {
   background-color: transparent;
@@ -15,8 +55,7 @@
   margin-top: 5px;
 }
 #headermenu .dropdown-menu {
-  background-color: #4A4A4A;
-  background-color: rgba(0,0,0,0.7);
+  background-color: var(--color-background-primary);
 }
 #headermenu .dropdown-menu:after {
   border-bottom: 6px solid rgba(0,0,0,0.5);
@@ -31,10 +70,19 @@
   border-right: 7px solid transparent;
   border-bottom: 7px solid rgba(0,0,0,0.2);
 }
-#headermenu .dropdown-inner .items li > a {
-  color: white;
+#headermenu .dropdown-inner .items li > a,
+#headermenu .dropdown-menu > li > a {
+  color: var(--color-text-primary);
+}
+#headermenu .dropdown-inner .items li > a:hover,
+#headermenu .dropdown-menu > li > a:hover,
+#headermenu .dropdown-inner .items li > a:focus,
+#headermenu .dropdown-menu > li > a:focus
+{
+  color: var(--color-contrasted-text);
 }
 
+/* HEADER NAVBAR  */
 .navbar .nav .metadata .icon {
   background-position: -125px 0px;
 }
@@ -93,6 +141,15 @@
   background-position: -300px 0px;
 }
 
+/* MAP MENU (VERTICAL MENU ON THE LEFT) */
+#mapmenu {
+  background: var(--color-dark-gray-elements);
+}
+#mapmenu .nav-list > li.edition.edition-pending:not(.active) #button-edition {
+	background-color: var(--color-contrasted-elements-light);
+}
+
+/* ICONS */
 #content .ui-icon {
   background-image : url(images/sprite_menu.png);
 }
@@ -104,15 +161,157 @@
   background-position : 0px -96px;
 }
 
+
+/* DOCKS (PANELS) */
+
+/* Background for docks */
+#dock,
+#mini-dock,
+#bottom-dock,
+#right-dock,
+#sub-dock,
+.lizmapPopup.olPopup,
+#map-content .lizmapPopup {
+  background-color: var(--color-background-primary) !important;
+}
+
+/* Metadata panel */
 #metadata {
-  background-color:#EFEFEF;
-  color:#333;
+  background-color: var(--color-background-primary-content) !important;
+}
+
+/* White background for content div */
+#toolbar div.menu-content,
+#menu div.menu-content,
+#dock div.menu-content,
+#sub-dock div.menu-content,
+#mini-dock div.menu-content,
+#right-dock div.menu-content,
+div.modal div.menu-content,
+#bottom-dock div.bottom-content {
+  background-color: var(--color-background-primary-content);
+}
+
+/* Thin border for docks */
+#dock,
+#mini-dock,
+#sub-dock {
+  border: 1px solid var(--color-contrasted-elements);
+}
+
+/* Dark text in dock, right-dock, bottom-dock main titles */
+#dock-tabs>li>a,
+#right-dock-tabs>li>a,
+#bottom-dock-tabs>li>a {
+  color: var(--color-text-primary);
+}
+
+/* Dark border bottom for docks titles */
+#dock>div>ul.nav.nav-tabs,
+#mini-dock>div>ul.nav.nav-tabs,
+#right-dock>div>ul.nav.nav-tabs,
+#bottom-dock>div>ul.nav.nav-tabs,
+#mini-dock h3,
+#sub-dock h3,
+.dock-subtitle {
+  border-bottom: 1px solid var(--color-contrasted-elements);
+}
+
+/* Dark text for dock main title */
+#toolbar h3,
+#menu h3,
+#dock h3,
+#sub-dock h3,
+#mini-dock h3,
+#right-dock h3,
+div.modal h3,
+.dock-subtitle {
+  color: var(--color-contrasted-elements);
+}
+/* Icons from glyphicons
+For light theme, use the dark icons
+*/
+#dock .icon-white,
+#mini-dock .icon-white,
+#right-dock .icon-white,
+#bottom-dock .icon-white {
+  filter: invert(1);
+}
+
+/* Docks title icons must also be dark */
+#nav-tab-switcher a::before {
+  background-position: -50px 0px;
+}
+
+#nav-tab-metadata a::before {
+  background-position: -100px 0px;
+}
+
+#nav-tab-edition a::before {
+  background-position: -450px 0px;
+}
+
+#mini-dock .locate .icon {
+  background-position: -150px 0px !important;
+}
+
+#mini-dock .btn.btn-locate-clear {
+  background-position: -850px 0px !important;
+}
+
+#dock .baselayer .icon {
+  background-position: -700px 0px !important;
 }
 
-#metadata h2{
-  color:#333;
+#nav-tab-filter a::before {
+	background-position: -400px 0px;
 }
 
+#mini-dock .measure .icon {
+  background-position: -250px 0px !important;
+}
+
+#mini-dock .geolocation .icon {
+  background-position: -300px 0px !important;
+}
+
+#mini-dock .tooltip-layer .icon {
+  background-position: -750px 0px !important;
+}
+
+#mini-dock .print .icon {
+  background-position: -350px 0px !important;
+}
+
+#mini-dock .permaLink .icon {
+  background-position: -650px 0px !important;
+}
+#mini-dock #action div.action h3 span.icon {
+  filter: invert(0);
+}
+#sub-dock .sub-metadata h3 .icon {
+  background-position: -100px 0px;
+}
+
+#dock #cadastre h3 .icon {
+  background-image: url(images/cadastre-icon-dark.png) !important;
+  background-position: 0 0;
+}
+
+
+/* BOTTOM DOCK */
+/* bottom-dock top border to separate from the map */
+#bottom-dock {
+  border-top: 1px solid var(--color-contrasted-elements-light);
+}
+/* Bottom-dock content : remove borders
+& add a line under the bottom dock main title */
+#bottom-dock div.bottom-content {
+  border: none;
+  border-top: 1px solid var(--color-contrasted-elements) !important;
+}
+
+
 #menu {
   background : #F0F0F0;
 }
@@ -257,6 +456,11 @@ Timemanager
   border : solid 1px rgb(251,216,80);
 }
 
+/* LAYER TREE aka SWITCHER */
+lizmap-treeview input[type="checkbox"],
+#filter input[type="checkbox"] {
+  accent-color: var(--color-contrasted-elements);
+}
 #switcher tr.liz-state-disabled span {
   color:#AAA;
 }
@@ -290,22 +494,33 @@ Timemanager
   border : solid 1px #DDD;
   border-left : none;
 }
+lizmap-treeview .icon-info-sign {
+  border: 1px solid var(--color-contrasted-elements-light);
+  background-color: var(--color-contrasted-elements-light);
+}
 
-/*navbar*/
-#navbar div.slider{
-  background : #C81F2D;/* #0081C2; */
-  border : solid 1px white;
+
+/*navbar*//* Navigation bar button color */
+#navbar button.btn {
+  background-color: var(--color-contrasted-elements);
 }
-#navbar div.slider span{
-  background : black;
-  border : solid 1px black;
+/* Navigation bar active button color */
+#navbar button.btn.active {
+  background-color: var(--color-dark-gray-elements);
+}
+#navbar div.slider {
+  background: var(--color-dark-gray-elements);
+}
+#navbar div.slider span {
+  background: var(--color-dark-gray-elements);
+  border: solid 1px var(--color-dark-gray-elements);
 }
 #navbar button.ui-button-icon-only{
-  background : #0081C2;/* #CE1F2D;*/
+  background : var(--color-contrasted-elements);
   border : solid 1px white;
 }
 #navbar button.ui-state-select{
-  background-color : #3A3C3D;
+  background-color : var(--color-dark-gray-elements);
 }
 #navbar .ui-state-default .ui-icon {
   background-image : url(images/sprite_20.png);
@@ -379,9 +594,13 @@ Timemanager
 #attribution-box {
   background-color : rgba(255,255,255,0.7);
 }
+/* Overview map rectangle */
+.ol-overviewmap-box {
+  border: 2px dotted var(--color-contrasted-elements);
+}
 
 
-
+/* ATTRIBUTE TABLE */
 #attribute-table-panel {
   opacity:0.5;
   width:65%;
@@ -395,6 +614,27 @@ Timemanager
   height: 100%;
   width:100%;
 }
+/* ATTRIBUTE DOCK TABS (AT THE TOP) */
+#attributeLayers-tabs > li > a {
+  padding: 5px;
+  margin: 5px;
+}
+#attributeLayers-tabs > li.active > a,
+#attributeLayers-tabs > li > a:hover {
+  border: 1px solid transparent;
+  border-radius: 5px;
+  background-color: var(--color-contrasted-elements);
+  color: var(--color-contrasted-text);
+}
+/* The first "Data" tab must not be displayed as a button */
+#nav-tab-attribute-summary a,
+#nav-tab-attribute-summary a:hover,
+#nav-tab-attribute-summary.active a {
+  color: var(--color-text-primary);
+  background-color: transparent;
+  background: none;
+  border: none;
+}
 
 #attribute-table-panel h3 {
   background: none repeat scroll 0% 0% #2B2B2B;
@@ -432,8 +672,31 @@ Timemanager
 .attributeLayers-layer-div span.attribute-layer-msg.failure {
   color:red;
 }
+/* Child attribute tables tabs buttons */
+.tabbable.attribute-layer-child-content ul li a {
+  cursor: pointer;
+  padding: 5px;
+  margin: 5px;
+  /* font-size: 1em; */
+  border: 1px solid transparent;
+  border-radius: 5px;
+  background-color: var(--color-contrasted-elements-light);
+  color: var(--color-text-primary);
+  box-shadow: none;
+  text-shadow: none;
+}
+.tabbable.attribute-layer-child-content ul li a:hover,
+.tabbable.attribute-layer-child-content ul li.active a {
+  background-color: var(--color-contrasted-elements);
+  color: var(--color-contrasted-text);
+}
 
 
+/* RIGHT-DOCK */
+#right-dock {
+  border-left: 1px solid var(--color-contrasted-elements);
+}
+
 .alert-info {
   background-color : #3a3c3d;
   border-color : #fbfbfb;
@@ -485,6 +748,39 @@ Timemanager
   background-position: 0 -96px;
 }
 
+
+
+/* POPUP */
+/* Background of the popup div */
+#dock div.lizmapPopupDiv,
+#mini-dock div.lizmapPopupDiv,
+#right-dock div.lizmapPopupDiv,
+#bottom-dock div.lizmapPopupDiv {
+  background-color: var(--color-background-primary-content) !important;
+}
+/* Popup layer title */
+h4.lizmapPopupTitle {
+  color: var(--color-text-primary-content) !important;
+}
+.lizmapPopup.olPopup .lizmapPopupContent h4,
+#map-content .lizmapPopupContent h4,
+#popupcontent .lizmapPopupContent h4 {
+  color: var(--color-text-primary-content) !important;
+}
+/* Popup content */
+.lizmapPopup.olPopup .lizmapPopupTable,
+#map-content .lizmapPopupTable,
+#popupcontent .lizmapPopupTable,
+#liz-atlas-item-detail .lizmapPopupTable {
+  width: 100%;
+}
+#dock div.lizmapPopupDiv,
+#mini-dock div.lizmapPopupDiv,
+#right-dock div.lizmapPopupDiv,
+#bottom-dock div.lizmapPopupDiv {
+	padding: inherit;
+}
+
 /*Popup OpenLayers*/
 .lizmapPopup.olPopup,
 #map-content .lizmapPopup{
@@ -496,8 +792,8 @@ Timemanager
 
 .lizmapPopup.olPopup .lizmapPopupContent h4,
 #map-content .lizmapPopupContent h4{
-  color : white !important;
-  border-bottom: 1px dashed white;
+  color: var(--color-text-primary-content) !important;
+  border: none;
 }
 /*
 .lizmapPopup.olPopup .lizmapPopupTable,
@@ -514,9 +810,64 @@ Timemanager
 #map-content .lizmapPopupTable th.left{
   border-right: 1px solid #C9C9C9 !important;
 }
+/* Popup title of children popup & dataviz plots */
+.lizmapPopup.olPopup .lizmapPopupDiv .lizmapPopupChildren h4,
+#map-content .lizmapPopupDiv .lizmapPopupChildren h4,
+#popupcontent .lizmapPopupDiv .lizmapPopupChildren h4,
+.lizmapPopupChildren h4
+{
+  border-bottom: 1px solid lightgray;
+  color: var(--color-text-primary-content) !important;
+  margin: 0px;
+  font-size: 0.9em;
+  padding: 5px
+}
 
-#edition-modal form {
-  margin: 0;
+/* Popup tables */
+.lizmapPopup.olPopup .lizmapPopupTable,
+#map-content .lizmapPopupTable,
+#popupcontent .lizmapPopupTable,
+#liz-atlas-item-detail .lizmapPopupTable,
+div.attribute-layer-feature-panel .lizmapPopupTable
+{
+  background-color: var(--color-background-primary-content);
+  border: 1px solid var(--color-contrasted-elements);
+}
+
+.lizmapPopup.olPopup .lizmapPopupTable thead,
+#map-content .lizmapPopupTable thead,
+#popupcontent .lizmapPopupTable thead,
+#liz-atlas-item-detail .lizmapPopupTable thead,
+div.attribute-layer-feature-panel .lizmapPopupTable thead
+{
+  color: var(--color-contrasted-text);
+  background-color: var(--color-contrasted-elements);
+}
+
+.lizmapPopup.olPopup .lizmapPopupTable th,
+#map-content .lizmapPopupTable th,
+#popupcontent .lizmapPopupTable th,
+#liz-atlas-item-detail .lizmapPopupTable th,
+.lizmapPopup.olPopup .lizmapPopupTable td,
+#map-content .lizmapPopupTable td,
+#popupcontent .lizmapPopupTable td,
+#liz-atlas-item-detail .lizmapPopupTable td,
+div.attribute-layer-feature-panel .lizmapPopupTable td
+{
+  border-right: 1px solid var(--color-contrasted-elements);
+  border-left: 1px solid var(--color-contrasted-elements);
+}
+
+
+
+/* Feature toolbar */
+lizmap-feature-toolbar div.feature-toolbar {
+  margin-bottom: 3px;
+}
+lizmap-feature-toolbar button.btn:hover,
+.attribute-layer-action-bar button.btn:not(.dropdown-toggle):hover {
+  background-image: none;
+  background-color: var(--color-contrasted-elements);
 }
 
 /*dialog wait*/
@@ -550,3 +901,108 @@ Timemanager
 #home #projects h2 {
   color: white;
 }
+
+/* EDITING FORMS */
+#edition-modal form {
+  margin: 0;
+}
+edition-form-container > div > h3 {
+  font-size: 1.5em;
+}
+.edition-tabs .nav-pills > li > a {
+  background-image: none;
+  background-color: var(--color-contrasted-elements-light);
+  color: var(--color-text-primary);
+}
+.edition-tabs .nav-pills > li > a:hover,
+.edition-tabs .nav-pills > li.active > a,
+.edition-tabs .nav-pills > .active > a,
+.edition-tabs .nav-pills > .active > a:hover,
+.edition-tabs .nav-pills > .active > a:focus {
+  background-color: var(--color-contrasted-elements);
+  color: var(--color-contrasted-text);
+}
+
+/* editing forms tabs */
+#edition ul.nav-tabs {
+  border-bottom: 1px solid var(--color-contrasted-elements);
+}
+#edition .nav-tabs > li > a {
+  color: var(--color-text-primary);
+  padding: 5px;
+  border: none;
+}
+#edition .nav > li > a:hover,
+#edition .nav > li > a:focus {
+  text-decoration: none;
+}
+#edition .nav-tabs > li > a:hover,
+#edition .nav-tabs > li > a:focus {
+  background: none;
+  border: none;
+  border-bottom: 3px solid var(--color-contrasted-elements);
+  color: var(--color-text-primary);
+  cursor: pointer;
+}
+
+#edition .nav-tabs > li.active > a,
+#edition .nav-tabs > li.active > a:hover,
+#edition .nav-tabs > li.active > a:focus {
+  background: none;
+  border: none;
+  border-bottom: 3px solid var(--color-contrasted-elements);
+  color: var(--color-text-primary);
+  cursor: auto;
+}
+#edition div.tab-pane {
+  border-left: 1px solid var(--color-contrasted-elements);
+  border-right: 1px solid var(--color-contrasted-elements);
+  border-bottom: 1px solid var(--color-contrasted-elements);
+  padding: 5px;
+  padding-bottom: 10px;
+  margin-bottom: 5px;
+}
+#edition div.tab-pane.attribute-layer-child-content {
+  border: none;
+}
+#edition #tabform {
+  border: none;
+}
+
+#edition legend {
+  color: var(--color-text-primary);
+  border-bottom: none;
+  padding: 5px;
+  width: unset;
+  max-width: 100%;
+  margin-bottom: 0px;
+}
+
+#edition fieldset {
+  padding: 10px;
+  padding-top: 0px;
+  margin: 0px 5px;
+  border: 1px solid var(--color-contrasted-elements-light);
+  border-radius: 5px;
+  background: rgba(255, 255, 255, 0.2);
+}
+
+
+/* ATLAS */
+/* White background for Atlas content */
+#liz-atlas-item-detail {
+  background-color: var(--color-background-primary-content);
+  color: var(--color-text-primary-content)
+}
+/* Atlas tool layer abstract */
+#liz-atlas-item-layer-abstract {
+  color: var(--color-text-primary-content);
+}
+
+
+/* DATAVIZ */
+/* MUST BE SET IN DATAVIZ.CSS FILE */
+/* Dataviz plot title */
+#dataviz .text {
+  color: var(--color-text-primary);
+}