Fix transparent preview widget background

Fixes eclipse-theia#6194

- fixes an issue where widgets present in the main area had transparent
backgrounds which interfered with custom branding.
- adjusts the styling of the dockpanel to be more consistent with VSCode

Signed-off-by: Vincent Fugnitto <vincent.fugnitto@ericsson.com>

packages/core/src/browser/style/dockpanel.css

@@ -37,6 +37,11 @@
   border-left: var(--theia-border-width) solid var(--theia-border-color1);
 }
 
+.p-DockPanel-handle[data-orientation='horizontal']:after {
+  background-color: var(--theia-layout-color0);
+  border-left: var(--theia-border-width) solid var(--theia-border-color1);
+}
+
 .p-DockPanel-overlay {
   background: rgba(33, 150, 243, 0.1);
   border: var(--theia-border-width) dashed var(--theia-brand-color1);

packages/core/src/browser/style/tabs.css

@@ -75,6 +75,10 @@
 | Tabs in the center area (main and bottom)
 |----------------------------------------------------------------------------*/
 
+#theia-main-content-panel .p-Widget.p-DockPanel-widget {
+  background-color: var(--theia-layout-color0);
+}
+
 /* This is a current tab of a tab bar: each tab bar has 1. */
 .p-TabBar .p-TabBar-tab.p-mod-current {
   min-height: calc(var(--theia-private-horizontal-tab-height) + var(--theia-border-width));