diff --git a/themes/Default/Makefile.am b/themes/Default/Makefile.am
index 11d6dbf8ff..01c385fc6f 100644
--- a/themes/Default/Makefile.am
+++ b/themes/Default/Makefile.am
@@ -1,7 +1,14 @@
## Process this file with automake to produce Makefile.in
themedatadir = $(gimpdatadir)/themes/Default
+themeuidir = $(themedatadir)/ui
-themedata_DATA = gimp.css gimp-dark.css common.css
+themedata_DATA = gimp.css gimp-dark.css common.css common-dark.css common-light.css
-EXTRA_DIST = $(themedata_DATA)
+themeui_DATA = \
+ ui/separator-handle-v.svg \
+ ui/separator-handle-h.svg \
+ ui/separator-handle-v-dark.svg \
+ ui/separator-handle-h-dark.svg
+
+EXTRA_DIST = $(themedata_DATA) $(themeui_DATA)
diff --git a/themes/Default/common-dark.css b/themes/Default/common-dark.css
new file mode 100644
index 0000000000..e27cba1f64
--- /dev/null
+++ b/themes/Default/common-dark.css
@@ -0,0 +1,23 @@
+/* The specific light theme interface styles for GIMP 3.0 */
+/* Theme specific colors are defined in gimp-dark.css */
+
+/* Hint for debugging themes:
+ * first enable the GTK inspector with
+ gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true
+ * then (after restarting GIMP) call it up with ctrl+shift+i
+ * or from GIMP's UI: File > Debug > Start GtkInspector
+ */
+
+@import url("common.css");
+
+/*
+ * Paned separator handles
+ */
+paned.horizontal > separator {
+ background-image: url("ui/separator-handle-v-dark.svg");
+}
+
+paned.vertical > separator {
+ background-image: url("ui/separator-handle-h-dark.svg");
+}
+
diff --git a/themes/Default/common-light.css b/themes/Default/common-light.css
new file mode 100644
index 0000000000..69002a4e57
--- /dev/null
+++ b/themes/Default/common-light.css
@@ -0,0 +1,22 @@
+/* The specific light theme interface styles for GIMP 3.0 */
+/* Theme specific colors are defined in gimp.css */
+
+/* Hint for debugging themes:
+ * first enable the GTK inspector with
+ gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true
+ * then (after restarting GIMP) call it up with ctrl+shift+i
+ * or from GIMP's UI: File > Debug > Start GtkInspector
+ */
+
+@import url("common.css");
+
+/*
+ * Paned separator handles
+ */
+paned.horizontal > separator {
+ background-image: url("ui/separator-handle-v.svg");
+}
+
+paned.vertical > separator {
+ background-image: url("ui/separator-handle-h.svg");
+}
diff --git a/themes/Default/common.css b/themes/Default/common.css
index 8d8b3fb540..d9c8c6f4ad 100644
--- a/themes/Default/common.css
+++ b/themes/Default/common.css
@@ -1,4 +1,11 @@
-/* A light theme for GIMP 3.0 */
+/* A set of interface style definitions common to light and dark theme variants for GIMP 3.0
+ * The specific dark and light interface styles are defined in common-light.css, common-dark.css */
+
+/* The specific dark and light colors are defined in gimp-dark.css, gimp.css */
+
+/* Do not import this file directly from gimp.css or gimp-dark.css files, you will miss light/dark theme specific styles.
+ * Do import matching common-[dark,light].css */
+
/* Hint for debugging themes:
* first enable the GTK inspector with
@@ -234,9 +241,12 @@ entry selection {
}
paned separator {
- background-image: none;
- color: @border-color;
- background-color: @border-color;
+ color: @border-color;
+ background-image: none;
+ background-color: @border-color;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: auto;
}
.view button {
diff --git a/themes/Default/gimp-dark.css b/themes/Default/gimp-dark.css
index cce30263d1..74ad85c3d0 100644
--- a/themes/Default/gimp-dark.css
+++ b/themes/Default/gimp-dark.css
@@ -58,4 +58,4 @@
@define-color ruler-color rgba(35,35,35,0.3);
-@import url("common.css");
+@import url("common-dark.css");
diff --git a/themes/Default/gimp.css b/themes/Default/gimp.css
index b62c6aab11..3299d59a95 100644
--- a/themes/Default/gimp.css
+++ b/themes/Default/gimp.css
@@ -58,4 +58,16 @@
@define-color ruler-color rgba(220,220,220,0.3);
-@import url("common.css");
+/*
+ * Paned separator handles
+ */
+paned.horizontal > separator {
+ background-image: url("ui/separator-handle-v.svg");
+}
+
+paned.vertical > separator {
+ background-image: url("ui/separator-handle-h.svg");
+}
+
+
+@import url("common-light.css");
diff --git a/themes/Default/meson.build b/themes/Default/meson.build
index 78dc3f62cf..8c2a46a794 100644
--- a/themes/Default/meson.build
+++ b/themes/Default/meson.build
@@ -1,2 +1,9 @@
-install_data([ 'gimp.css', 'gimp-dark.css', 'common.css' ],
+subdir('ui')
+
+files = [
+ 'gimp.css', 'gimp-dark.css',
+ 'common.css', 'common-dark.css', 'common-light.css'
+]
+
+install_data(files,
install_dir: gimpdatadir / 'themes' / 'Default')
diff --git a/themes/Default/ui/meson.build b/themes/Default/ui/meson.build
new file mode 100644
index 0000000000..88bdb70a34
--- /dev/null
+++ b/themes/Default/ui/meson.build
@@ -0,0 +1,7 @@
+files = [
+ 'separator-handle-h.svg', 'separator-handle-v.svg',
+ 'separator-handle-h-dark.svg', 'separator-handle-v-dark.svg'
+]
+
+install_data(files,
+ install_dir: gimpdatadir / 'themes' / 'Default' / 'ui')
diff --git a/themes/Default/ui/separator-handle-h-dark.svg b/themes/Default/ui/separator-handle-h-dark.svg
new file mode 100644
index 0000000000..1a128afd34
--- /dev/null
+++ b/themes/Default/ui/separator-handle-h-dark.svg
@@ -0,0 +1,148 @@
+
+
diff --git a/themes/Default/ui/separator-handle-h.svg b/themes/Default/ui/separator-handle-h.svg
new file mode 100644
index 0000000000..0edd8a7bd6
--- /dev/null
+++ b/themes/Default/ui/separator-handle-h.svg
@@ -0,0 +1,115 @@
+
+
diff --git a/themes/Default/ui/separator-handle-v-dark.svg b/themes/Default/ui/separator-handle-v-dark.svg
new file mode 100644
index 0000000000..1feb0d9dd8
--- /dev/null
+++ b/themes/Default/ui/separator-handle-v-dark.svg
@@ -0,0 +1,137 @@
+
+
diff --git a/themes/Default/ui/separator-handle-v.svg b/themes/Default/ui/separator-handle-v.svg
new file mode 100644
index 0000000000..1d06cdb691
--- /dev/null
+++ b/themes/Default/ui/separator-handle-v.svg
@@ -0,0 +1,115 @@
+
+
diff --git a/themes/Gray/gimp.css b/themes/Gray/gimp.css
index cc60fa01e9..6353b6418b 100644
--- a/themes/Gray/gimp.css
+++ b/themes/Gray/gimp.css
@@ -65,4 +65,4 @@
@define-color ruler-color rgba(100,100,100,0.3);
-@import url("../Default/common.css");
+@import url("../Default/common-light.css");