Adding styling refactoring, moving after to other branch the CSS part

22 files changed, 628 insertions, 192 deletions

diff --git a/NEWS.md b/NEWS.md
index a52a4cbfb..4906290f7 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -676,9 +676,9 @@ User interface customization
     reconfigured by users. Only one is currently supported (filter editor).
   • The contents of the menus can be configured by customizing the menus.xml
     file.
-  • Toolbar contents for the command bar (commands-toolbar.ui), the snap bar
-    (snap-toolbar.ui), the tool controls bars for each tool
-    (select-toolbar.ui), the toolbox (tool-toolbar.ui) is now configurable.
+  • Toolbar contents for the command bar (toolbar-commands.ui), the snap bar
+    (toolbar-snap.ui), the tool controls bars for each tool
+    (toolbar-select.ui), the toolbox (tool-toolbar.ui) is now configurable.
   • The file keybindings.rc allows you to... (TODO: do what? What does it do in
     comparison to keys.xml? Seems to not work at all... seems to be ancient.
     Can be deleted?)
diff --git a/share/icons/hicolor/scalable/actions/draw-star-ouline.svg b/share/icons/hicolor/scalable/actions/draw-star-ouline.svg
new file mode 100644
index 000000000..f348a88c6
--- /dev/null
+++ b/share/icons/hicolor/scalable/actions/draw-star-ouline.svg
@@ -0,0 +1,133 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg1"
+   width="18.268586"
+   height="17.84485"
+   version="1.1"
+   sodipodi:docname="draw-star-ouline.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata4103">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     id="base"
+     showgrid="true"
+     inkscape:zoom="37.406242"
+     inkscape:cx="9.6579675"
+     inkscape:cy="9.7321419"
+     inkscape:window-width="1280"
+     inkscape:window-height="960"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1">
+    <inkscape:grid
+       id="GridFromPre046Settings"
+       type="xygrid"
+       originx="0pt"
+       originy="0pt"
+       spacingx="1pt"
+       spacingy="1pt"
+       color="#3f3fff"
+       empcolor="#3f3fff"
+       opacity="0.15"
+       empopacity="0.38"
+       empspacing="5" />
+  </sodipodi:namedview>
+  <defs
+     id="defs3">
+    <linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient6625-4"
+       inkscape:collect="always"
+       x1="109.2829"
+       x2="99.93163"
+       xlink:href="#linearGradient6679"
+       y1="199.9722"
+       y2="190.2852" />
+    <linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient6644"
+       inkscape:collect="always"
+       x1="98.53114"
+       x2="101.695"
+       xlink:href="#linearGradient5704"
+       y1="191.0442"
+       y2="195.8891" />
+    <linearGradient
+       id="linearGradient6679">
+      <stop
+         id="stop6681"
+         offset="0"
+         style="stop-color:#ffeb74;stop-opacity:1" />
+      <stop
+         id="stop6683"
+         offset="1"
+         style="stop-color:#ffffff;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient5704">
+      <stop
+         id="stop5706"
+         offset="0"
+         style="stop-color:#5a5a5a;stop-opacity:1" />
+      <stop
+         id="stop5708"
+         offset="1"
+         style="stop-color:#000000;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <g
+     id="draw-star"
+     transform="matrix(1,0,0,1,-455.80047,-179.155581)">
+    <path
+       d="m 109.1123,194.2458 -3.4876,2.2071 -0.019,4.1272 -3.1768,-2.6349 -3.93097,1.2577 1.52427,-3.8355 -2.41085,-3.35 4.11875,0.2644 2.441,-3.328 1.0213,3.9989 z"
+       id="path2669"
+       inkscape:flatsided="false"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       sodipodi:arg1="-0.122765"
+       sodipodi:arg2="0.5055535"
+       sodipodi:cx="103"
+       sodipodi:cy="195"
+       sodipodi:r1="6.158659"
+       sodipodi:r2="3"
+       sodipodi:sides="5"
+       sodipodi:type="star"
+       style="color:#000000;fill:#fffbc5;fill-rule:evenodd;stroke:url(#linearGradient6644);stroke-width:0.6782926;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0"
+       transform="matrix(1.492696,-0.0409829,0.0399483,1.455015,302.9314,-91.01218)" />
+    <path
+       d="m 107.5277,194.4445 -2.569,1.6153 -0.031,3.0747 -2.3302,-1.9442 -2.93379,0.9204 1.12889,-2.8168 -1.78192,-2.5058 3.02782,0.2032 1.8325,-2.4691 0.7424,2.9425 z"
+       id="path5971"
+       inkscape:flatsided="false"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       sodipodi:arg1="-0.1220787"
+       sodipodi:arg2="0.4959725"
+       sodipodi:cx="103"
+       sodipodi:cy="195"
+       sodipodi:r1="4.561672"
+       sodipodi:r2="2.227037"
+       sodipodi:sides="5"
+       sodipodi:type="star"
+       style="color:#000000;fill:#ffffff;fill-rule:evenodd;stroke:url(#linearGradient6625-4);stroke-width:0.6782926;stroke-linecap:round;stroke-miterlimit:80"
+       transform="matrix(1.492696,-0.0409829,0.0399483,1.455015,302.9314,-91.01218)" />
+  </g>
+</svg>
diff --git a/share/icons/hicolor/symbolic/actions/draw-star-outline-symbolic.svg b/share/icons/hicolor/symbolic/actions/draw-star-outline-symbolic.svg
new file mode 100644
index 000000000..5aa4591a1
--- /dev/null
+++ b/share/icons/hicolor/symbolic/actions/draw-star-outline-symbolic.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) and export_objects.py -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg1"
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   sodipodi:docname="draw-star-outline-symbolic.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     id="namedview"
+     showgrid="true"
+     inkscape:zoom="27.166187"
+     inkscape:cx="9.3879532"
+     inkscape:cy="7.3166036"
+     inkscape:window-width="1280"
+     inkscape:window-height="960"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1"
+     inkscape:snap-global="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid" />
+  </sodipodi:namedview>
+  <g
+     transform="matrix(1.000006,0,0,1.002537,-348.99376,-684.09339)"
+     id="draw-star-outline"
+     inkscape:label="00174">
+    <path
+       inkscape:connector-curvature="0"
+       id="rect19962"
+       d="m 349,682.36218 h 15.97919 v 15.9375 H 349 Z"
+       style="opacity:0;fill:none" />
+    <path
+       style="opacity:1;stroke-width:0.98073399"
+       d="M 7.9609375 0 L 5.7460938 5.4824219 L 0.37695312 6.1855469 L 4.3945312 10.181641 L 3.3417969 16.054688 L 8.0449219 13.064453 L 12.785156 15.990234 L 12.669922 15.380859 L 11.658203 10.130859 L 15.625 6.078125 L 10.244141 5.4511719 L 7.9609375 0 z M 7.9726562 2.5019531 L 9.578125 6.328125 L 13.402344 6.7714844 L 10.580078 9.65625 L 11.376953 13.787109 L 8.0351562 11.724609 L 4.7207031 13.833984 L 5.4628906 9.6914062 L 2.6015625 6.8476562 L 6.421875 6.3496094 L 7.9726562 2.5019531 z "
+       transform="matrix(0.999994,0,0,0.99746942,348.99167,682.36224)"
+       id="path822" />
+  </g>
+</svg>
diff --git a/share/ui/filter-editor.glade b/share/ui/dialog-filter-editor.ui
index 908e0d7e3..908e0d7e3 100644
--- a/share/ui/filter-editor.glade
+++ b/share/ui/dialog-filter-editor.ui
diff --git a/share/ui/lpe-selector-item.ui b/share/ui/dialog-livepatheffect-add-effect.ui
index 98e35fa92..b423a32f4 100644
--- a/share/ui/lpe-selector-item.ui
+++ b/share/ui/dialog-livepatheffect-add-effect.ui
@@ -2,7 +2,7 @@
 <!-- Generated with glade 3.22.1 -->
 <interface>
   <requires lib="gtk+" version="3.20"/>
-  <object class="GtkBox" id="LPESelectorItem">
+  <object class="GtkBox" id="LPESelectorEffect">
     <property name="width_request">200</property>
     <property name="visible">True</property>
     <property name="can_focus">True</property>
@@ -71,7 +71,7 @@
             <property name="can_focus">False</property>
             <property name="halign">end</property>
             <property name="pixel_size">30</property>
-            <property name="icon_name">draw-star</property>
+            <property name="icon_name">draw-star-outline</property>
             <property name="icon_size">2</property>
             <style>
               <class name="fab"/>
@@ -112,7 +112,7 @@
       </packing>
     </child>
     <style>
-      <class name="lpeselectoritem"/>
+      <class name="lpeselectoreffect"/>
     </style>
   </object>
 </interface>
diff --git a/share/ui/dialog-livepatheffect-add.ui b/share/ui/dialog-livepatheffect-add.ui
new file mode 100644
index 000000000..3bee689a5
--- /dev/null
+++ b/share/ui/dialog-livepatheffect-add.ui
@@ -0,0 +1,140 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.22.1 -->
+<interface>
+  <requires lib="gtk+" version="3.20"/>
+  <object class="GtkDialog" id="LPEDialogSelector">
+    <property name="name">LPEDialogSelector</property>
+    <property name="height_request">500</property>
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="title" translatable="yes">Live Path Effect Selector</property>
+    <property name="modal">True</property>
+    <property name="window_position">center-on-parent</property>
+    <property name="destroy_with_parent">True</property>
+    <property name="type_hint">dialog</property>
+    <property name="gravity">center</property>
+    <child>
+      <placeholder/>
+    </child>
+    <child internal-child="vbox">
+      <object class="GtkBox">
+        <property name="can_focus">False</property>
+        <property name="orientation">vertical</property>
+        <property name="spacing">2</property>
+        <child internal-child="action_area">
+          <object class="GtkButtonBox">
+            <property name="can_focus">False</property>
+            <property name="layout_style">end</property>
+            <child>
+              <placeholder/>
+            </child>
+            <child>
+              <placeholder/>
+            </child>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">False</property>
+            <property name="position">0</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkBox" id="LPESelector">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="valign">start</property>
+            <property name="orientation">vertical</property>
+            <property name="baseline_position">top</property>
+            <child>
+              <object class="GtkSearchBar">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="search_mode_enabled">True</property>
+                <child>
+                  <object class="GtkSearchEntry" id="LPEFilter">
+                    <property name="width_request">400</property>
+                    <property name="visible">True</property>
+                    <property name="can_focus">True</property>
+                    <property name="primary_icon_name">edit-find-symbolic</property>
+                    <property name="primary_icon_activatable">False</property>
+                    <property name="primary_icon_sensitive">False</property>
+                    <style>
+                      <class name="iconymbolic"/>
+                    </style>
+                  </object>
+                </child>
+                <style>
+                  <class name="searchbar"/>
+                </style>
+              </object>
+              <packing>
+                <property name="expand">True</property>
+                <property name="fill">True</property>
+                <property name="position">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="LPEInfo">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label" translatable="yes">Message</property>
+                <property name="justify">center</property>
+                <property name="ellipsize">end</property>
+                <style>
+                  <class name="lpeinfo"/>
+                </style>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">1</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkScrolledWindow">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="hscrollbar_policy">never</property>
+                <property name="shadow_type">in</property>
+                <property name="min_content_width">800</property>
+                <property name="min_content_height">10</property>
+                <property name="propagate_natural_height">True</property>
+                <child>
+                  <object class="GtkViewport">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <child>
+                      <object class="GtkFlowBox" id="LPESelectorFlowBox">
+                        <property name="name">lpeflow</property>
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="no_show_all">True</property>
+                        <property name="column_spacing">10</property>
+                        <property name="row_spacing">10</property>
+                        <property name="min_children_per_line">3</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">False</property>
+                <property name="position">2</property>
+              </packing>
+            </child>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">1</property>
+          </packing>
+        </child>
+      </object>
+    </child>
+    <style>
+      <class name="iconsymbolic"/>
+      <class name="colordefault"/>
+    </style>
+  </object>
+</interface>
diff --git a/share/ui/lpe-selector.ui b/share/ui/lpe-selector.ui
deleted file mode 100644
index 1c88c9e93..000000000
--- a/share/ui/lpe-selector.ui
+++ /dev/null
@@ -1,88 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.22.1 -->
-<interface>
-  <requires lib="gtk+" version="3.20"/>
-  <object class="GtkBox" id="LPESelector">
-    <property name="visible">True</property>
-    <property name="can_focus">False</property>
-    <property name="valign">start</property>
-    <property name="orientation">vertical</property>
-    <property name="baseline_position">top</property>
-    <child>
-      <object class="GtkSearchBar">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="has_focus">True</property>
-        <property name="search_mode_enabled">True</property>
-        <child>
-          <object class="GtkSearchEntry" id="LPEFilter">
-            <property name="width_request">400</property>
-            <property name="visible">True</property>
-            <property name="can_focus">True</property>
-            <property name="primary_icon_name">edit-find-symbolic</property>
-            <property name="primary_icon_activatable">False</property>
-            <property name="primary_icon_sensitive">False</property>
-          </object>
-        </child>
-        <style>
-          <class name="searchbar"/>
-        </style>
-      </object>
-      <packing>
-        <property name="expand">True</property>
-        <property name="fill">True</property>
-        <property name="position">0</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkLabel" id="LPEInfo">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="label" translatable="yes">Message</property>
-        <property name="justify">center</property>
-        <property name="ellipsize">end</property>
-        <style>
-          <class name="lpeinfo"/>
-        </style>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">True</property>
-        <property name="position">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkScrolledWindow">
-        <property name="visible">True</property>
-        <property name="can_focus">True</property>
-        <property name="hscrollbar_policy">never</property>
-        <property name="shadow_type">in</property>
-        <property name="min_content_width">800</property>
-        <property name="min_content_height">10</property>
-        <property name="propagate_natural_height">True</property>
-        <child>
-          <object class="GtkViewport">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <child>
-              <object class="GtkFlowBox" id="LPESelectorFlowBox">
-                <property name="name">lpeflow</property>
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="no_show_all">True</property>
-                <property name="column_spacing">10</property>
-                <property name="row_spacing">10</property>
-                <property name="min_children_per_line">3</property>
-              </object>
-            </child>
-          </object>
-        </child>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">False</property>
-        <property name="position">2</property>
-      </packing>
-    </child>
-  </object>
-</interface>
diff --git a/share/ui/style.css b/share/ui/style.css
index 6598d5e69..8063477bf 100644
--- a/share/ui/style.css
+++ b/share/ui/style.css
@@ -26,7 +26,6 @@
  *
  */
 
-
 /* Our own custom shades... better not to use.
  * Lightest to darkest based on linear rgb.
  */
@@ -41,6 +40,121 @@
 @define-color bg_color7  #636363;
 @define-color bg_color8  #000000; /* Black */
 
+ /* Inkscape CSS helper
+  * to add a class to a widget do some thing like
+  * widget->get_style_context()->add_class("mycoolclass");
+  * we define a bunch of helper CSS styles
+  * Ecah Inkscape desktop has a class in top level window
+  * call "dark" so you can style using 2 clases with or without 
+  * "dark" by this way you can always know if the UI is in dark mode
+  * Also added some helper clases:
+  * ::::::: Color based 
+  * ::::::: apply to colors
+  * ::::::: scope widget and all his childs
+  * ".colordefault" use default window color
+  * ".colorinverse" invert window colors
+  * ".colorbright" force bright colors no matter the UI is dark or bright
+  * ".colordark" same but dark
+  * ::::::: Background based 
+  * ::::::: apply to backgrounds
+  * ::::::: scope widget and all his childs
+  * ".backgrounddefault" use default window color
+  * ".backgroundinverse" invert window colors
+  * ".backgroundbright" force bright colors no matter the UI is dark or bright
+  * ".backgrounddark" same but dark
+  * :::::::: Icon Based.
+  * :::::::: apply to color (foreground)
+  * :::::::: scope widget and all nested images
+  * ".iconsymbolic" Force icon symbolic
+  * ".iconregular" Force colorfull icons
+  * ".iconcolordefault" Theme color default
+  * ".iconcolorinverse" Inverse color from theme
+  * ".iconcolorbright, Force clear icon
+  * ".iconcolordark" Force dark icon
+  * ".iconcolornamed" Icon in prefs selected color;
+  * ".iconcolornamedinverse" Icon in inverse color from prefs"
+  * :::::::: Combo box.
+  * "..combobright" Combo bright
+  */
+
+.colordefault, 
+.colordefault *{ 
+    color: @theme_fg_color; 
+}
+
+.colorinverse, 
+.colorinverse *{ 
+    color: @theme_bg_color; 
+}
+.colorbright,
+.colorbright *{
+    color: @theme_fg_color; 
+}
+.dark .colorbright, 
+.dark .colorbright *{
+    color: @theme_bg_color; 
+}
+.colordark, 
+.colordark *{
+    color: @theme_bg_color; 
+}
+.dark .colordark,
+.dark .colordark *{
+    color: @theme_fg_color;
+}
+.backgrounddefault, 
+.backgrounddefault *{ 
+    background-color: @theme_bg_color; 
+    background-image:image(@theme_bg_color);
+}
+.backgroundinverse, 
+.backgroundinverse *{ 
+    background-color: @theme_fg_color; 
+    background-image:image(@theme_fg_color);
+}
+.backgroundbright,
+.backgroundbright *{
+    background-color: @theme_bg_color;
+    background-image:image(@theme_bg_color);
+}
+.dark .backgroundbright, 
+.dark .backgroundbright *{
+    background-color: @theme_fg_color;
+    background-image:image(@theme_fg_color);
+}
+.backgrounddark, 
+.backgrounddark *{
+    background-color: @theme_fg_color;
+    background-image:image(@theme_fg_color);
+}
+.dark .backgrounddark,
+.dark .backgrounddark *{
+    background-color: @theme_bg_color;
+    background-image:image(@theme_bg_color);
+}
+.iconsymbolic,
+.iconsymbolic image{
+    -gtk-icon-style: symbolic;
+}
+.iconregular,
+.iconregular image{
+    -gtk-icon-style: regular;
+}
+
+.combobright *{
+    color: @theme_fg_color; 
+    background-color: @theme_bg_color;
+    background-image:image(@theme_bg_color);
+    border-radius:4px;
+}
+.dark .combobright *{
+    color: @theme_bg_color; 
+    background-color: @theme_fg_color;
+    background-image:image(@theme_fg_color);
+    border-radius:4px;
+}
+
+
 /* 'GtkWidget' for Gtk  <= 3.18   */
 /* 'widget'    for Gtk  <= 3.19.2 */   
 GtkWidget, widget {
@@ -78,10 +192,10 @@ spinbutton undershoot {
 .lpeinfo{
     font-size:16px;
     padding:20px;
-    }
-    #lpedialogselector,
-    #lpedialogselector .frame,
-    #lpedialogselector .searchbar {
+}
+#lpedialogselector,
+#lpedialogselector .frame,
+#lpedialogselector .searchbar {
     border-bottom-width:0;
     border-top-width:0;
     outline-width:0;
@@ -96,22 +210,18 @@ spinbutton undershoot {
     margin:10px;
     margin-bottom:30px;
     padding-bottom:10px;
-    background-color:@theme_bg_color;
-    color:@theme_fg_color;
 }
 
 #lpeflow GtkFlowBoxChild.lpeactive,
 #lpeflow flowboxchild.lpeactive{
-    background-color:@theme_fg_color;
-    color:@theme_bg_color;
     margin-bottom:0px;
     padding-bottom:10px;
     outline:none;
 }
 
-#lpeflow GtkFlowBoxChild.lpeactive *,
-#lpeflow flowboxchild.lpeactive *{
-    color:inherit;
+
+#LPEDialogSelector .frame{
+    border-width:0;
 }
 
 SPRuler {
@@ -217,15 +327,3 @@ combobox window.popup scrolledwindow treeview separator {
 	padding : 0 ;
 	outline-style : none;
 }
-
-
-
-#symbolsView,
-#markerCombo button,
-#markerCombo menu,
-#dashCombo button,
-#dashCombo menu{
-    background-image:image(rgb(230,230,230));
-    color:rgb(0,0,0);
-}
-
diff --git a/share/ui/commands-toolbar.ui b/share/ui/toolbar-commands.ui
index c2b1ed965..c2b1ed965 100644
--- a/share/ui/commands-toolbar.ui
+++ b/share/ui/toolbar-commands.ui
diff --git a/share/ui/select-toolbar.ui b/share/ui/toolbar-select.ui
index 1c8c1efc3..1c8c1efc3 100644
--- a/share/ui/select-toolbar.ui
+++ b/share/ui/toolbar-select.ui
diff --git a/share/ui/snap-toolbar.ui b/share/ui/toolbar-snap.ui
index 90fa6bd61..90fa6bd61 100644
--- a/share/ui/snap-toolbar.ui
+++ b/share/ui/toolbar-snap.ui
diff --git a/share/ui/tool-toolbar.ui b/share/ui/toolbar-tool.ui
index a5dedad56..a5dedad56 100644
--- a/share/ui/tool-toolbar.ui
+++ b/share/ui/toolbar-tool.ui
diff --git a/src/inkscape.cpp b/src/inkscape.cpp
index 1418f5c3b..baefd6b9f 100644
--- a/src/inkscape.cpp
+++ b/src/inkscape.cpp
@@ -378,7 +378,15 @@ Application::add_gtk_css()
     Inkscape::Preferences *prefs = Inkscape::Preferences::get();
     auto provider = Gtk::CssProvider::create();
     Glib::ustring css_str = "";
+    gchar colornamed[64];
+    gchar colornamed_inverse[64];
+    int colorset = prefs->getInt("/theme/symbolicColor", 0x000000ff);
+    sp_svg_write_color(colornamed, sizeof(colornamed), colorset);
+    // Use in case the special widgets have inverse theme background and symbolic
+    int colorset_inverse = colorset ^ 0xffffff00;
+    sp_svg_write_color(colornamed_inverse, sizeof(colornamed_inverse), colorset_inverse);
     if (prefs->getBool("/theme/symbolicIcons", false)) {
+<<<<<<< HEAD
         int colorset = prefs->getInt("/theme/symbolicColor", 0x000000ff);
         gchar colornamed[64];
         sp_svg_write_color(colornamed, sizeof(colornamed), colorset);
@@ -401,12 +409,47 @@ Application::add_gtk_css()
             css_str += ";}";
             css_str += "#iconregular{ -gtk-icon-style: regular;}";
         }
+=======
+        css_str += "*{ -gtk-icon-style: symbolic;}";
+        css_str += "image{ color:";
+        css_str += colornamed;
+        css_str += ";}";
+>>>>>>> Adding styling refactoring, moving after to other branch the CSS part
     } else {
         css_str += "*{-gtk-icon-style: regular;}";
     }
-    GtkSettings *settings = gtk_settings_get_default();
+    css_str += ".iconcolornamed, .iconcolornamed image{ color:";
+    css_str += colornamed;
+    css_str += ";}";
+    css_str += ".iconcolornamedinverse, .colornamedinverse image{ color:";
+    css_str += colornamed_inverse;
+    css_str += ";}";
     const gchar *gtk_font_name = "";
+    const gchar *gtkThemeName;
+    const gchar *gtkIconThemeName;
+    gboolean gtkApplicationPreferDarkTheme;
+    GtkSettings *settings = gtk_settings_get_default();
     if (settings) {
+        g_object_get(settings, "gtk-icon-theme-name", &gtkIconThemeName, NULL);
+        g_object_get(settings, "gtk-theme-name", &gtkThemeName, NULL);
+        g_object_get(settings, "gtk-application-prefer-dark-theme", &gtkApplicationPreferDarkTheme, NULL);
+        g_object_set(settings, "gtk-application-prefer-dark-theme",
+                        prefs->getBool("/theme/darkTheme", gtkApplicationPreferDarkTheme), NULL);
+        prefs->setString("/theme/defaultIconTheme", Glib::ustring(gtkIconThemeName));
+        if (prefs->getString("/theme/gtkTheme") != "") {
+            g_object_set(settings, "gtk-theme-name", prefs->getString("/theme/gtkTheme").c_str(), NULL);
+        }
+        else {
+            prefs->setString("/theme/gtkTheme", Glib::ustring(gtkThemeName));
+        }
+
+        Glib::ustring themeiconname = prefs->getString("/theme/iconTheme");
+        if (themeiconname != "") {
+            g_object_set(settings, "gtk-icon-theme-name", themeiconname.c_str(), NULL);
+        } 
+        else {
+            prefs->setString("/theme/iconTheme", Glib::ustring(gtkIconThemeName));
+        }
         g_object_get(settings, "gtk-font-name", &gtk_font_name, NULL);
     }
     if (!strncmp(gtk_font_name, "Cantarell", 9)) {
@@ -509,33 +552,6 @@ Application::Application(const char* argv, bool use_gui) :
         icon_theme->prepend_search_path(get_path_ustring(USER, ICONS));
         add_gtk_css();
         /* Load the preferences and menus */
-        GtkSettings *settings = gtk_settings_get_default();
-        if (settings) {
-            const gchar *gtkThemeName;
-            const gchar *gtkIconThemeName;
-            gboolean gtkApplicationPreferDarkTheme;
-            g_object_get(settings, "gtk-theme-name", &gtkThemeName, NULL);
-            g_object_get(settings, "gtk-icon-theme-name", &gtkIconThemeName, NULL);
-            g_object_get(settings, "gtk-application-prefer-dark-theme", &gtkApplicationPreferDarkTheme, NULL);
-            g_object_set(settings, "gtk-application-prefer-dark-theme",
-                         prefs->getBool("/theme/darkTheme", gtkApplicationPreferDarkTheme), NULL);
-            prefs->setString("/theme/defaultIconTheme", Glib::ustring(gtkIconThemeName));
-            if (prefs->getString("/theme/gtkTheme") != "") {
-                g_object_set(settings, "gtk-theme-name", prefs->getString("/theme/gtkTheme").c_str(), NULL);
-            }
-            else {
-                prefs->setString("/theme/gtkTheme", Glib::ustring(gtkThemeName));
-            }
-
-            Glib::ustring themeiconname = prefs->getString("/theme/iconTheme");
-            if (themeiconname != "") {
-                g_object_set(settings, "gtk-icon-theme-name", themeiconname.c_str(), NULL);
-            } 
-            else {
-                prefs->setString("/theme/iconTheme", Glib::ustring(gtkIconThemeName));
-            }
-        }
-
         load_menus();
         Inkscape::DeviceManager::getManager().loadConfig();
     }
diff --git a/src/ui/dialog/filter-editor.cpp b/src/ui/dialog/filter-editor.cpp
index 6ad9dca61..ba2c7357a 100644
--- a/src/ui/dialog/filter-editor.cpp
+++ b/src/ui/dialog/filter-editor.cpp
@@ -69,7 +69,7 @@ FilterEditorDialog::FilterEditorDialog() : UI::Widget::Panel("/dialogs/filtereff
 {
      
     const std::string req_widgets[] = {"FilterEditor", "FilterList", "FilterFERX", "FilterFERY", "FilterFERH", "FilterFERW", "FilterPreview", "FilterPrimitiveDescImage", "FilterPrimitiveList", "FilterPrimitiveDescText", "FilterPrimitiveAdd"};
-    Glib::ustring gladefile = get_filename(UIS, "filter-editor.glade");
+    Glib::ustring gladefile = get_filename(UIS, "dialog-filter-editor.ui");
     try {
         builder = Gtk::Builder::create_from_file(gladefile);
     } catch(const Glib::Error& ex) {
diff --git a/src/ui/dialog/inkscape-preferences.cpp b/src/ui/dialog/inkscape-preferences.cpp
index 6634ef170..158aeb617 100644
--- a/src/ui/dialog/inkscape-preferences.cpp
+++ b/src/ui/dialog/inkscape-preferences.cpp
@@ -43,6 +43,7 @@
 #include "selection.h"
 #include "shortcuts.h"
 #include "verbs.h"
+#include "inkscape-window.h"
 
 #include "display/canvas-grid.h"
 #include "display/nr-filter-gaussian.h"
@@ -59,6 +60,7 @@
 #include "svg/svg-color.h"
 #include "ui/interface.h"
 #include "ui/widget/style-swatch.h"
+#include "widgets/desktop-widget.h"
 
 #ifdef HAVE_ASPELL
 # include <aspell.h>
@@ -679,30 +681,34 @@ void InkscapePreferences::symbolicDefaultColor(){
 
 void InkscapePreferences::symbolicAddClass()
 {
+    using namespace Inkscape::IO::Resource;
     Inkscape::Preferences *prefs = Inkscape::Preferences::get();
     prefs->setBool("/theme/symbolicIconsDefaultColor", false);
     auto const screen = Gdk::Screen::get_default();
     auto provider = Gtk::CssProvider::create();
     Glib::ustring css_str = "";
+    
+    gchar colornamed[64];
+    gchar colornamed_inverse[64];
+    int colorset = prefs->getInt("/theme/symbolicColor", 0x000000ff);
+    sp_svg_write_color(colornamed, sizeof(colornamed), colorset);
+    // Use in case the special widgets have inverse theme background and symbolic
+    int colorset_inverse = colorset ^ 0xffffff00;
+    sp_svg_write_color(colornamed_inverse, sizeof(colornamed_inverse), colorset_inverse);
     if (prefs->getBool("/theme/symbolicIcons", false)) {
-        int colorset = prefs->getInt("/theme/symbolicColor", 0x000000ff);
-        gchar colornamed[64];
-        sp_svg_write_color(colornamed, sizeof(colornamed), colorset);
-        // Use in case the special widgets have inverse theme background and symbolic
-        int colorset_inverse = colorset ^ 0xffffff00;
-        gchar colornamed_inverse[64];
-        sp_svg_write_color(colornamed_inverse, sizeof(colornamed_inverse), colorset_inverse);
         css_str += "*{ -gtk-icon-style: symbolic;}";
         css_str += "image{ color:";
         css_str += colornamed;
         css_str += ";}";
-        css_str += "iconinverse{ color:";
-        css_str += colornamed_inverse;
-        css_str += ";}";
-        css_str += "iconregular{ -gtk-icon-style: regular;}";
     } else {
         css_str += "*{-gtk-icon-style: regular;}";
     }
+    css_str += ".iconcolornamed, .iconcolornamed image{ color:";
+    css_str += colornamed;
+    css_str += ";}";
+    css_str += ".iconcolornamedinverse, .colornamedinverse image{ color:";
+    css_str += colornamed_inverse;
+    css_str += ";}";
     // From 3.16, throws an error which we must catch.
     try {
         provider->load_from_data(css_str);
@@ -717,6 +723,29 @@ void InkscapePreferences::symbolicAddClass()
     }
 #endif
     Gtk::StyleContext::add_provider_for_screen(screen, provider, GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
+    // we want a tiny file with 3 or 4 lines, so we can load without removing context
+    // is more understandable than record previously applied
+    Glib::ustring style = get_filename(UIS, "style.css");
+    if (!style.empty()) {
+      auto provider = Gtk::CssProvider::create();
+
+      // From 3.16, throws an error which we must catch.
+      try {
+          provider->load_from_path (style);
+      }
+#if GTK_CHECK_VERSION(3,16,0)
+      // Gtk::CssProviderError not defined until 3.16.
+      catch (const Gtk::CssProviderError& ex)
+      {
+          g_critical("CSSProviderError::load_from_path(): failed to load '%s'\n(%s)",
+                 style.c_str(), ex.what().c_str());
+      }
+#else
+      catch (...)
+      {}
+#endif
+      Gtk::StyleContext::add_provider_for_screen (screen, provider, GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
+    }
 }
 void InkscapePreferences::themeChange()
 {
@@ -724,6 +753,29 @@ void InkscapePreferences::themeChange()
     g_object_set(gtk_settings_get_default(), "gtk-theme-name", prefs->getString("/theme/gtkTheme").c_str(), NULL);
     g_object_set(gtk_settings_get_default(), "gtk-application-prefer-dark-theme",
                  prefs->getBool("/theme/darkTheme", false), NULL);
+    gchar *gtkThemeName;
+    gboolean gtkApplicationPreferDarkTheme;
+    Gtk::Window *window = SP_ACTIVE_DESKTOP->getToplevel();
+    GtkSettings *settings = gtk_settings_get_default(); 
+    if (window && settings) {
+        g_object_get(settings, "gtk-theme-name", &gtkThemeName, NULL);
+        g_object_get(settings, "gtk-application-prefer-dark-theme", &gtkApplicationPreferDarkTheme, NULL);
+        bool dark = gtkApplicationPreferDarkTheme || Glib::ustring(gtkThemeName).find(":dark") != -1;
+        if (!dark) {
+			Glib::RefPtr<Gtk::StyleContext> stylecontext = window->get_style_context();
+			Gdk::RGBA rgba;
+			bool background_set = stylecontext->lookup_color("theme_bg_color", rgba);
+            if (background_set && rgba.get_red() + rgba.get_green() + rgba.get_blue() < 1.0) {
+                dark = true;
+            }
+        }
+        if (dark)
+        {
+            window->get_style_context()->add_class("dark");
+        } else {
+            window->get_style_context()->remove_class("dark");
+        }
+    }
 }
 
 void InkscapePreferences::initPageUI()
diff --git a/src/ui/dialog/livepatheffect-add.cpp b/src/ui/dialog/livepatheffect-add.cpp
index f930199cf..9eea4cccd 100644
--- a/src/ui/dialog/livepatheffect-add.cpp
+++ b/src/ui/dialog/livepatheffect-add.cpp
@@ -24,12 +24,10 @@ namespace UI {
 namespace Dialog {
 
 LivePathEffectAdd::LivePathEffectAdd() :
-    _add_button(_("_Add"), true),
-    _close_button(_("_Cancel"), true),
     converter(Inkscape::LivePathEffect::LPETypeConverter)
 {
-    const std::string req_widgets[] = {"LPESelector", "LPESelectorFlowBox"};
-    Glib::ustring gladefile = get_filename(Inkscape::IO::Resource::UIS, "lpe-selector.glade");
+    const std::string req_widgets[] = {"LPEDialogSelector", "LPESelector", "LPESelectorFlowBox"};
+    Glib::ustring gladefile = get_filename(Inkscape::IO::Resource::UIS, "dialog-livepatheffect-add.ui");
     try {
         _builder = Gtk::Builder::create_from_file(gladefile);
     } catch(const Glib::Error& ex) {
@@ -45,9 +43,7 @@ LivePathEffectAdd::LivePathEffectAdd() :
             return;
         }
     }
-    _builder->get_widget("LPESelector", _LPESelector);
-    auto mainVBox = get_content_area();
-    mainVBox->pack_start(*_LPESelector, true, true);
+    _builder->get_widget("LPEDialogSelector", _LPEDialogSelector);
     /**
      * Initialize Effect list
      */
@@ -55,8 +51,8 @@ LivePathEffectAdd::LivePathEffectAdd() :
     _builder->get_widget("LPEFilter", _LPEFilter);
     _builder->get_widget("LPEInfo", _LPEInfo);
     _LPEFilter->signal_search_changed().connect(sigc::mem_fun(*this, &LivePathEffectAdd::on_search));
-    const std::string le_widgets[] = {"LPESelectorItem", "LPEName","LPEDescription"};
-    Glib::ustring le_gladefile = get_filename(Inkscape::IO::Resource::UIS, "lpe-selector-item.glade");
+    const std::string le_widgets[] = {"LPESelectorEffect", "LPEName","LPEDescription"};
+    Glib::ustring le_gladefile = get_filename(Inkscape::IO::Resource::UIS, "dialog-livepatheffect-add-effect.ui");
     for(int i = 0; i < static_cast<int>(converter._length); ++i) {
         
         try {
@@ -90,16 +86,16 @@ LivePathEffectAdd::LivePathEffectAdd() :
         newid = "LPEIcon_" + Glib::ustring::format(i);
         (*LPEIcon).set_name(newid);
         (*LPEIcon).set_from_icon_name(converter.get_icon(data->id),Gtk::BuiltinIconSize(Gtk::ICON_SIZE_DIALOG));
-        Gtk::Box * LPESelectorItem;
-        _builder->get_widget("LPESelectorItem", LPESelectorItem);
-        newid = "LPESelectorItem" + Glib::ustring::format(i);
-        (*LPESelectorItem).set_name(newid);
-        _LPESelectorFlowBox->insert(*LPESelectorItem, i);
+        Gtk::Box * LPESelectorEffect;
+        _builder->get_widget("LPESelectorEffect", LPESelectorEffect);
+        newid = "LPESelectorEffect" + Glib::ustring::format(i);
+        (*LPESelectorEffect).set_name(newid);
+        _LPESelectorFlowBox->insert(*LPESelectorEffect, i);
     }
     _visiblelpe = _LPESelectorFlowBox->get_children().size();
     _LPESelectorFlowBox->signal_child_activated().connect(sigc::mem_fun(*this, &LivePathEffectAdd::on_activate));
-    set_title(_("Live Efects Selector"));
-    show_all_children();
+    _LPEDialogSelector->set_title(_("Live Efects Selector"));
+    _LPEDialogSelector->show_all_children();
     _LPEInfo->set_visible(false);
 }
 
@@ -107,6 +103,8 @@ void LivePathEffectAdd::on_activate(Gtk::FlowBoxChild *child){
     for (auto i:_LPESelectorFlowBox->get_children()) {
         Gtk::FlowBoxChild * leitem = dynamic_cast<Gtk::FlowBoxChild *>(i);
         leitem->get_style_context()->remove_class("lpeactive");
+        leitem->get_style_context()->remove_class("colorinverse");
+        leitem->get_style_context()->remove_class("backgroundinverse");
         Gtk::Box *box = dynamic_cast<Gtk::Box *>(leitem->get_child());
         if (box) {
             std::vector<Gtk::Widget*> contents = box->get_children();
@@ -117,6 +115,8 @@ void LivePathEffectAdd::on_activate(Gtk::FlowBoxChild *child){
         }
     }
     child->get_style_context()->add_class("lpeactive");
+    child->get_style_context()->add_class("colorinverse");
+    child->get_style_context()->add_class("backgroundinverse");
     child->show_all_children();
 }
 
@@ -170,7 +170,7 @@ void LivePathEffectAdd::onAdd()
 
 void LivePathEffectAdd::onClose()
 {
-    hide();
+    _LPEDialogSelector->hide();
 }
 
 void LivePathEffectAdd::onKeyEvent(GdkEventKey* evt)
@@ -186,12 +186,7 @@ void LivePathEffectAdd::onKeyEvent(GdkEventKey* evt)
 void LivePathEffectAdd::show(SPDesktop *desktop)
 {
     LivePathEffectAdd &dial = instance();
-    dial.set_modal(true);
-    //dial.set_decorated(false);
-    dial.set_name("lpedialogselector");
-    //desktop->setWindowTransient (dial.gobj());
-    dial.property_destroy_with_parent() = true;
-    dial.run();
+    dial._LPEDialogSelector->run();
 }
 
 } // namespace Dialog
diff --git a/src/ui/dialog/livepatheffect-add.h b/src/ui/dialog/livepatheffect-add.h
index 88aca58b2..17d46487a 100644
--- a/src/ui/dialog/livepatheffect-add.h
+++ b/src/ui/dialog/livepatheffect-add.h
@@ -70,8 +70,9 @@ protected:
 private:
     Gtk::Button       _add_button;
     Gtk::Button       _close_button;
+    Gtk::Dialog *_LPEDialogSelector;
     Glib::RefPtr<Gtk::Builder> _builder;
-    Gtk::FlowBox * _LPESelectorFlowBox;
+    Gtk::FlowBox *_LPESelectorFlowBox;
     Gtk::SearchEntry *_LPEFilter;
     Gtk::Label *_LPEInfo;
     Gtk::Box *_LPESelector;
diff --git a/src/ui/dialog/symbols.cpp b/src/ui/dialog/symbols.cpp
index fa76fc31a..06a76605b 100644
--- a/src/ui/dialog/symbols.cpp
+++ b/src/ui/dialog/symbols.cpp
@@ -186,7 +186,6 @@ SymbolsDialog::SymbolsDialog( gchar const* prefsPath ) :
   icon_view = new Gtk::IconView(static_cast<Glib::RefPtr<Gtk::TreeModel> >(store));
   //icon_view->set_text_column(  columns->symbol_id  );
   icon_view->set_tooltip_column( 1 );
-  icon_view->set_name( "symbolsView" );
   icon_view->set_pixbuf_column( columns->symbol_image );
   // Giving the iconview a small minimum size will help users understand
   // What the dialog does.
@@ -214,6 +213,8 @@ SymbolsDialog::SymbolsDialog( gchar const* prefsPath ) :
   overlay->set_hexpand();
   overlay->set_vexpand();
   overlay->add(* scroller);
+  overlay->get_style_context()->add_class("colorbright");
+  overlay->get_style_context()->add_class("backgroundbright");
   scroller->set_size_request(100, 250);
   table->attach(*Gtk::manage(overlay),0,row,2,1);
 
@@ -227,7 +228,7 @@ SymbolsDialog::SymbolsDialog( gchar const* prefsPath ) :
       iconsize = Gtk::IconSize().register_new(Glib::ustring("ICON_SIZE_DIALOG_EXTRA"), 110, 110);
   }
   overlay_icon = sp_get_icon_image("searching", iconsize);
-  overlay_icon->set_name("iconinverse");
+  overlay_icon->get_style_context()->add_class("iconsymbolic");
   overlay_icon->set_halign(Gtk::ALIGN_CENTER );
   overlay_icon->set_valign(Gtk::ALIGN_START );
   overlay_icon->set_margin_top(45);
diff --git a/src/ui/widget/dash-selector.cpp b/src/ui/widget/dash-selector.cpp
index 81e7881b6..ea5cc57d2 100644
--- a/src/ui/widget/dash-selector.cpp
+++ b/src/ui/widget/dash-selector.cpp
@@ -61,7 +61,7 @@ DashSelector::DashSelector()
     dash_combo.pack_start(image_renderer);
     dash_combo.set_cell_data_func(image_renderer, sigc::mem_fun(*this, &DashSelector::prepareImageRenderer));
     dash_combo.set_tooltip_text(_("Dash pattern"));
-    dash_combo.set_name("dashCombo");
+    dash_combo.get_style_context()->add_class("combobright");
     dash_combo.show();
     dash_combo.signal_changed().connect( sigc::mem_fun(*this, &DashSelector::on_selection) );
 
diff --git a/src/widgets/desktop-widget.cpp b/src/widgets/desktop-widget.cpp
index b7b9d2ce0..801e6bc41 100644
--- a/src/widgets/desktop-widget.cpp
+++ b/src/widgets/desktop-widget.cpp
@@ -693,7 +693,6 @@ void SPDesktopWidget::init( SPDesktopWidget *dtw )
         }
         overallTimer = nullptr;
     }
-
     // Ensure that ruler ranges are updated correctly whenever the canvas table
     // is resized
     dtw->_canvas_tbl_size_allocate_connection = dtw->_canvas_tbl->signal_size_allocate().connect(sigc::mem_fun(dtw, &SPDesktopWidget::canvas_tbl_size_allocate));
@@ -890,6 +889,28 @@ sp_desktop_widget_realize (GtkWidget *widget)
     dtw->desktop->set_display_area (d, 10);
 
     dtw->updateNamedview();
+    gchar *gtkThemeName;
+    gboolean gtkApplicationPreferDarkTheme;
+    GtkSettings *settings = gtk_settings_get_default();
+    Gtk::Window *window = SP_ACTIVE_DESKTOP->getToplevel();
+    if (settings && window) {
+        g_object_get(settings, "gtk-theme-name", &gtkThemeName, NULL);
+        g_object_get(settings, "gtk-application-prefer-dark-theme", &gtkApplicationPreferDarkTheme, NULL);
+        bool dark = gtkApplicationPreferDarkTheme || Glib::ustring(gtkThemeName).find(":dark") != -1;
+        if (!dark) {
+			Glib::RefPtr<Gtk::StyleContext> stylecontext = window->get_style_context();
+			Gdk::RGBA rgba;
+			bool background_set = stylecontext->lookup_color("theme_bg_color", rgba);
+            if (background_set && rgba.get_red() + rgba.get_green() + rgba.get_blue() < 1.0) {
+                dark = true;
+            }
+        }
+        if (dark) {
+            window->get_style_context()->add_class("dark");
+        } else {
+            window->get_style_context()->remove_class("dark");
+        }
+    }
 }
 
 /* This is just to provide access to common functionality from sp_desktop_widget_realize() above
diff --git a/src/widgets/stroke-marker-selector.cpp b/src/widgets/stroke-marker-selector.cpp
index 5bfebb799..095653cb3 100644
--- a/src/widgets/stroke-marker-selector.cpp
+++ b/src/widgets/stroke-marker-selector.cpp
@@ -52,7 +52,6 @@ MarkerComboBox::MarkerComboBox(gchar const *id, int l) :
     pack_start(image_renderer, false);
     set_cell_data_func(image_renderer, sigc::mem_fun(*this, &MarkerComboBox::prepareImageRenderer));
     gtk_combo_box_set_row_separator_func(GTK_COMBO_BOX(gobj()), MarkerComboBox::separator_cb, nullptr, nullptr);
-    gtk_widget_set_name(GTK_WIDGET(gobj()), "markerCombo");
     empty_image = sp_get_icon_image("no-marker", Gtk::ICON_SIZE_SMALL_TOOLBAR);
 
     sandbox = ink_markers_preview_doc ();
@@ -62,6 +61,7 @@ MarkerComboBox::MarkerComboBox(gchar const *id, int l) :
     modified_connection = doc->getDefs()->connectModified( sigc::hide(sigc::hide(sigc::bind(sigc::ptr_fun(&MarkerComboBox::handleDefsModified), this))) );
 
     init_combo();
+    this->get_style_context()->add_class("combobright");
 
     show();
 }
diff --git a/src/widgets/toolbox.cpp b/src/widgets/toolbox.cpp
index 3199e25ef..6e614f582 100644
--- a/src/widgets/toolbox.cpp
+++ b/src/widgets/toolbox.cpp
@@ -857,7 +857,7 @@ void ToolboxFactory::setOrientation(GtkWidget* toolbox, GtkOrientation orientati
 void setup_tool_toolbox(GtkWidget *toolbox, SPDesktop *desktop)
 {
     setupToolboxCommon( toolbox, desktop,
-            "tool-toolbar.ui",
+            "toolbar-tool.ui",
             "/ui/ToolToolbar",
             "/toolbox/tools/small");
 }
@@ -905,12 +905,12 @@ void setup_aux_toolbox(GtkWidget *toolbox, SPDesktop *desktop)
     Glib::RefPtr<Gtk::ActionGroup> mainActions = create_or_fetch_actions( desktop );
 
     // The UI Manager creates widgets based on the definitions in the
-    // "select-toolbar.ui" file.  This is only used with the "prep"
+    // "toolbar-select.ui" file.  This is only used with the "prep"
     // method of toolbar-creation
     GtkUIManager* mgr = gtk_ui_manager_new();
     GError *err = nullptr;
     gtk_ui_manager_insert_action_group( mgr, mainActions->gobj(), 0 );
-    Glib::ustring filename = get_filename(UIS, "select-toolbar.ui");
+    Glib::ustring filename = get_filename(UIS, "toolbar-select.ui");
     guint ret = gtk_ui_manager_add_ui_from_file(mgr, filename.c_str(), &err);
     if(err) {
       g_warning("Failed to load aux toolbar %s: %s", filename.c_str(), err->message);
@@ -1061,7 +1061,7 @@ void update_aux_toolbox(SPDesktop * /*desktop*/, ToolBase *eventcontext, GtkWidg
 void setup_commands_toolbox(GtkWidget *toolbox, SPDesktop *desktop)
 {
     setupToolboxCommon( toolbox, desktop,
-            "commands-toolbar.ui",
+            "toolbar-commands.ui",
             "/ui/CommandsToolbar",
             "/toolbox/small" );
 }
@@ -1375,7 +1375,7 @@ void setup_snap_toolbox(GtkWidget *toolbox, SPDesktop *desktop)
     }
 
     setupToolboxCommon( toolbox, desktop,
-            "snap-toolbar.ui",
+            "toolbar-snap.ui",
             "/ui/SnapToolbar",
             "/toolbox/secondary" );
 }