public inbox for [email protected]  
help / color / mirror / Atom feed
From: Neel Patel <[email protected]>
To: Dave Page <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Cc: Akshay Joshi <[email protected]>
Subject: Re: RM4292 - Dark mode support for Windows/macOS
Date: Thu, 9 Apr 2020 18:58:08 +0530
Message-ID: <CACCA4P1U8iLJWDM4_by0+HC9oPyUrrfArsu522FgWC6+sjjzWA@mail.gmail.com> (raw)
In-Reply-To: <CANxoLDdFpBpAg_V5r5M2ni9ycQzr-vhRkeQmMUfqEMYZXq-pZw@mail.gmail.com>
References: <CA+OCxoyiLYcN0N00nFPT9YCOFo8HT47rcoidccq2N5fDJFuqtQ@mail.gmail.com>
	<CANxoLDdFpBpAg_V5r5M2ni9ycQzr-vhRkeQmMUfqEMYZXq-pZw@mail.gmail.com>

Hi Dave,

I reviewed and tested the code on Windows and fixed below issues. Except
below, it looks good to me.

   - Compilation error on windows
   - In configuration window, "maximumSize" of the control is provided
   along with "minimumSize" so it prevents control from expanding when the
   user resizes the window. Removed maxSize and set as default.

A Couple of points for discussion.

   - AFAIK - Users need to manually set the "AppsUseLightTheme" value in
   the registry, right ? Do we need to document that somewhere ?
   - As we have introduced 2 new "dark.qss" & "light.qss" files, so during
   packaging we need to make sure that it should reside along with "pgAdmin4"
   application binary otherwise those css will not be applied at runtime.
   right ?
   - Checkbox is not visible in Configure window UI as per below
   screenshot. Are you able to see on Mac ? If no, I can take a look at it.

[image: Screenshot 2020-04-09 at 5.05.25 PM.png]

Attached is the updated patch.

Thanks,
Neel Patel

On Thu, Apr 9, 2020 at 11:12 AM Akshay Joshi <[email protected]>
wrote:

> Neel,
>
> Can you please review/test it?
>
> On Wed, Apr 8, 2020 at 9:08 PM Dave Page <[email protected]> wrote:
>
>> The attached patch detects if dark mode is enabled on Windows (10+)/macOS
>> (10.14+) at server start, and styles the runtime accordingly. It doesn't
>> dynamically switch if the user changes their preferences.
>>
>> Linux builds continue to use the standard styling from Qt.
>>
>> NOTE: I've tested this on macOS, but my Windows build system is playing
>> up at the moment. Akshay, can you have someone on your team test it please?
>> I believe the code should work; it's just a case of reading a reg key and
>> then doing the same thing as on macOS to set the theme accordingly.
>>
>> --
>> Dave Page
>> Blog: http://pgsnake.blogspot.com
>> Twitter: @pgsnake
>>
>> EnterpriseDB UK: http://www.enterprisedb.com
>> The Enterprise PostgreSQL Company
>>
>
>
> --
> *Thanks & Regards*
> *Akshay Joshi*
>
> *Sr. Software Architect*
> *EnterpriseDB Software India Private Limited*
> *Mobile: +91 976-788-8246*
>


Attachments:

  [image/png] Screenshot 2020-04-09 at 5.05.25 PM.png (74.0K, 3-Screenshot%202020-04-09%20at%205.05.25%20PM.png)
  download | view image

  [application/x-patch] Runtime_dark_mode_for_Windows_Mac_v2.patch (122.0K, 4-Runtime_dark_mode_for_Windows_Mac_v2.patch)
  download | inline diff:
diff --git a/runtime/ConfigWindow.ui b/runtime/ConfigWindow.ui
index 6757f1bab..fbdddfc2d 100644
--- a/runtime/ConfigWindow.ui
+++ b/runtime/ConfigWindow.ui
@@ -71,7 +71,7 @@
            <item>
             <widget class="QLabel" name="pythonPathLabel_2">
              <property name="sizePolicy">
-              <sizepolicy hsizetype="Fixed" vsizetype="Preferred">
+              <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
                <horstretch>0</horstretch>
                <verstretch>0</verstretch>
               </sizepolicy>
@@ -84,7 +84,7 @@
              </property>
              <property name="maximumSize">
               <size>
-               <width>150</width>
+               <width>16777215</width>
                <height>16777215</height>
               </size>
              </property>
@@ -93,6 +93,22 @@
              </property>
             </widget>
            </item>
+           <item>
+            <spacer name="horizontalSpacer_4">
+             <property name="orientation">
+              <enum>Qt::Horizontal</enum>
+             </property>
+             <property name="sizeType">
+              <enum>QSizePolicy::Fixed</enum>
+             </property>
+             <property name="sizeHint" stdset="0">
+              <size>
+               <width>20</width>
+               <height>20</height>
+              </size>
+             </property>
+            </spacer>
+           </item>
            <item>
             <widget class="QLineEdit" name="browserCommandLineEdit">
              <property name="placeholderText">
@@ -143,7 +159,7 @@
              </property>
              <property name="maximumSize">
               <size>
-               <width>150</width>
+               <width>16777215</width>
                <height>16777215</height>
               </size>
              </property>
diff --git a/runtime/breeze.qrc b/runtime/breeze.qrc
new file mode 100644
index 000000000..88fb18574
--- /dev/null
+++ b/runtime/breeze.qrc
@@ -0,0 +1,89 @@
+<RCC>
+  <qresource>
+    <file>light/hmovetoolbar.svg</file>
+    <file>light/vmovetoolbar.svg</file>
+    <file>light/hsepartoolbar.svg</file>
+    <file>light/vsepartoolbars.svg</file>
+    <file>light/stylesheet-branch-end.svg</file>
+    <file>light/stylesheet-branch-end-closed.svg</file>
+    <file>light/stylesheet-branch-end-open.svg</file>
+    <file>light/stylesheet-vline.svg</file>
+    <file>light/stylesheet-branch-more.svg</file>
+    <file>light/branch_closed.svg</file>
+    <file>light/branch_closed-on.svg</file>
+    <file>light/branch_open.svg</file>
+    <file>light/branch_open-on.svg</file>
+    <file>light/down_arrow.svg</file>
+    <file>light/down_arrow_disabled.svg</file>
+    <file>light/down_arrow-hover.svg</file>
+    <file>light/left_arrow.svg</file>
+    <file>light/left_arrow_disabled.svg</file>
+    <file>light/right_arrow.svg</file>
+    <file>light/right_arrow_disabled.svg</file>
+    <file>light/up_arrow.svg</file>
+    <file>light/up_arrow_disabled.svg</file>
+    <file>light/up_arrow-hover.svg</file>
+    <file>light/sizegrip.svg</file>
+    <file>light/transparent.svg</file>
+    <file>light/close.svg</file>
+    <file>light/close-hover.svg</file>
+    <file>light/close-pressed.svg</file>
+    <file>light/undock.svg</file>
+    <file>light/undock-hover.svg</file>
+    <file>light/checkbox_checked-hover.svg</file>
+    <file>light/checkbox_checked.svg</file>
+    <file>light/checkbox_checked_disabled.svg</file>
+    <file>light/checkbox_indeterminate.svg</file>
+    <file>light/checkbox_indeterminate-hover.svg</file>
+    <file>light/checkbox_indeterminate_disabled.svg</file>
+    <file>light/checkbox_unchecked-hover.svg</file>
+    <file>light/checkbox_unchecked_disabled.svg</file>
+    <file>light/radio_checked-hover.svg</file>
+    <file>light/radio_checked.svg</file>
+    <file>light/radio_checked_disabled.svg</file>
+    <file>light/radio_unchecked-hover.svg</file>
+    <file>light/radio_unchecked_disabled.svg</file>
+    <file>dark/hmovetoolbar.svg</file>
+    <file>dark/vmovetoolbar.svg</file>
+    <file>dark/hsepartoolbar.svg</file>
+    <file>dark/vsepartoolbars.svg</file>
+    <file>dark/stylesheet-branch-end.svg</file>
+    <file>dark/stylesheet-branch-end-closed.svg</file>
+    <file>dark/stylesheet-branch-end-open.svg</file>
+    <file>dark/stylesheet-vline.svg</file>
+    <file>dark/stylesheet-branch-more.svg</file>
+    <file>dark/branch_closed.svg</file>
+    <file>dark/branch_closed-on.svg</file>
+    <file>dark/branch_open.svg</file>
+    <file>dark/branch_open-on.svg</file>
+    <file>dark/down_arrow.svg</file>
+    <file>dark/down_arrow_disabled.svg</file>
+    <file>dark/down_arrow-hover.svg</file>
+    <file>dark/left_arrow.svg</file>
+    <file>dark/left_arrow_disabled.svg</file>
+    <file>dark/right_arrow.svg</file>
+    <file>dark/right_arrow_disabled.svg</file>
+    <file>dark/up_arrow.svg</file>
+    <file>dark/up_arrow_disabled.svg</file>
+    <file>dark/up_arrow-hover.svg</file>
+    <file>dark/sizegrip.svg</file>
+    <file>dark/transparent.svg</file>
+    <file>dark/close.svg</file>
+    <file>dark/close-hover.svg</file>
+    <file>dark/close-pressed.svg</file>
+    <file>dark/undock.svg</file>
+    <file>dark/undock-hover.svg</file>
+    <file>dark/checkbox_checked.svg</file>
+    <file>dark/checkbox_checked_disabled.svg</file>
+    <file>dark/checkbox_indeterminate.svg</file>
+    <file>dark/checkbox_indeterminate_disabled.svg</file>
+    <file>dark/checkbox_unchecked.svg</file>
+    <file>dark/checkbox_unchecked_disabled.svg</file>
+    <file>dark/radio_checked.svg</file>
+    <file>dark/radio_checked_disabled.svg</file>
+    <file>dark/radio_unchecked.svg</file>
+    <file>dark/radio_unchecked_disabled.svg</file>
+    <file>light.qss</file>
+    <file>dark.qss</file>
+  </qresource>
+</RCC>
diff --git a/runtime/dark.qss b/runtime/dark.qss
new file mode 100644
index 000000000..65938c8c4
--- /dev/null
+++ b/runtime/dark.qss
@@ -0,0 +1,1648 @@
+/*
+ *  BreezeDark stylesheet.
+ *
+ *  :author: Colin Duquesnoy
+ *  :editor: Alex Huszagh
+ *  :license: MIT, see LICENSE.md
+ *
+ *  This is originally a fork of QDarkStyleSheet, and is based on Breeze/
+ *  BreezeDark color scheme, but is in no way affiliated with KDE.
+ *
+ * ---------------------------------------------------------------------
+ *  The MIT License (MIT)
+ *
+ * Copyright (c) <2013-2014> <Colin Duquesnoy>
+ * Copyright (c) <2015-2016> <Alex Huszagh>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * ---------------------------------------------------------------------
+ */
+
+QToolTip
+{
+    border: 0.1ex solid #eff0f1;
+    background-color: #31363b;
+    alternate-background-color: #3b4045;
+    color: #eff0f1;
+    padding: 0.5ex;
+    opacity: 200;
+}
+
+QWidget
+{
+    color: #eff0f1;
+    background-color: #31363b;
+    selection-background-color:#3daee9;
+    selection-color: #eff0f1;
+    background-clip: border;
+    border-image: none;
+    border: 0px transparent black;
+    outline: 0;
+}
+
+QWidget:item:hover
+{
+    background-color: #3daee9;
+    color: #eff0f1;
+}
+
+QWidget:item:selected
+{
+    background-color: #3daee9;
+}
+
+
+QCheckBox
+{
+    spacing: 0.5ex;
+    outline: none;
+    color: #eff0f1;
+    margin-bottom: 0.2ex;
+    opacity: 200;
+}
+
+QCheckBox:disabled
+{
+    color: #76797c;
+}
+
+QGroupBox::indicator
+{
+    margin-left: 0.2ex;
+}
+
+QCheckBox::indicator:unchecked,
+QCheckBox::indicator:unchecked:focus
+{
+    border-image: url(:/dark/checkbox_unchecked_disabled.svg);
+}
+
+QCheckBox::indicator:unchecked:hover,
+QCheckBox::indicator:unchecked:pressed,
+QGroupBox::indicator:unchecked:hover,
+QGroupBox::indicator:unchecked:focus,
+QGroupBox::indicator:unchecked:pressed
+{
+    border: none;
+    border-image: url(:/dark/checkbox_unchecked.svg);
+}
+
+QCheckBox::indicator:checked
+{
+    border-image: url(:/dark/checkbox_checked.svg);
+}
+
+QCheckBox::indicator:checked:hover,
+QCheckBox::indicator:checked:focus,
+QCheckBox::indicator:checked:pressed,
+QGroupBox::indicator:checked:hover,
+QGroupBox::indicator:checked:focus,
+QGroupBox::indicator:checked:pressed
+{
+    border: none;
+    border-image: url(:/dark/checkbox_checked.svg);
+}
+
+QCheckBox::indicator:indeterminate
+{
+    border-image: url(:/dark/checkbox_indeterminate.svg);
+}
+
+QCheckBox::indicator:indeterminate:focus,
+QCheckBox::indicator:indeterminate:hover,
+QCheckBox::indicator:indeterminate:pressed
+{
+    border-image: url(:/dark/checkbox_indeterminate.svg);
+}
+
+QCheckBox::indicator:indeterminate:disabled
+{
+    border-image: url(:/dark/checkbox_indeterminate_disabled.svg);
+}
+
+QCheckBox::indicator:checked:disabled,
+QGroupBox::indicator:checked:disabled
+{
+    border-image: url(:/dark/checkbox_checked_disabled.svg);
+}
+
+QCheckBox::indicator:unchecked:disabled,
+QGroupBox::indicator:unchecked:disabled
+{
+    border-image: url(:/dark/checkbox_unchecked_disabled.svg);
+}
+
+QRadioButton
+{
+    spacing: 0.5ex;
+    outline: none;
+    color: #eff0f1;
+    margin-bottom: 0.2ex;
+}
+
+QRadioButton:disabled
+{
+    color: #76797c;
+}
+
+QRadioButton::indicator:unchecked,
+QRadioButton::indicator:unchecked:focus
+{
+    border-image: url(:/dark/radio_unchecked_disabled.svg);
+}
+
+
+QRadioButton::indicator:unchecked:hover,
+QRadioButton::indicator:unchecked:pressed
+{
+    border: none;
+    outline: none;
+    border-image: url(:/dark/radio_unchecked.svg);
+}
+
+
+QRadioButton::indicator:checked
+{
+    border: none;
+    outline: none;
+    border-image: url(:/dark/radio_checked.svg);
+}
+
+QRadioButton::indicator:checked:hover,
+QRadioButton::indicator:checked:focus,
+QRadioButton::indicator:checked:pressed
+{
+    border: none;
+    outline: none;
+    border-image: url(:/dark/radio_checked.svg);
+}
+
+QRadioButton::indicator:checked:disabled
+{
+    outline: none;
+    border-image: url(:/dark/radio_checked_disabled.svg);
+}
+
+QRadioButton::indicator:unchecked:disabled
+{
+    border-image: url(:/dark/radio_unchecked_disabled.svg);
+}
+
+QMenuBar
+{
+    background-color: #31363b;
+    color: #eff0f1;
+}
+
+QMenuBar::item
+{
+    background: transparent;
+}
+
+QMenuBar::item:selected
+{
+    background: transparent;
+    border: 0.1ex solid #76797c;
+}
+
+QMenuBar::item:pressed
+{
+    border: 0.1ex solid #76797c;
+    background-color: #3daee9;
+    color: #eff0f1;
+    margin-bottom: -0.1ex;
+    padding-bottom: 0.1ex;
+}
+
+QMenu
+{
+    border: 0.1ex solid #76797c;
+    color: #eff0f1;
+    margin: 0.2ex;
+}
+
+QMenu::icon
+{
+    margin: 0.5ex;
+}
+
+QMenu::item
+{
+    padding: 0.5ex 3ex 0.5ex 3ex;
+    margin-left: 0.5ex;
+    border: 0.1ex solid transparent; /* reserve space for selection border */
+}
+
+QMenu::item:selected
+{
+    color: #eff0f1;
+}
+
+QMenu::separator
+{
+    height: 0.2ex;
+    background: lightblue;
+    margin-left: 1ex;
+    margin-right: 0.5ex;
+}
+
+/* non-exclusive indicator = check box style indicator
+   (see QActionGroup::setExclusive) */
+QMenu::indicator:non-exclusive:unchecked
+{
+    border-image: url(:/dark/checkbox_unchecked_disabled.svg);
+}
+
+QMenu::indicator:non-exclusive:unchecked:selected
+{
+    border-image: url(:/dark/checkbox_unchecked_disabled.svg);
+}
+
+QMenu::indicator:non-exclusive:checked
+{
+    border-image: url(:/dark/checkbox_checked.svg);
+}
+
+QMenu::indicator:non-exclusive:checked:selected
+{
+    border-image: url(:/dark/checkbox_checked.svg);
+}
+
+/* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */
+QMenu::indicator:exclusive:unchecked
+{
+    border-image: url(:/dark/radio_unchecked_disabled.svg);
+}
+
+QMenu::indicator:exclusive:unchecked:selected
+{
+    border-image: url(:/dark/radio_unchecked_disabled.svg);
+}
+
+QMenu::indicator:exclusive:checked
+{
+    border-image: url(:/dark/radio_checked.svg);
+}
+
+QMenu::indicator:exclusive:checked:selected
+{
+    border-image: url(:/dark/radio_checked.svg);
+}
+
+QMenu::right-arrow
+{
+    margin: 0.5ex;
+    border-image: url(:/light/right_arrow.svg);
+    width: 0.6ex;
+    height: 0.9ex;
+}
+
+
+QWidget:disabled
+{
+    color: #454545;
+    background-color: #31363b;
+}
+
+QAbstractItemView
+{
+    alternate-background-color: #31363b;
+    color: #eff0f1;
+    border: 0.1ex solid 3A3939;
+    border-radius: 0.2ex;
+}
+
+QWidget:focus,
+QMenuBar:focus
+{
+    border: 0.1ex solid #3daee9;
+}
+
+QTabWidget:focus,
+QCheckBox:focus,
+QRadioButton:focus,
+QSlider:focus
+{
+    border: none;
+}
+
+QLineEdit
+{
+    background-color: #232629;
+    padding: 0.5ex;
+    border-style: solid;
+    border: 0.1ex solid #76797c;
+    border-radius: 0.2ex;
+    color: #eff0f1;
+}
+
+QGroupBox
+{
+    border: 0.1ex solid #76797c;
+    border-radius: 0.2ex;
+    padding-top: 1ex;
+    margin-top: 1ex;
+}
+
+QGroupBox::title
+{
+    subcontrol-origin: margin;
+    subcontrol-position: top center;
+    padding-left: 0.1ex;
+    padding-right: 0.1ex;
+    margin-top: -0.7ex;
+}
+
+QAbstractScrollArea
+{
+    border-radius: 0.2ex;
+    border: 0.1ex solid #76797c;
+    background-color: transparent;
+}
+
+QScrollBar:horizontal
+{
+    height: 1.5ex;
+    margin: 0.3ex 1.5ex 0.3ex 1.5ex;
+    border: 0.1ex transparent #2A2929;
+    border-radius: 0.4ex;
+    background-color: #2A2929;
+}
+
+QScrollBar::handle:horizontal
+{
+    background-color: #3daee9;
+    min-width: 0.5ex;
+    border-radius: 0.4ex;
+}
+
+QScrollBar::add-line:horizontal
+{
+    margin: 0px 0.3ex 0px 0.3ex;
+    border-image: url(:/dark/right_arrow_disabled.svg);
+    width: 1ex;
+    height: 1ex;
+    subcontrol-position: right;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::sub-line:horizontal
+{
+    margin: 0ex 0.3ex 0ex 0.3ex;
+    border-image: url(:/dark/left_arrow_disabled.svg);
+    width: 1ex;
+    height: 1ex;
+    subcontrol-position: left;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::add-line:horizontal:hover,
+QScrollBar::add-line:horizontal:on
+{
+    border-image: url(:/dark/right_arrow.svg);
+    width: 1ex;
+    height: 1ex;
+    subcontrol-position: right;
+    subcontrol-origin: margin;
+}
+
+
+QScrollBar::sub-line:horizontal:hover,
+QScrollBar::sub-line:horizontal:on
+{
+    border-image: url(:/dark/left_arrow.svg);
+    width: 1ex;
+    height: 1ex;
+    subcontrol-position: left;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::up-arrow:horizontal,
+QScrollBar::down-arrow:horizontal
+{
+    background: none;
+}
+
+
+QScrollBar::add-page:horizontal,
+QScrollBar::sub-page:horizontal
+{
+    background: none;
+}
+
+QScrollBar:vertical
+{
+    background-color: #2A2929;
+    width: 1.5ex;
+    margin: 1.5ex 0.3ex 1.5ex 0.3ex;
+    border: 0.1ex transparent #2A2929;
+    border-radius: 0.4ex;
+}
+
+QScrollBar::handle:vertical
+{
+    background-color: #3daee9;
+    min-height: 0.5ex;
+    border-radius: 0.4ex;
+}
+
+QScrollBar::sub-line:vertical
+{
+    margin: 0.3ex 0ex 0.3ex 0ex;
+    border-image: url(:/dark/up_arrow_disabled.svg);
+    height: 1ex;
+    width: 1ex;
+    subcontrol-position: top;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::add-line:vertical
+{
+    margin: 0.3ex 0ex 0.3ex 0ex;
+    border-image: url(:/dark/down_arrow_disabled.svg);
+    height: 1ex;
+    width: 1ex;
+    subcontrol-position: bottom;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::sub-line:vertical:hover,
+QScrollBar::sub-line:vertical:on
+{
+
+    border-image: url(:/dark/up_arrow.svg);
+    height: 1ex;
+    width: 1ex;
+    subcontrol-position: top;
+    subcontrol-origin: margin;
+}
+
+
+QScrollBar::add-line:vertical:hover,
+QScrollBar::add-line:vertical:on
+{
+    border-image: url(:/dark/down_arrow.svg);
+    height: 1ex;
+    width: 1ex;
+    subcontrol-position: bottom;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical
+{
+    background: none;
+}
+
+
+QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical
+{
+    background: none;
+}
+
+QTextEdit
+{
+    background-color: #232629;
+    color: #eff0f1;
+    border: 0.1ex solid #76797c;
+}
+
+QPlainTextEdit
+{
+    background-color: #232629;;
+    color: #eff0f1;
+    border-radius: 0.2ex;
+    border: 0.1ex solid #76797c;
+}
+
+QHeaderView::section
+{
+    background-color: #76797c;
+    color: #eff0f1;
+    padding: 0.5ex;
+    border: 0.1ex solid #76797c;
+}
+
+QSizeGrip
+{
+    border-image: url(:/dark/sizegrip.svg);
+    width: 1.2ex;
+    height: 1.2ex;
+}
+
+QMainWindow::separator
+{
+    background-color: #31363b;
+    color: white;
+    padding-left: 0.4ex;
+    spacing: 0.2ex;
+    border: 0.1ex dashed #76797c;
+}
+
+QMainWindow::separator:hover
+{
+
+    background-color: #787876;
+    color: white;
+    padding-left: 0.4ex;
+    border: 0.1ex solid #76797c;
+    spacing: 0.2ex;
+}
+
+QMenu::separator
+{
+    height: 0.1ex;
+    background-color: #76797c;
+    color: white;
+    padding-left: 0.4ex;
+    margin-left: 1ex;
+    margin-right: 0.5ex;
+}
+
+QFrame[frameShape="2"],  /* QFrame::Panel == 0x0003 */
+QFrame[frameShape="3"],  /* QFrame::WinPanel == 0x0003 */
+QFrame[frameShape="4"],  /* QFrame::HLine == 0x0004 */
+QFrame[frameShape="5"],  /* QFrame::VLine == 0x0005 */
+QFrame[frameShape="6"]  /* QFrame::StyledPanel == 0x0006 */
+{
+    border-width: 0.1ex;
+    padding: 0.1ex;
+    border-style: solid;
+    border-color: #31363b;
+    background-color: #76797c;
+    border-radius: 0.5ex;
+}
+
+QStackedWidget
+{
+    border: 0.1ex transparent black;
+}
+
+QToolBar
+{
+    border: 0.1ex transparent #393838;
+    background: 0.1ex solid #31363b;
+    font-weight: bold;
+}
+
+QToolBar::handle:horizontal
+{
+    border-image: url(:/dark/hmovetoolbar.svg);
+    width = 1.6ex;
+    height = 6.4ex;
+}
+
+QToolBar::handle:vertical
+{
+    border-image: url(:/dark/vmovetoolbar.svg);
+    width = 5.4ex;
+    height = 1ex;
+}
+
+QToolBar::separator:horizontal
+{
+    border-image: url(:/dark/hsepartoolbar.svg);
+    width = 0.7ex;
+    height = 6.3ex;
+}
+
+QToolBar::separator:vertical
+{
+    border-image: url(:/dark/vsepartoolbars.svg);
+    width = 6.3ex;
+    height = 0.7ex;
+}
+
+QPushButton
+{
+    color: #eff0f1;
+    background-color: qlineargradient(x1: 0.5, y1: 0.5 x2: 0.5, y2: 1, stop: 0 #3b4045, stop: 0.5 #31363b);
+    border-width: 0.1ex;
+    border-color: #76797c;
+    border-style: solid;
+    padding: 0.5ex;
+    border-radius: 0.2ex;
+    outline: none;
+}
+
+QPushButton:disabled
+{
+    background-color: #31363b;
+    border-width: 0.1ex;
+    border-color: #454545;
+    border-style: solid;
+    padding-top: 0.5ex;
+    padding-bottom: 0.5ex;
+    padding-left: 1ex;
+    padding-right: 1ex;
+    border-radius: 0.2ex;
+    color: #454545;
+}
+
+QPushButton:focus
+{
+    color: white;
+}
+
+QPushButton:pressed
+{
+    background-color: #31363b;
+    padding-top: -1.5ex;
+    padding-bottom: -1.7ex;
+}
+
+QComboBox
+{
+    selection-background-color: #3daee9;
+    border-style: solid;
+    border: 0.1ex solid #76797c;
+    border-radius: 0.2ex;
+    padding: 0.5ex;
+    min-width: 7.5ex;
+}
+
+QPushButton:checked
+{
+    background-color: #76797c;
+    border-color: #6A6969;
+}
+
+QPushButton:hover
+{
+    background-color: qlineargradient(x1: 0.5, y1: 0.5 x2: 0.5, y2: 1, stop: 0 #454a4f, stop: 0.5 #3b4045);
+    border: 0.1ex solid #3daee9;
+    color: #eff0f1;
+}
+
+QPushButton:checked:hover
+{
+    background-color: qlineargradient(x1: 0.5, y1: 0.5 x2: 0.5, y2: 1, stop: 0 #808386, stop: 0.5 #76797c);
+    border: 0.1ex solid #3daee9;
+    color: #eff0f1;
+}
+
+QComboBox:hover,
+QAbstractSpinBox:hover,
+QLineEdit:hover,
+QTextEdit:hover,
+QPlainTextEdit:hover,
+QAbstractView:hover,
+QTreeView:hover
+{
+    border: 0.1ex solid #3daee9;
+    color: #eff0f1;
+}
+
+QComboBox:hover:pressed,
+QPushButton:hover:pressed,
+QAbstractSpinBox:hover:pressed,
+QLineEdit:hover:pressed,
+QTextEdit:hover:pressed,
+QPlainTextEdit:hover:pressed,
+QAbstractView:hover:pressed,
+QTreeView:hover:pressed
+{
+    background-color: #31363b;
+}
+
+QComboBox:on
+{
+    padding-top: 0.3ex;
+    padding-left: 0.4ex;
+    selection-background-color: #4a4a4a;
+}
+
+QComboBox QAbstractItemView
+{
+    background-color: #232629;
+    border-radius: 0.2ex;
+    border: 0.1ex solid #76797c;
+    selection-background-color: #3daee9;
+}
+
+QComboBox::drop-down
+{
+    subcontrol-origin: padding;
+    subcontrol-position: top right;
+    width: 1.5ex;
+
+    border-left-width: 0ex;
+    border-left-color: darkgray;
+    border-left-style: solid;
+    border-top-right-radius: 0.3ex;
+    border-bottom-right-radius: 0.3ex;
+}
+
+QComboBox::down-arrow
+{
+    border-image: url(:/dark/down_arrow_disabled.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QComboBox::down-arrow:on,
+QComboBox::down-arrow:hover,
+QComboBox::down-arrow:focus
+{
+    border-image: url(:/dark/down_arrow.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QAbstractSpinBox
+{
+    padding: 0.5ex;
+    border: 0.1ex solid #76797c;
+    background-color: #232629;
+    color: #eff0f1;
+    border-radius: 0.2ex;
+    min-width: 7.5ex;
+}
+
+QAbstractSpinBox:up-button
+{
+    background-color: transparent;
+    subcontrol-origin: border;
+    subcontrol-position: center right;
+}
+
+QAbstractSpinBox:down-button
+{
+    background-color: transparent;
+    subcontrol-origin: border;
+    subcontrol-position: center left;
+}
+
+QAbstractSpinBox::up-arrow,
+QAbstractSpinBox::up-arrow:disabled,
+QAbstractSpinBox::up-arrow:off
+{
+    border-image: url(:/dark/up_arrow_disabled.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QAbstractSpinBox::up-arrow:hover
+{
+    border-image: url(:/dark/up_arrow.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QAbstractSpinBox::down-arrow,
+QAbstractSpinBox::down-arrow:disabled,
+QAbstractSpinBox::down-arrow:off
+{
+    border-image: url(:/dark/down_arrow_disabled.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QAbstractSpinBox::down-arrow:hover
+{
+    border-image: url(:/dark/down_arrow.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QLabel
+{
+    border: 0ex solid black;
+}
+
+/* BORDERS */
+QTabWidget::pane
+{
+    padding: 0.5ex;
+    margin: 0.1ex;
+}
+
+QTabWidget::pane:top
+{
+    border: 0.1ex solid #76797c;
+    top: -0.1ex;
+}
+
+QTabWidget::pane:bottom
+{
+    border: 0.1ex solid #76797c;
+    bottom: -0.1ex;
+}
+
+QTabWidget::pane:left
+{
+    border: 0.1ex solid #76797c;
+    right: -0.1ex;
+}
+
+QTabWidget::pane:right
+{
+    border: 0.1ex solid #76797c;
+    left: -0.1ex;
+}
+
+
+QTabBar
+{
+    qproperty-drawBase: 0;
+    left: 0.5ex; /* move to the right by 0.5ex */
+    border-radius: 0.3ex;
+}
+
+QTabBar:focus
+{
+    border: 0ex transparent black;
+}
+
+QTabBar::close-button
+{
+    border-image: url(:/dark/close.svg);
+    background: transparent;
+}
+
+QTabBar::close-button:hover
+{
+    border-image: url(:/dark/close-hover.svg);
+    width: 1.2ex;
+    height: 1.2ex;
+    background: transparent;
+}
+
+QTabBar::close-button:pressed
+{
+    border-image: url(:/dark/close-pressed.svg);
+    width: 1.2ex;
+    height: 1.2ex;
+    background: transparent;
+}
+
+/* TOP TABS */
+QTabBar::tab:top
+{
+    color: #eff0f1;
+    border: 0.1ex transparent black;
+    border-left: 0.1ex solid #76797c;
+    border-top: 0.1ex solid #76797c;
+    background-color: #31363b;
+    padding: 0.5ex;
+    min-width: 50px;
+    border-top-left-radius: 0.2ex;
+    border-top-right-radius: 0.2ex;
+}
+
+QTabBar::tab:top:last,
+QTabBar::tab:top:only-one
+{
+    color: #eff0f1;
+    border: 0.1ex transparent black;
+    border-left: 0.1ex solid #76797c;
+    border-right: 0.1ex solid #76797c;
+    border-top: 0.1ex solid #76797c;
+    background-color: #31363b;
+    padding: 0.5ex;
+    min-width: 50px;
+    border-top-left-radius: 0.2ex;
+    border-top-right-radius: 0.2ex;
+}
+
+QTabBar::tab:top:!selected
+{
+    color: #eff0f1;
+    background-color: #54575B;
+    border: 0.1ex transparent black;
+    border-left: 0.1ex solid #76797c;
+    border-top-left-radius: 0.2ex;
+    border-top-right-radius: 0.2ex;
+}
+
+QTabBar::tab:top:first:!selected
+{
+    color: #eff0f1;
+    background-color: #54575B;
+    border: 0.1ex transparent black;
+    border-top-left-radius: 0.2ex;
+    border-top-right-radius: 0.2ex;
+}
+
+QTabBar::tab:top:!selected:hover
+{
+    background-color: rgba(61, 173, 232, 0.2);
+    border: 0.1ex rgba(61, 173, 232, 0.2);
+    border-left: 0.1ex solid #76797c;
+}
+
+QTabBar::tab:top:!selected:first:hover
+{
+    background-color: rgba(61, 173, 232, 0.2);
+    border: 0.1ex rgba(61, 173, 232, 0.2);
+}
+
+/* BOTTOM TABS */
+
+QTabBar::tab:bottom
+{
+    color: #eff0f1;
+    border: 0.1ex transparent black;
+    border-left: 0.1ex solid #76797c;
+    border-bottom: 0.1ex solid #76797c;
+    background-color: #31363b;
+    padding: 0.5ex;
+    border-bottom-left-radius: 0.2ex;
+    border-bottom-right-radius: 0.2ex;
+    min-width: 50px;
+}
+
+QTabBar::tab:bottom:last,
+QTabBar::tab:bottom:only-one
+{
+    color: #eff0f1;
+    border: 0.1ex transparent black;
+    border-left: 0.1ex solid #76797c;
+    border-right: 0.1ex solid #76797c;
+    border-bottom: 0.1ex solid #76797c;
+    background-color: #31363b;
+    padding: 0.5ex;
+    border-bottom-left-radius: 0.2ex;
+    border-bottom-right-radius: 0.2ex;
+    min-width: 50px;
+}
+
+QTabBar::tab:bottom:!selected
+{
+    color: #eff0f1;
+    background-color: #54575B;
+    border: 0.1ex transparent black;
+    border-left: 0.1ex solid #76797c;
+    border-bottom-left-radius: 0.2ex;
+    border-bottom-right-radius: 0.2ex;
+}
+
+QTabBar::tab:bottom:first:!selected
+{
+    color: #eff0f1;
+    background-color: #54575B;
+    border: 0.1ex transparent black;
+    border-top-left-radius: 0.2ex;
+    border-top-right-radius: 0.2ex;
+}
+
+QTabBar::tab:bottom:!selected:hover
+{
+    background-color: rgba(61, 173, 232, 0.2);
+    border: 0.1ex rgba(61, 173, 232, 0.2);
+    border-left: 0.1ex solid #76797c;
+}
+
+QTabBar::tab:bottom:!selected:first:hover
+{
+    background-color: rgba(61, 173, 232, 0.2);
+    border: 0.1ex rgba(61, 173, 232, 0.2);
+}
+
+/* LEFT TABS */
+QTabBar::tab:left
+{
+    color: #eff0f1;
+    border: 0.1ex transparent black;
+    border-top: 0.1ex solid #76797c;
+    border-right: 0.1ex solid #76797c;
+    background-color: #31363b;
+    padding: 0.5ex;
+    border-top-right-radius: 0.2ex;
+    border-bottom-right-radius: 0.2ex;
+    min-height: 50px;
+}
+
+QTabBar::tab:left:last,
+QTabBar::tab:left:only-one
+{
+    color: #eff0f1;
+    border: 0.1ex transparent black;
+    border-top: 0.1ex solid #76797c;
+    border-bottom: 0.1ex solid #76797c;
+    border-right: 0.1ex solid #76797c;
+    background-color: #31363b;
+    padding: 0.5ex;
+    border-top-right-radius: 0.2ex;
+    border-bottom-right-radius: 0.2ex;
+    min-height: 50px;
+}
+
+QTabBar::tab:left:!selected
+{
+    color: #eff0f1;
+    background-color: #54575B;
+    border: 0.1ex transparent black;
+    border-top: 0.1ex solid #76797c;
+    border-top-right-radius: 0.2ex;
+    border-bottom-right-radius: 0.2ex;
+}
+
+QTabBar::tab:left:!selected:hover
+{
+    background-color: rgba(61, 173, 232, 0.2);
+    border: 0.1ex rgba(61, 173, 232, 0.2);
+    border-top: 0.1ex solid #76797c;
+}
+
+QTabBar::tab:left:!selected:first:hover
+{
+    background-color: rgba(61, 173, 232, 0.2);
+    border: 0.1ex rgba(61, 173, 232, 0.2);
+}
+
+/* RIGHT TABS */
+QTabBar::tab:right
+{
+    color: #eff0f1;
+    border: 0.1ex transparent black;
+    border-top: 0.1ex solid #76797c;
+    border-left: 0.1ex solid #76797c;
+    background-color: #31363b;
+    padding: 0.5ex;
+    border-top-left-radius: 0.2ex;
+    border-bottom-left-radius: 0.2ex;
+    min-height: 50px;
+}
+
+QTabBar::tab:right:last,
+QTabBar::tab:right:only-one
+{
+    color: #eff0f1;
+    border: 0.1ex transparent black;
+    border-top: 0.1ex solid #76797c;
+    border-bottom: 0.1ex solid #76797c;
+    border-left: 0.1ex solid #76797c;
+    background-color: #31363b;
+    padding: 0.5ex;
+    border-top-left-radius: 0.2ex;
+    border-bottom-left-radius: 0.2ex;
+    min-height: 50px;
+}
+
+QTabBar::tab:right:!selected
+{
+    color: #eff0f1;
+    background-color: #54575B;
+    border: 0.1ex transparent black;
+    border-top: 0.1ex solid #76797c;
+    border-top-left-radius: 0.2ex;
+    border-bottom-left-radius: 0.2ex;
+}
+
+QTabBar::tab:right:!selected:hover
+{
+    background-color: rgba(61, 173, 232, 0.2);
+    border: 0.1ex rgba(61, 173, 232, 0.2);
+    border-top: 0.1ex solid #76797c;
+}
+
+QTabBar::tab:right:!selected:first:hover
+{
+    background-color: rgba(61, 173, 232, 0.2);
+    border: 0.1ex rgba(61, 173, 232, 0.2);
+}
+
+QTabBar QToolButton::right-arrow:enabled
+{
+    border-image: url(:/dark/right_arrow.svg);
+}
+
+QTabBar QToolButton::left-arrow:enabled
+{
+    border-image: url(:/dark/left_arrow.svg);
+}
+
+QTabBar QToolButton::right-arrow:disabled
+{
+    border-image: url(:/dark/right_arrow_disabled.svg);
+}
+
+QTabBar QToolButton::left-arrow:disabled
+{
+    border-image: url(:/dark/left_arrow_disabled.svg);
+}
+
+QDockWidget
+{
+    background: #31363b;
+    border: 0.1ex solid #403F3F;
+    titlebar-close-icon: url(:/dark/transparent.svg);
+    titlebar-normal-icon: url(:/dark/transparent.svg);
+}
+
+QDockWidget::close-button,
+QDockWidget::float-button
+{
+    border: 0.1ex solid transparent;
+    border-radius: 0.2ex;
+    background: transparent;
+}
+
+QDockWidget::float-button
+{
+    border-image: url(:/dark/undock.svg);
+}
+
+QDockWidget::float-button:hover
+{
+    border-image: url(:/dark/undock-hover.svg) ;
+}
+
+QDockWidget::close-button
+{
+    border-image: url(:/dark/close.svg) ;
+}
+
+QDockWidget::close-button:hover
+{
+    border-image: url(:/dark/close-hover.svg) ;
+}
+
+QDockWidget::close-button:pressed
+{
+    border-image: url(:/dark/close-pressed.svg) ;
+}
+
+QTreeView,
+QListView
+{
+    border: 0.1ex solid #76797c;
+    background-color: #232629;
+}
+
+QTreeView::branch:has-siblings:!adjoins-item
+{
+    border-image: url(:/dark/stylesheet-vline.svg) 0;
+}
+
+QTreeView::branch:has-siblings:adjoins-item
+{
+    border-image: url(:/dark/stylesheet-branch-more.svg) 0;
+}
+
+QTreeView::branch:!has-children:!has-siblings:adjoins-item
+{
+    border-image: url(:/dark/stylesheet-branch-end.svg) 0;
+}
+
+QTreeView::branch:has-children:!has-siblings:closed,
+QTreeView::branch:closed:has-children:has-siblings
+{
+    border-image: url(:/dark/stylesheet-branch-end-closed.svg) 0;
+    image: url(:/dark/branch_closed.svg);
+}
+
+QTreeView::branch:open:has-children:!has-siblings,
+QTreeView::branch:open:has-children:has-siblings
+{
+    border-image: url(:/dark/stylesheet-branch-end-open.svg) 0;
+    image: url(:/dark/branch_open.svg);
+}
+
+/*
+QTreeView::branch:has-siblings:!adjoins-item {
+        background: cyan;
+}
+
+QTreeView::branch:has-siblings:adjoins-item {
+        background: red;
+}
+
+QTreeView::branch:!has-children:!has-siblings:adjoins-item {
+        background: blue;
+}
+
+QTreeView::branch:closed:has-children:has-siblings {
+        background: pink;
+}
+
+QTreeView::branch:has-children:!has-siblings:closed {
+        background: gray;
+}
+
+QTreeView::branch:open:has-children:has-siblings {
+        background: magenta;
+}
+
+QTreeView::branch:open:has-children:!has-siblings {
+        background: green;
+}
+*/
+
+QTableView::item,
+QListView::item,
+QTreeView::item
+{
+    padding: 0.3ex;
+}
+
+QTableView::item:!selected:hover,
+QListView::item:!selected:hover,
+QTreeView::item:!selected:hover
+{
+    background-color: rgba(61, 173, 232, 0.2);
+    outline: 0;
+    color: #eff0f1;
+    padding: 0.3ex;
+}
+
+
+QSlider::groove:horizontal
+{
+    border: 0.1ex solid #31363b;
+    height: 0.4ex;
+    background: #565a5e;
+    margin: 0ex;
+    border-radius: 0.2ex;
+}
+
+QSlider::handle:horizontal
+{
+    background: #232629;
+    border: 0.1ex solid #626568;
+    width: 1.6ex;
+    height: 1.6ex;
+    margin: -0.8ex 0;
+    border-radius: 0.9ex;
+}
+
+QSlider::groove:vertical
+{
+    border: 0.1ex solid #31363b;
+    width: 0.4ex;
+    background: #565a5e;
+    margin: 0ex;
+    border-radius: 0.3ex;
+}
+
+QSlider::handle:vertical
+{
+    background: #232629;
+    border: 0.1ex solid #626568;
+    width: 1.6ex;
+    height: 1.6ex;
+    margin: 0 -0.8ex;
+    border-radius: 0.9ex;
+}
+
+QSlider::handle:horizontal:hover,
+QSlider::handle:horizontal:focus,
+QSlider::handle:vertical:hover,
+QSlider::handle:vertical:focus
+{
+    border: 0.1ex solid #3daee9;
+}
+
+QSlider::sub-page:horizontal,
+QSlider::add-page:vertical
+{
+    background: #3daee9;
+    border-radius: 0.3ex;
+}
+
+QSlider::add-page:horizontal,
+QSlider::sub-page:vertical
+{
+    background: #626568;
+    border-radius: 0.3ex;
+}
+
+QToolButton
+{
+    background-color: transparent;
+    border: 0.1ex solid #76797c;
+    border-radius: 0.2ex;
+    margin: 0.3ex;
+    padding: 0.5ex;
+}
+
+QToolButton[popupMode="1"]  /* only for MenuButtonPopup */
+{
+    padding-right: 2ex; /* make way for the popup button */
+}
+
+QToolButton[popupMode="2"]  /* only for InstantPopup */
+{
+    padding-right: 1ex; /* make way for the popup button */
+}
+
+QToolButton::menu-indicator
+{
+    border-image: none;
+    image: url(:/dark/down_arrow.svg);
+    top: -0.7ex;
+    left: -0.2ex;
+}
+
+QToolButton::menu-arrow
+{
+    border-image: none;
+    image: url(:/dark/down_arrow.svg);
+}
+
+QToolButton:hover,
+QToolButton::menu-button:hover
+{
+    background-color: transparent;
+    border: 0.1ex solid #3daee9;
+}
+
+QToolButton:checked,
+QToolButton:pressed,
+QToolButton::menu-button:pressed
+{
+    background-color: #3daee9;
+    border: 0.1ex solid #3daee9;
+    padding: 0.5ex;
+}
+
+QToolButton::menu-button
+{
+    border: 0.1ex solid #76797c;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+    /* 1ex width + 0.4ex for border + no text = 2ex allocated above */
+    width: 1ex;
+    padding: 0.5ex;
+    outline: none;
+}
+
+QToolButton::menu-arrow:open
+{
+    border: 0.1ex solid #76797c;
+}
+
+QPushButton::menu-indicator
+{
+    subcontrol-origin: padding;
+    subcontrol-position: bottom right;
+    left: 0.8ex;
+}
+
+QTableView
+{
+    border: 0.1ex solid #76797c;
+    gridline-color: #31363b;
+    background-color: #232629;
+}
+
+
+QTableView,
+QHeaderView
+{
+    border-radius: 0px;
+}
+
+QTableView::item:pressed,
+QListView::item:pressed,
+QTreeView::item:pressed
+{
+    background: #3daee9;
+    color: #eff0f1;
+}
+
+QTableView::item:selected:active,
+QTreeView::item:selected:active,
+QListView::item:selected:active
+{
+    background: #3daee9;
+    color: #eff0f1;
+}
+
+QListView::item:selected:hover,
+QTreeView::item:selected:hover
+{
+    background-color: #47b8f3;
+    color: #eff0f1;
+}
+
+QHeaderView
+{
+    background-color: #31363b;
+    border: 0.1ex transparent;
+    border-radius: 0px;
+    margin: 0px;
+    padding: 0px;
+
+}
+
+QHeaderView::section
+{
+    background-color: #31363b;
+    color: #eff0f1;
+    padding: 0.5ex;
+    border: 0.1ex solid #76797c;
+    border-radius: 0px;
+    text-align: center;
+}
+
+QHeaderView::section::vertical::first,
+QHeaderView::section::vertical::only-one
+{
+    border-top: 0.1ex solid #76797c;
+}
+
+QHeaderView::section::vertical
+{
+    border-top: transparent;
+}
+
+QHeaderView::section::horizontal::first,
+QHeaderView::section::horizontal::only-one
+{
+    border-left: 0.1ex solid #76797c;
+}
+
+QHeaderView::section::horizontal
+{
+    border-left: transparent;
+}
+
+
+QHeaderView::section:checked
+{
+    color: white;
+    background-color: #334e5e;
+}
+
+ /* style the sort indicator */
+QHeaderView::down-arrow
+{
+    image: url(:/dark/down_arrow.svg);
+}
+
+QHeaderView::up-arrow
+{
+    image: url(:/dark/up_arrow.svg);
+}
+
+QTableCornerButton::section
+{
+    background-color: #31363b;
+    border: 0.1ex transparent #76797c;
+    border-radius: 0px;
+}
+
+QToolBox
+{
+    padding: 0.5ex;
+    border: 0.1ex transparent black;
+}
+
+QToolBox:selected
+{
+    background-color: #31363b;
+    border-color: #3daee9;
+}
+
+QToolBox:hover
+{
+    border-color: #3daee9;
+}
+
+QStatusBar::item
+{
+    border: 0px transparent dark;
+}
+
+QFrame[height="3"],
+QFrame[width="3"]
+{
+    background-color: #76797c;
+}
+
+QSplitter::handle
+{
+    border: 0.1ex dashed #76797c;
+}
+
+QSplitter::handle:hover
+{
+    background-color: #787876;
+    border: 0.1ex solid #76797c;
+}
+
+QSplitter::handle:horizontal
+{
+    width: 0.1ex;
+}
+
+QSplitter::handle:vertical
+{
+    height: 0.1ex;
+}
+
+QProgressBar:horizontal
+{
+    background-color: #626568;
+    border: 0.1ex solid #31363b;
+    border-radius: 0.3ex;
+    height: 0.5ex;
+    text-align: right;
+    margin-top: 0.5ex;
+    margin-bottom: 0.5ex;
+    margin-right: 5ex;
+    padding: 0px;
+}
+
+QProgressBar::chunk:horizontal
+{
+    background-color: #3daee9;
+    border: 0.1ex transparent;
+    border-radius: 0.3ex;
+}
+
+QSpinBox,
+QDoubleSpinBox
+{
+    padding-right: 1.5ex;
+}
+
+QSpinBox::up-button,
+QDoubleSpinBox::up-button
+{
+    subcontrol-origin: content;
+    subcontrol-position: right top;
+
+    width: 1.6ex;
+    border-width: 0.1ex;
+}
+
+QSpinBox::up-arrow,
+QDoubleSpinBox::up-arrow
+{
+    border-image: url(:/dark/up_arrow.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QSpinBox::up-arrow:hover,
+QSpinBox::up-arrow:pressed,
+QDoubleSpinBox::up-arrow:hover,
+QDoubleSpinBox::up-arrow:pressed
+{
+    border-image: url(:/dark/up_arrow-hover.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QSpinBox::up-arrow:disabled,
+QSpinBox::up-arrow:off,
+QDoubleSpinBox::up-arrow:disabled,
+QDoubleSpinBox::up-arrow:off
+{
+   border-image: url(:/dark/up_arrow_disabled.svg);
+}
+
+QSpinBox::down-button,
+QDoubleSpinBox::down-button
+{
+    subcontrol-origin: content;
+    subcontrol-position: right bottom;
+
+    width: 1.6ex;
+    border-width: 0.1ex;
+}
+
+QSpinBox::down-arrow,
+QDoubleSpinBox::down-arrow
+{
+    border-image: url(:/dark/down_arrow.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QSpinBox::down-arrow:hover,
+QSpinBox::down-arrow:pressed,
+QDoubleSpinBox::down-arrow:hover,
+QDoubleSpinBox::down-arrow:pressed
+{
+    border-image: url(:/dark/down_arrow-hover.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QSpinBox::down-arrow:disabled,
+QSpinBox::down-arrow:off,
+QDoubleSpinBox::down-arrow:disabled,
+QDoubleSpinBox::down-arrow:off
+{
+   border-image: url(:/dark/down_arrow_disabled.svg);
+}
diff --git a/runtime/dark/branch_closed-on.svg b/runtime/dark/branch_closed-on.svg
new file mode 100644
index 000000000..8bd398f80
--- /dev/null
+++ b/runtime/dark/branch_closed-on.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="9">
+  <path fill="#fff" fill-rule="evenodd" d="M1,8V1L5,4.5Z"/>
+</svg>
diff --git a/runtime/dark/branch_closed.svg b/runtime/dark/branch_closed.svg
new file mode 100644
index 000000000..f5a072f4b
--- /dev/null
+++ b/runtime/dark/branch_closed.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="18">
+  <path fill="#afafaf" d="M5,12V6L9,9Z"/>
+</svg>
diff --git a/runtime/dark/branch_open-on.svg b/runtime/dark/branch_open-on.svg
new file mode 100644
index 000000000..4dd0c0655
--- /dev/null
+++ b/runtime/dark/branch_open-on.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="6">
+  <path fill="#fff" d="M1,1H8L4.5,5Z"/>
+</svg>
diff --git a/runtime/dark/branch_open.svg b/runtime/dark/branch_open.svg
new file mode 100644
index 000000000..0745890db
--- /dev/null
+++ b/runtime/dark/branch_open.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="12">
+  <path fill="#afafaf" d="M5.5,3H12.5L9,9Z"/>
+</svg>
diff --git a/runtime/dark/checkbox_checked.svg b/runtime/dark/checkbox_checked.svg
new file mode 100644
index 000000000..6753d8bd2
--- /dev/null
+++ b/runtime/dark/checkbox_checked.svg
@@ -0,0 +1,5 @@
+<svg x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+  <path d="M2,2 h14 v14 h-0.9 v-13.1 h-13.1 z" fill="#58d3ff"/>
+  <path d="M16,16 h-14 v-14 h0.9 v13.1 h13.1 z" fill="#58d3ff"/>
+  <path d="M5,5 h8 v8 h-8 v-8 z" fill="#58d3ff" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/dark/checkbox_checked_disabled.svg b/runtime/dark/checkbox_checked_disabled.svg
new file mode 100644
index 000000000..ff7e63aaa
--- /dev/null
+++ b/runtime/dark/checkbox_checked_disabled.svg
@@ -0,0 +1,5 @@
+<svg x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+  <path d="M2,2 h14 v14 h-0.9 v-13.1 h-13.1 z" fill="#c8c9ca"/>
+  <path d="M16,16 h-14 v-14 h0.9 v13.1 h13.1 z" fill="#c8c9ca"/>
+  <path d="M5,5 h8 v8 h-8 v-8 z" fill="#c8c9ca" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/dark/checkbox_indeterminate.svg b/runtime/dark/checkbox_indeterminate.svg
new file mode 100644
index 000000000..0f171248d
--- /dev/null
+++ b/runtime/dark/checkbox_indeterminate.svg
@@ -0,0 +1,7 @@
+<svg x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+  <path d="M2,2 h14 v14 h-0.9 v-13.1 h-13.1 z" fill="#58d3ff"/>
+  <path d="M16,16 h-14 v-14 h0.9 v13.1 h13.1 z" fill="#58d3ff"/>
+  <path d="M5,5 h8 v8 h-0.9 v-7.1 h-7.1 z" fill="#58d3ff" fill-rule="evenodd"/>
+  <path d="M13,13 h-8 v-8 h0.9 v7.1 h7.1 z" fill="#58d3ff" fill-rule="evenodd"/>
+  <path d="M13,5 L 5,13 v-8 h8 z" fill="#58d3ff" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/dark/checkbox_indeterminate_disabled.svg b/runtime/dark/checkbox_indeterminate_disabled.svg
new file mode 100644
index 000000000..bc0f285f0
--- /dev/null
+++ b/runtime/dark/checkbox_indeterminate_disabled.svg
@@ -0,0 +1,7 @@
+<svg x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+  <path d="M2,2 h14 v14 h-0.9 v-13.1 h-13.1 z" fill="#c8c9ca"/>
+  <path d="M16,16 h-14 v-14 h0.9 v13.1 h13.1 z" fill="#c8c9ca"/>
+  <path d="M5,5 h8 v8 h-0.9 v-7.1 h-7.1 z" fill="#c8c9ca" fill-rule="evenodd"/>
+  <path d="M13,13 h-8 v-8 h0.9 v7.1 h7.1 z" fill="#c8c9ca" fill-rule="evenodd"/>
+  <path d="M13,5 L 5,13 v-8 h8 z" fill="#c8c9ca" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/dark/checkbox_unchecked.svg b/runtime/dark/checkbox_unchecked.svg
new file mode 100644
index 000000000..6f3e56946
--- /dev/null
+++ b/runtime/dark/checkbox_unchecked.svg
@@ -0,0 +1,4 @@
+<svg x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+  <path d="M2,2 h14 v14 h-0.9 v-13.1 h-13.1 z" fill="#58d3ff"/>
+  <path d="M16,16 h-14 v-14 h0.9 v13.1 h13.1 z" fill="#58d3ff"/>
+</svg>
diff --git a/runtime/dark/checkbox_unchecked_disabled.svg b/runtime/dark/checkbox_unchecked_disabled.svg
new file mode 100644
index 000000000..dd73f7584
--- /dev/null
+++ b/runtime/dark/checkbox_unchecked_disabled.svg
@@ -0,0 +1,4 @@
+<svg x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+  <path d="M2,2 h14 v14 h-0.9 v-13.1 h-13.1 z" fill="#c8c9ca"/>
+  <path d="M16,16 h-14 v-14 h0.9 v13.1 h13.1 z" fill="#c8c9ca"/>
+</svg>
diff --git a/runtime/dark/close-hover.svg b/runtime/dark/close-hover.svg
new file mode 100644
index 000000000..e2b0dd89a
--- /dev/null
+++ b/runtime/dark/close-hover.svg
@@ -0,0 +1,3 @@
+<svg width="1200" height="1200">
+  <path d="M 600,1050 C 351.472,1050 150,848.528 150,600 150,351.472 351.472,150 600,150 c 248.528,0 450,201.472 450,450 0,248.528 -201.472,450 -450,450 z M 888.462,827.851 661.974,601.122 l 0,-2.244 226.488,-226.729 0,-60.611 -60.848,0 Q 727.339,411.986 627.043,512.451 613.524,525.358 600,538.267 l -226.487,-226.729 -61.975,0 0,60.611 L 538.026,600 311.538,826.729 l 0,61.733 60.848,0 q 34.363,-34.792 68.735,-69.59 L 600,661.733 l 226.487,226.729 61.975,0 0,-60.611 z" fill="#b37979"/>
+</svg>
diff --git a/runtime/dark/close-pressed.svg b/runtime/dark/close-pressed.svg
new file mode 100644
index 000000000..a0dc2496f
--- /dev/null
+++ b/runtime/dark/close-pressed.svg
@@ -0,0 +1,3 @@
+<svg width="1200" height="1200">
+  <path d="M 600,1050 C 351.472,1050 150,848.528 150,600 150,351.472 351.472,150 600,150 c 248.528,0 450,201.472 450,450 0,248.528 -201.472,450 -450,450 z M 888.462,827.851 661.974,601.122 l 0,-2.244 226.488,-226.729 0,-60.611 -60.848,0 Q 727.339,411.986 627.043,512.451 613.524,525.358 600,538.267 l -226.487,-226.729 -61.975,0 0,60.611 L 538.026,600 311.538,826.729 l 0,61.733 60.848,0 q 34.363,-34.792 68.735,-69.59 L 600,661.733 l 226.487,226.729 61.975,0 0,-60.611 z" fill="#b33e3e"/>
+</svg>
diff --git a/runtime/dark/close.svg b/runtime/dark/close.svg
new file mode 100644
index 000000000..07b50c9e3
--- /dev/null
+++ b/runtime/dark/close.svg
@@ -0,0 +1,3 @@
+<svg width="1200" height="1200">
+  <path d="M 600,1050 C 351.472,1050 150,848.528 150,600 150,351.472 351.472,150 600,150 c 248.528,0 450,201.472 450,450 0,248.528 -201.472,450 -450,450 z M 888.462,827.851 661.974,601.122 l 0,-2.244 226.488,-226.729 0,-60.611 -60.848,0 Q 727.339,411.986 627.043,512.451 613.524,525.358 600,538.267 l -226.487,-226.729 -61.975,0 0,60.611 L 538.026,600 311.538,826.729 l 0,61.733 60.848,0 q 34.363,-34.792 68.735,-69.59 L 600,661.733 l 226.487,226.729 61.975,0 0,-60.611 z" fill="#626568"/>
+</svg>
diff --git a/runtime/dark/down_arrow-hover.svg b/runtime/dark/down_arrow-hover.svg
new file mode 100644
index 000000000..408397f95
--- /dev/null
+++ b/runtime/dark/down_arrow-hover.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="9px" height="6px" viewBox="0 0 9 6" enable-background="new 0 0 9 6" xml:space="preserve">
+  <path d="M 1.1894592,0.91769718 4.5,4.2280182 7.8105408,0.91627648 c 0.1577125,-0.157702 0.4134624,-0.157702 0.5711749,0 0.1577124,0.15770202 0.1577124,0.41343492 0,0.57113692 l -3.5961283,3.5973102 0,0 0,0 c -0.1577124,0.1577019 -0.4134624,0.1577019 -0.5711748,0 L 0.6182843,1.4874134 c -0.1577124,-0.157702 -0.1577124,-0.4134349 0,-0.57113692 0.1577125,-0.15628131 0.4134624,-0.15628131 0.5711749,0.00142 z" fill="#3daee9"/>
+</svg>
diff --git a/runtime/dark/down_arrow.svg b/runtime/dark/down_arrow.svg
new file mode 100644
index 000000000..a50df0014
--- /dev/null
+++ b/runtime/dark/down_arrow.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="9px" height="6px" viewBox="0 0 9 6" enable-background="new 0 0 9 6" xml:space="preserve">
+  <path d="M 1.1894592,0.91769718 4.5,4.2280182 7.8105408,0.91627648 c 0.1577125,-0.157702 0.4134624,-0.157702 0.5711749,0 0.1577124,0.15770202 0.1577124,0.41343492 0,0.57113692 l -3.5961283,3.5973102 0,0 0,0 c -0.1577124,0.1577019 -0.4134624,0.1577019 -0.5711748,0 L 0.6182843,1.4874134 c -0.1577124,-0.157702 -0.1577124,-0.4134349 0,-0.57113692 0.1577125,-0.15628131 0.4134624,-0.15628131 0.5711749,0.00142 z" fill="#fff"/>
+</svg>
diff --git a/runtime/dark/down_arrow_disabled.svg b/runtime/dark/down_arrow_disabled.svg
new file mode 100644
index 000000000..af74a3075
--- /dev/null
+++ b/runtime/dark/down_arrow_disabled.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="9px" height="6px" viewBox="0 0 9 6" enable-background="new 0 0 9 6" xml:space="preserve">
+  <path d="M 1.1894592,0.91769718 4.5,4.2280182 7.8105408,0.91627648 c 0.1577125,-0.157702 0.4134624,-0.157702 0.5711749,0 0.1577124,0.15770202 0.1577124,0.41343492 0,0.57113692 l -3.5961283,3.5973102 0,0 0,0 c -0.1577124,0.1577019 -0.4134624,0.1577019 -0.5711748,0 L 0.6182843,1.4874134 c -0.1577124,-0.157702 -0.1577124,-0.4134349 0,-0.57113692 0.1577125,-0.15628131 0.4134624,-0.15628131 0.5711749,0.00142 z" fill="#b0b0b0"/>
+</svg>
diff --git a/runtime/dark/hmovetoolbar.svg b/runtime/dark/hmovetoolbar.svg
new file mode 100644
index 000000000..e4904db02
--- /dev/null
+++ b/runtime/dark/hmovetoolbar.svg
@@ -0,0 +1,4 @@
+<svg x="0px" y="0px" width="16px" height="64px" viewBox="0 0 16 64" enable-background="new 0 0 16 64" xml:space="preserve">
+  <rect fill="#5f5f5f" x="2" y="1" width="1" height="62.5"/>
+  <rect fill="#5f5f5f" x="9" y="1" width="1" height="62.5"/>
+</svg>
diff --git a/runtime/dark/hsepartoolbar.svg b/runtime/dark/hsepartoolbar.svg
new file mode 100644
index 000000000..89beb2265
--- /dev/null
+++ b/runtime/dark/hsepartoolbar.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="7px" height="63px" viewBox="0 0 7 63" enable-background="new 0 0 7 63" xml:space="preserve">
+  <rect fill="#5f5f5f" x="2" y="13" width="1" height="37"/>
+</svg>
diff --git a/runtime/dark/left_arrow.svg b/runtime/dark/left_arrow.svg
new file mode 100644
index 000000000..9c787cec0
--- /dev/null
+++ b/runtime/dark/left_arrow.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="6px" height="9px" viewBox="0 0 6 9" enable-background="new 0 0 6 9" xml:space="preserve">
+  <path d="m 5.0823028,1.1894593 -3.310321,3.3105408 3.3117417,3.3105408 c 0.157702,0.1577125 0.157702,0.4134624 0,0.5711749 -0.157702,0.1577123 -0.4134349,0.1577123 -0.5711369,0 l -3.59731017,-3.5961283 0,0 0,0 c -0.15770191,-0.1577124 -0.15770191,-0.4134624 0,-0.5711748 L 4.5125866,0.61828437 c 0.157702,-0.1577124 0.4134349,-0.1577124 0.5711369,0 0.1562813,0.1577125 0.1562813,0.41346243 -0.00142,0.57117493 z" fill="#fff"/>
+</svg>
diff --git a/runtime/dark/left_arrow_disabled.svg b/runtime/dark/left_arrow_disabled.svg
new file mode 100644
index 000000000..2d749e725
--- /dev/null
+++ b/runtime/dark/left_arrow_disabled.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="6px" height="9px" viewBox="0 0 6 9" enable-background="new 0 0 6 9" xml:space="preserve">
+  <path d="m 5.0823028,1.1894593 -3.310321,3.3105408 3.3117417,3.3105408 c 0.157702,0.1577125 0.157702,0.4134624 0,0.5711749 -0.157702,0.1577123 -0.4134349,0.1577123 -0.5711369,0 l -3.59731017,-3.5961283 0,0 0,0 c -0.15770191,-0.1577124 -0.15770191,-0.4134624 0,-0.5711748 L 4.5125866,0.61828437 c 0.157702,-0.1577124 0.4134349,-0.1577124 0.5711369,0 0.1562813,0.1577125 0.1562813,0.41346243 -0.00142,0.57117493 z" fill="#b0b0b0"/>
+</svg>
diff --git a/runtime/dark/radio_checked.svg b/runtime/dark/radio_checked.svg
new file mode 100644
index 000000000..b8f706486
--- /dev/null
+++ b/runtime/dark/radio_checked.svg
@@ -0,0 +1,5 @@
+<svg x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+  <path d="M1,10a9,9 0 1,0 18,0 h-0.9 a8.1,8.1 0 1,1 -16.2,0 h-0.9" fill="#58d3ff" fill-rule="evenodd"/>
+  <path d="M1,10a9,9 0 1,1 18,0 h-0.9 a8.1,8.1 0 1,0 -16.2,0 h-0.9" fill="#58d3ff" fill-rule="evenodd"/>
+  <path d="M4,10a6,6 0 1,0 12,0a6,6 0 1,0 -12,0" fill="#58d3ff" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/dark/radio_checked_disabled.svg b/runtime/dark/radio_checked_disabled.svg
new file mode 100644
index 000000000..523ee0049
--- /dev/null
+++ b/runtime/dark/radio_checked_disabled.svg
@@ -0,0 +1,5 @@
+<svg x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+  <path d="M1,10a9,9 0 1,0 18,0 h-0.9 a8.1,8.1 0 1,1 -16.2,0 h-0.9" fill="#c8c9ca" fill-rule="evenodd"/>
+  <path d="M1,10a9,9 0 1,1 18,0 h-0.9 a8.1,8.1 0 1,0 -16.2,0 h-0.9" fill="#c8c9ca" fill-rule="evenodd"/>
+  <path d="M4,10a6,6 0 1,0 12,0a6,6 0 1,0 -12,0" fill="#c8c9ca" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/dark/radio_unchecked.svg b/runtime/dark/radio_unchecked.svg
new file mode 100644
index 000000000..1a556e360
--- /dev/null
+++ b/runtime/dark/radio_unchecked.svg
@@ -0,0 +1,4 @@
+<svg x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+  <path d="M1,10a9,9 0 1,0 18,0 h-0.9 a8.1,8.1 0 1,1 -16.2,0 h-0.9" fill="#58d3ff" fill-rule="evenodd"/>
+  <path d="M1,10a9,9 0 1,1 18,0 h-0.9 a8.1,8.1 0 1,0 -16.2,0 h-0.9" fill="#58d3ff" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/dark/radio_unchecked_disabled.svg b/runtime/dark/radio_unchecked_disabled.svg
new file mode 100644
index 000000000..b3da8a2dc
--- /dev/null
+++ b/runtime/dark/radio_unchecked_disabled.svg
@@ -0,0 +1,4 @@
+<svg x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+  <path d="M1,10a9,9 0 1,0 18,0 h-0.9 a8.1,8.1 0 1,1 -16.2,0 h-0.9" fill="#c8c9ca" fill-rule="evenodd"/>
+  <path d="M1,10a9,9 0 1,1 18,0 h-0.9 a8.1,8.1 0 1,0 -16.2,0 h-0.9" fill="#c8c9ca" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/dark/right_arrow.svg b/runtime/dark/right_arrow.svg
new file mode 100644
index 000000000..b793513f2
--- /dev/null
+++ b/runtime/dark/right_arrow.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="9">
+  <path d="m 0.9166972,1.1894593 3.310321,3.3105408 -3.3117417,3.3105408 c -0.157702,0.1577125 -0.157702,0.4134624 0,0.5711749 0.157702,0.1577123 0.4134349,0.1577123 0.5711369,0 l 3.5973102,-3.5961283 0,0 0,0 c 0.1577019,-0.1577124 0.1577019,-0.4134624 0,-0.5711748 L 1.4864134,0.61828437 c -0.157702,-0.1577124 -0.4134349,-0.1577124 -0.5711369,0 -0.1562813,0.1577125 -0.1562813,0.41346243 0.00142,0.57117493 z" fill="#fff"/>
+</svg>
diff --git a/runtime/dark/right_arrow_disabled.svg b/runtime/dark/right_arrow_disabled.svg
new file mode 100644
index 000000000..4940025ef
--- /dev/null
+++ b/runtime/dark/right_arrow_disabled.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="9">
+  <path d="m 0.9166972,1.1894593 3.310321,3.3105408 -3.3117417,3.3105408 c -0.157702,0.1577125 -0.157702,0.4134624 0,0.5711749 0.157702,0.1577123 0.4134349,0.1577123 0.5711369,0 l 3.5973102,-3.5961283 0,0 0,0 c 0.1577019,-0.1577124 0.1577019,-0.4134624 0,-0.5711748 L 1.4864134,0.61828437 c -0.157702,-0.1577124 -0.4134349,-0.1577124 -0.5711369,0 -0.1562813,0.1577125 -0.1562813,0.41346243 0.00142,0.57117493 z" fill="#b0b0b0"/>
+</svg>
diff --git a/runtime/dark/sizegrip.svg b/runtime/dark/sizegrip.svg
new file mode 100644
index 000000000..3388f07dc
--- /dev/null
+++ b/runtime/dark/sizegrip.svg
@@ -0,0 +1,3 @@
+<svg width="1000" height="1000">
+  <path fill="#b0b0b0" d="M22.1,1022.1L-22.1,977.9l1000-1000L1022.1,22.1Zm220,30L197.9,1007.9l1000-1000L1242.1,52.1Zm250,0L447.9,1007.9l1000-1000L1492.1,52.1Zm250,0L697.9,1007.9l1030-1030L1772.1,22.1Z"/>
+</svg>
diff --git a/runtime/dark/spinup_disabled.svg b/runtime/dark/spinup_disabled.svg
new file mode 100644
index 000000000..838436d0a
--- /dev/null
+++ b/runtime/dark/spinup_disabled.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="6">
+  <path d="M 1.1894592,5.0833028 4.5,1.7729818 7.8105408,5.0847235 c 0.1577125,0.157702 0.4134624,0.157702 0.5711749,0 0.1577124,-0.157702 0.1577124,-0.4134349 0,-0.5711369 l -3.5961283,-3.59731019 0,0 0,0 c -0.1577124,-0.1577019 -0.4134624,-0.1577019 -0.5711748,0 L 0.6182843,4.5135866 c -0.1577124,0.157702 -0.1577124,0.4134349 0,0.5711369 0.1577125,0.1562813 0.4134624,0.1562813 0.5711749,-0.00142 z" fill="#b0b0b0"/>
+</svg>
diff --git a/runtime/dark/stylesheet-branch-end-closed.svg b/runtime/dark/stylesheet-branch-end-closed.svg
new file mode 100644
index 000000000..eb73b13a3
--- /dev/null
+++ b/runtime/dark/stylesheet-branch-end-closed.svg
@@ -0,0 +1,4 @@
+<svg width="81" height="58">
+  <rect id="VLine" fill="#626568" x="36" width="2" height="14"/>
+  <rect id="HLine" fill="#626568" x="65" y="28" height="1" width="28"/>
+</svg>
diff --git a/runtime/dark/stylesheet-branch-end-open.svg b/runtime/dark/stylesheet-branch-end-open.svg
new file mode 100644
index 000000000..eb73b13a3
--- /dev/null
+++ b/runtime/dark/stylesheet-branch-end-open.svg
@@ -0,0 +1,4 @@
+<svg width="81" height="58">
+  <rect id="VLine" fill="#626568" x="36" width="2" height="14"/>
+  <rect id="HLine" fill="#626568" x="65" y="28" height="1" width="28"/>
+</svg>
diff --git a/runtime/dark/stylesheet-branch-end.svg b/runtime/dark/stylesheet-branch-end.svg
new file mode 100644
index 000000000..334ca0cdf
--- /dev/null
+++ b/runtime/dark/stylesheet-branch-end.svg
@@ -0,0 +1,4 @@
+<svg width="81" height="58">
+  <rect id="VLine" fill="#626568" x="36" width="2" height="28"/>
+  <rect id="HLine" fill="#626568" x="36" y="28" height="1" width="57"/>
+</svg>
diff --git a/runtime/dark/stylesheet-branch-more.svg b/runtime/dark/stylesheet-branch-more.svg
new file mode 100644
index 000000000..f5250ba38
--- /dev/null
+++ b/runtime/dark/stylesheet-branch-more.svg
@@ -0,0 +1,4 @@
+<svg width="81" height="58">
+  <rect id="VLine" fill="#626568" x="36" width="2" height="58"/>
+  <rect id="HLine" fill="#626568" x="36" y="30" height="1" width="44"/>
+</svg>
diff --git a/runtime/dark/stylesheet-vline.svg b/runtime/dark/stylesheet-vline.svg
new file mode 100644
index 000000000..4e7ff6aaa
--- /dev/null
+++ b/runtime/dark/stylesheet-vline.svg
@@ -0,0 +1,3 @@
+<svg width="81" height="58">
+  <rect fill="#626568" x="36" width="2" height="58"/>
+</svg>
diff --git a/runtime/dark/transparent.svg b/runtime/dark/transparent.svg
new file mode 100644
index 000000000..3a8ca5cf6
--- /dev/null
+++ b/runtime/dark/transparent.svg
@@ -0,0 +1 @@
+<svg width="64" height="64"/>
diff --git a/runtime/dark/undock-hover.svg b/runtime/dark/undock-hover.svg
new file mode 100644
index 000000000..6bddbd721
--- /dev/null
+++ b/runtime/dark/undock-hover.svg
@@ -0,0 +1,5 @@
+<svg width="1000" height="1000" >
+  <path id="BottomCircle" d="M100,500 a250,250, 0, 1,0, 800,0 M775,500 L500,775 L225,500 z" fill="#a2a2a2" />
+  <path id="TopCircle" d="M900,500 a250,250, 0, 1,0, -800,0 M225,500 L500,225 L775,500  z" fill="#a2a2a2" />
+  <path id="Inside" d="M275,500 L 500,725 L 725,500 L 500,275 z" fill="#a2a2a2" />
+</svg>
diff --git a/runtime/dark/undock.svg b/runtime/dark/undock.svg
new file mode 100644
index 000000000..9ab21971c
--- /dev/null
+++ b/runtime/dark/undock.svg
@@ -0,0 +1,3 @@
+<svg width="1000" height="1000" >
+  <path d="M250,500 L 500,750 L 750,500 L 500,250 z" fill="none" stroke="#a2a2a2" stroke-width="50" />
+</svg>
diff --git a/runtime/dark/up_arrow-hover.svg b/runtime/dark/up_arrow-hover.svg
new file mode 100644
index 000000000..dd1271a5b
--- /dev/null
+++ b/runtime/dark/up_arrow-hover.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="9px" height="6px" viewBox="0 0 9 6" enable-background="new 0 0 9 6" xml:space="preserve">
+  <path d="M 1.1894592,5.0833028 4.5,1.7729818 7.8105408,5.0847235 c 0.1577125,0.157702 0.4134624,0.157702 0.5711749,0 0.1577124,-0.157702 0.1577124,-0.4134349 0,-0.5711369 l -3.5961283,-3.59731019 0,0 0,0 c -0.1577124,-0.1577019 -0.4134624,-0.1577019 -0.5711748,0 L 0.6182843,4.5135866 c -0.1577124,0.157702 -0.1577124,0.4134349 0,0.5711369 0.1577125,0.1562813 0.4134624,0.1562813 0.5711749,-0.00142 z" fill="#3daee9"/>
+</svg>
diff --git a/runtime/dark/up_arrow.svg b/runtime/dark/up_arrow.svg
new file mode 100644
index 000000000..9f42239b3
--- /dev/null
+++ b/runtime/dark/up_arrow.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="9px" height="6px" viewBox="0 0 9 6" enable-background="new 0 0 9 6" xml:space="preserve">
+  <path d="M 1.1894592,5.0833028 4.5,1.7729818 7.8105408,5.0847235 c 0.1577125,0.157702 0.4134624,0.157702 0.5711749,0 0.1577124,-0.157702 0.1577124,-0.4134349 0,-0.5711369 l -3.5961283,-3.59731019 0,0 0,0 c -0.1577124,-0.1577019 -0.4134624,-0.1577019 -0.5711748,0 L 0.6182843,4.5135866 c -0.1577124,0.157702 -0.1577124,0.4134349 0,0.5711369 0.1577125,0.1562813 0.4134624,0.1562813 0.5711749,-0.00142 z" fill="#fff"/>
+</svg>
diff --git a/runtime/dark/up_arrow_disabled.svg b/runtime/dark/up_arrow_disabled.svg
new file mode 100644
index 000000000..742e1c549
--- /dev/null
+++ b/runtime/dark/up_arrow_disabled.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="9px" height="6px" viewBox="0 0 9 6" enable-background="new 0 0 9 6" xml:space="preserve">
+  <path d="M 1.1894592,5.0833028 4.5,1.7729818 7.8105408,5.0847235 c 0.1577125,0.157702 0.4134624,0.157702 0.5711749,0 0.1577124,-0.157702 0.1577124,-0.4134349 0,-0.5711369 l -3.5961283,-3.59731019 0,0 0,0 c -0.1577124,-0.1577019 -0.4134624,-0.1577019 -0.5711748,0 L 0.6182843,4.5135866 c -0.1577124,0.157702 -0.1577124,0.4134349 0,0.5711369 0.1577125,0.1562813 0.4134624,0.1562813 0.5711749,-0.00142 z" fill="#b0b0b0"/>
+</svg>
diff --git a/runtime/dark/vmovetoolbar.svg b/runtime/dark/vmovetoolbar.svg
new file mode 100644
index 000000000..0a30d45ef
--- /dev/null
+++ b/runtime/dark/vmovetoolbar.svg
@@ -0,0 +1,8 @@
+<svg x="0px" y="0px" width="54px" height="10px" viewBox="0 0 54 10" enable-background="new 0 0 54 10" xml:space="preserve">
+  <rect id="Dark1" data-name="Dark1" fill="#292c31" x="16" y="1" width="4" height="8"/>
+  <rect id="Light1" data-name="Light1" fill="#7f8795" x="16" y="1" width="3" height="7"/>
+  <rect id="Dark2" data-name="Dark2" fill="#292c31" x="25" y="1" width="4" height="8"/>
+  <rect id="Light2" data-name="Light2" fill="#7f8795" x="25" y="1" width="3" height="7"/>
+  <rect id="Dark3" data-name="Dark3" fill="#292c31" x="34" y="1" width="4" height="8"/>
+  <rect id="Light3" data-name="Light3" fill="#7f8795" x="34" y="1" width="3" height="7"/>
+</svg>
diff --git a/runtime/dark/vsepartoolbars.svg b/runtime/dark/vsepartoolbars.svg
new file mode 100644
index 000000000..00e91ab8d
--- /dev/null
+++ b/runtime/dark/vsepartoolbars.svg
@@ -0,0 +1,7 @@
+<svg x="0px" y="0px" width="63px" height="7px" viewBox="0 0 63 7" enable-background="new 0 0 63 7" xml:space="preserve">
+  <rect id="Dark1" data-name="Dark1" fill="#292c31" x="25" y="1" width="1" height="5"/>
+  <rect id="Dark2" data-name="Dark2" fill="#292c31" x="38" y="1" width="1" height="5"/>
+  <rect id="Light1" data-name="Light1" fill="#7f8795" x="23" y="1" width="2" height="5"/>
+  <rect id="Light2" data-name="Light2" fill="#7f8795" x="30" y="1" width="2" height="5"/>
+  <rect id="Light3" data-name="Light3" fill="#7f8795" x="36" y="1" width="2" height="5"/>
+</svg>
diff --git a/runtime/light.qss b/runtime/light.qss
new file mode 100644
index 000000000..e62523169
--- /dev/null
+++ b/runtime/light.qss
@@ -0,0 +1,1654 @@
+/*
+ *  Breeze stylesheet.
+ *
+ *  :author: Colin Duquesnoy
+ *  :editor: Alex Huszagh
+ *  :license: MIT, see LICENSE.md
+ *
+ *  This is originally a fork of QDarkStyleSheet, and is based on Breeze/
+ *  BreezeDark color scheme, but is in no way affiliated with KDE.
+ *
+ * ---------------------------------------------------------------------
+ *  The MIT License (MIT)
+ *
+ * Copyright (c) <2013-2014> <Colin Duquesnoy>
+ * Copyright (c) <2015-2016> <Alex Huszagh>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * ---------------------------------------------------------------------
+ */
+
+QToolTip
+{
+    background-color: black;
+    color: white;
+    padding: 0.5ex;
+}
+
+QWidget
+{
+    color: #31363B;
+    background-color: #EFF0F1;
+    selection-background-color:#33A4DF;
+    selection-color: #31363B;
+    background-clip: border;
+    border-image: none;
+    border: 0px transparent black;
+    outline: 0;
+}
+
+QWidget:item:hover
+{
+    background-color: #33A4DF;
+    color: #31363B;
+}
+
+QWidget:item:selected
+{
+    background-color: #33A4DF;
+}
+
+
+QCheckBox
+{
+    spacing: 0.5ex;
+    outline: none;
+    color: #31363B;
+    margin-bottom: 0.2ex;
+    opacity: 200;
+}
+
+QCheckBox:disabled
+{
+    color: #BAB9B8;
+}
+
+QGroupBox::indicator
+{
+    margin-left: 0.2ex;
+    margin-left: 0.2ex;
+}
+
+QCheckBox::indicator:unchecked,
+QCheckBox::indicator:unchecked:focus
+{
+    border-image: url(:/light/checkbox_unchecked_disabled.svg);
+}
+
+QCheckBox::indicator:unchecked:hover,
+QCheckBox::indicator:unchecked:pressed,
+QGroupBox::indicator:unchecked:hover,
+QGroupBox::indicator:unchecked:focus,
+QGroupBox::indicator:unchecked:pressed
+{
+    border: none;
+    border-image: url(:/light/checkbox_unchecked-hover.svg);
+}
+
+QCheckBox::indicator:checked
+{
+    border-image: url(:/light/checkbox_checked.svg);
+}
+
+QCheckBox::indicator:checked:focus,
+QCheckBox::indicator:checked:pressed,
+QGroupBox::indicator:checked:focus,
+QGroupBox::indicator:checked:pressed
+{
+    border: none;
+    border-image: url(:/light/checkbox_checked.svg);
+}
+
+QCheckBox::indicator:checked:hover,
+QGroupBox::indicator:checked:hover
+{
+    border-image: url(:/light/checkbox_checked-hover.svg);
+}
+
+QCheckBox::indicator:indeterminate
+{
+    border-image: url(:/light/checkbox_indeterminate.svg);
+}
+
+QCheckBox::indicator:indeterminate:hover
+{
+    border-image: url(:/light/checkbox_indeterminate-hover.svg);
+}
+
+QCheckBox::indicator:indeterminate:focus,
+QCheckBox::indicator:indeterminate:pressed
+{
+}
+
+QCheckBox::indicator:indeterminate:disabled
+{
+    border-image: url(:/light/checkbox_indeterminate_disabled.svg);
+}
+
+QCheckBox::indicator:checked:disabled,
+QGroupBox::indicator:checked:disabled
+{
+    border-image: url(:/light/checkbox_checked_disabled.svg);
+}
+
+QCheckBox::indicator:unchecked:disabled,
+QGroupBox::indicator:unchecked:disabled
+{
+    border-image: url(:/light/checkbox_unchecked_disabled.svg);
+}
+
+QRadioButton
+{
+    spacing: 0.5ex;
+    outline: none;
+    color: #31363B;
+    margin-bottom: 0.2ex;
+}
+
+QRadioButton:disabled
+{
+    color: #BAB9B8;
+}
+
+QRadioButton::indicator:unchecked,
+QRadioButton::indicator:unchecked:focus
+{
+    border-image: url(:/light/radio_unchecked_disabled.svg);
+}
+
+QRadioButton::indicator:unchecked:hover,
+QRadioButton::indicator:unchecked:pressed
+{
+    border: none;
+    outline: none;
+    border-image: url(:/light/radio_unchecked-hover.svg);
+}
+
+QRadioButton::indicator:checked
+{
+    border: none;
+    outline: none;
+    border-image: url(:/light/radio_checked.svg);
+}
+
+QRadioButton::indicator:checked:focus,
+QRadioButton::indicator:checked:pressed
+{
+    border: none;
+    outline: none;
+    border-image: url(:/light/radio_checked.svg);
+}
+
+QRadioButton::indicator:checked:hover
+{
+    border-image: url(:/light/radio_checked-hover.svg);
+}
+
+QRadioButton::indicator:checked:disabled
+{
+    outline: none;
+    border-image: url(:/light/radio_checked_disabled.svg);
+}
+
+QRadioButton::indicator:unchecked:disabled
+{
+    border-image: url(:/light/radio_unchecked_disabled.svg);
+}
+
+QMenuBar
+{
+    background-color: #EFF0F1;
+    color: #31363B;
+}
+
+QMenuBar::item
+{
+    background: transparent;
+}
+
+QMenuBar::item:selected
+{
+    background: transparent;
+    border: 0.1ex solid #BAB9B8;
+}
+
+QMenuBar::item:pressed
+{
+    border: 0.1ex solid #BAB9B8;
+    background-color: #33A4DF;
+    color: #31363B;
+    margin-bottom: -0.1ex;
+    padding-bottom: 0.1ex;
+}
+
+QMenu
+{
+    border: 0.1ex solid #BAB9B8;
+    color: #31363B;
+    margin: 0.2ex;
+}
+
+QMenu::icon
+{
+    margin: 0.5ex;
+}
+
+QMenu::item
+{
+    padding: 0.5ex 3ex 0.5ex 3ex;
+    margin-left: 0.5ex;
+    border: 0.1ex solid transparent; /* reserve space for selection border */
+}
+
+QMenu::item:selected
+{
+    color: #31363B;
+}
+
+QMenu::separator
+{
+    height: 0.2ex;
+    background: lightblue;
+    margin-left: 1ex;
+    margin-right: 0.5ex;
+}
+
+/* non-exclusive indicator = check box style indicator
+   (see QActionGroup::setExclusive) */
+QMenu::indicator:non-exclusive:unchecked
+{
+    border-image: url(:/light/checkbox_unchecked_disabled.svg);
+}
+
+QMenu::indicator:non-exclusive:unchecked:selected
+{
+    border-image: url(:/light/checkbox_unchecked_disabled.svg);
+}
+
+QMenu::indicator:non-exclusive:checked
+{
+    border-image: url(:/light/checkbox_checked.svg);
+}
+
+QMenu::indicator:non-exclusive:checked:selected
+{
+    border-image: url(:/light/checkbox_checked.svg);
+}
+
+/* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */
+QMenu::indicator:exclusive:unchecked
+{
+    border-image: url(:/light/radio_unchecked_disabled.svg);
+}
+
+QMenu::indicator:exclusive:unchecked:selected
+{
+    border-image: url(:/light/radio_unchecked_disabled.svg);
+}
+
+QMenu::indicator:exclusive:checked
+{
+    border-image: url(:/light/radio_checked.svg);
+}
+
+QMenu::indicator:exclusive:checked:selected
+{
+    border-image: url(:/light/radio_checked.svg);
+}
+
+QMenu::right-arrow
+{
+    margin: 0.5ex;
+    border-image: url(:/light/right_arrow.svg);
+    width: 0.6ex;
+    height: 0.9ex;
+}
+
+
+QWidget:disabled
+{
+    color: #454545;
+    background-color: #EFF0F1;
+}
+
+QAbstractItemView
+{
+    alternate-background-color: #EFF0F1;
+    color: #31363B;
+    border: 0.1ex solid 3A3939;
+    border-radius: 0.2ex;
+}
+
+QWidget:focus,
+QMenuBar:focus
+{
+    border: 0.1ex solid #33A4DF;
+}
+
+QTabWidget:focus,
+QCheckBox:focus,
+QRadioButton:focus,
+QSlider:focus
+{
+    border: none;
+}
+
+QLineEdit
+{
+    background-color: #FCFCFC;
+    padding: 0.5ex;
+    border-style: solid;
+    border: 0.1ex solid #BAB9B8;
+    border-radius: 0.2ex;
+    color: #31363B;
+}
+
+QGroupBox
+{
+    border: 0.1ex solid #BAB9B8;
+    border-radius: 0.2ex;
+    padding-top: 1ex;
+    margin-top: 1ex;
+}
+
+QGroupBox::title
+{
+    subcontrol-origin: margin;
+    subcontrol-position: top center;
+    padding-left: 0.1ex;
+    padding-right: 0.1ex;
+    margin-top: -0.7ex;
+}
+
+QAbstractScrollArea
+{
+    border-radius: 0.2ex;
+    border: 0.1ex solid #BAB9B8;
+    background-color: transparent;
+}
+
+QScrollBar:horizontal
+{
+    height: 1.5ex;
+    margin: 0.3ex 1.5ex 0.3ex 1.5ex;
+    border: 0.1ex transparent #2A2929;
+    border-radius: 0.4ex;
+    background-color: #2A2929;
+}
+
+QScrollBar::handle:horizontal
+{
+    background-color: #605F5F;
+    min-width: 0.5ex;
+    border-radius: 0.4ex;
+}
+
+QScrollBar::add-line:horizontal
+{
+    margin: 0ex 0.3ex 0ex 0.3ex;
+    border-image: url(:/light/right_arrow_disabled.svg);
+    width: 1ex;
+    height: 1ex;
+    subcontrol-position: right;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::sub-line:horizontal
+{
+    margin: 0px 0.3ex 0px 0.3ex;
+    border-image: url(:/light/left_arrow_disabled.svg);
+    height: 1ex;
+    width: 1ex;
+    subcontrol-position: left;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::add-line:horizontal:hover,QScrollBar::add-line:horizontal:on
+{
+    border-image: url(:/light/right_arrow.svg);
+    width: 1ex;
+    height: 1ex;
+    subcontrol-position: right;
+    subcontrol-origin: margin;
+}
+
+
+QScrollBar::sub-line:horizontal:hover, QScrollBar::sub-line:horizontal:on
+{
+    border-image: url(:/light/left_arrow.svg);
+    width: 1ex;
+    height: 1ex;
+    subcontrol-position: left;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:horizontal
+{
+    background: none;
+}
+
+
+QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal
+{
+    background: none;
+}
+
+QScrollBar:vertical
+{
+    background-color: #2A2929;
+    width: 1.5ex;
+    margin: 1.5ex 0.3ex 1.5ex 0.3ex;
+    border: 0.1ex transparent #2A2929;
+    border-radius: 0.4ex;
+}
+
+QScrollBar::handle:vertical
+{
+    background-color: #605F5F;
+    min-height: 0.5ex;
+    border-radius: 0.4ex;
+}
+
+QScrollBar::sub-line:vertical
+{
+    margin: 0.3ex 0ex 0.3ex 0ex;
+    border-image: url(:/light/up_arrow_disabled.svg);
+    height: 1ex;
+    width: 1ex;
+    subcontrol-position: top;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::add-line:vertical
+{
+    margin: 0.3ex 0ex 0.3ex 0ex;
+    border-image: url(:/light/down_arrow_disabled.svg);
+    height: 1ex;
+    width: 1ex;
+    subcontrol-position: bottom;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::sub-line:vertical:hover,
+QScrollBar::sub-line:vertical:on
+{
+
+    border-image: url(:/light/up_arrow.svg);
+    height: 1ex;
+    width: 1ex;
+    subcontrol-position: top;
+    subcontrol-origin: margin;
+}
+
+
+QScrollBar::add-line:vertical:hover,
+QScrollBar::add-line:vertical:on
+{
+    border-image: url(:/light/down_arrow.svg);
+    height: 1ex;
+    width: 1ex;
+    subcontrol-position: bottom;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::up-arrow:vertical,
+QScrollBar::down-arrow:vertical
+{
+    background: none;
+}
+
+
+QScrollBar::add-page:vertical,
+QScrollBar::sub-page:vertical
+{
+    background: none;
+}
+
+QTextEdit
+{
+    background-color: #EFF0F1;
+    color: #31363B;
+    border: 0.1ex solid #BAB9B8;
+}
+
+QPlainTextEdit
+{
+    background-color: #EFF0F1;
+    color: #31363B;
+    border-radius: 0.2ex;
+    border: 0.1ex solid #BAB9B8;
+}
+
+QHeaderView::section
+{
+    background-color: #BAB9B8;
+    color: #31363B;
+    padding: 0.5ex;
+    border: 0.1ex solid #BAB9B8;
+}
+
+QSizeGrip
+{
+    border-image: url(:/light/sizegrip.svg);
+    width: 1.2ex;
+    height: 1.2ex;
+}
+
+QMainWindow::separator
+{
+    background-color: #EFF0F1;
+    color: white;
+    padding-left: 0.4ex;
+    spacing: 0.2ex;
+    border: 0.1ex dashed #BAB9B8;
+}
+
+QMainWindow::separator:hover
+{
+
+    background-color: #787876;
+    color: white;
+    padding-left: 0.4ex;
+    border: 0.1ex solid #BAB9B8;
+    spacing: 0.2x;
+}
+
+QMenu::separator
+{
+    height: 0.1ex;
+    background-color: #BAB9B8;
+    color: white;
+    padding-left: 0.4ex;
+    margin-left: 1ex;
+    margin-right: 0.5ex;
+}
+
+QFrame[frameShape="2"],  /* QFrame::Panel == 0x0003 */
+QFrame[frameShape="3"],  /* QFrame::WinPanel == 0x0003 */
+QFrame[frameShape="4"],  /* QFrame::HLine == 0x0004 */
+QFrame[frameShape="5"],  /* QFrame::VLine == 0x0005 */
+QFrame[frameShape="6"]  /* QFrame::StyledPanel == 0x0006 */
+{
+    border-width: 0.1ex;
+    padding: 0.1ex;
+    border-style: solid;
+    border-color: #EFF0F1;
+    background-color: #bcbfc2;
+    border-radius: 0.5ex;
+}
+
+QStackedWidget
+{
+    border: 0.1ex transparent black;
+}
+
+QToolBar
+{
+    border: 0.1ex transparent #393838;
+    background: 0.1ex solid #EFF0F1;
+    font-weight: bold;
+}
+
+QToolBar::handle:horizontal
+{
+    border-image: url(:/light/hmovetoolbar.svg);
+    width = 1.6ex;
+    height = 6.4ex;
+}
+
+QToolBar::handle:vertical
+{
+    border-image: url(:/light/vmovetoolbar.svg);
+    width = 5.4ex;
+    height = 1ex;
+}
+
+QToolBar::separator:horizontal
+{
+    border-image: url(:/light/hsepartoolbar.svg);
+    width = 0.7ex;
+    height = 6.3ex;
+}
+
+QToolBar::separator:vertical
+{
+    border-image: url(:/light/vsepartoolbars.svg);
+    width = 6.3ex;
+    height = 0.7ex;
+}
+
+QPushButton
+{
+    color: #31363B;
+    background-color: qlineargradient(x1: 0.5, y1: 0.5 x2: 0.5, y2: 1, stop: 0 #EFF0F1, stop: 0.5 #eaebec);
+    border-width: 0.1ex;
+    border-color: #BAB9B8;
+    border-style: solid;
+    padding: 0.5ex;
+    border-radius: 0.2ex;
+    outline: none;
+}
+
+QPushButton:disabled
+{
+    background-color: #e0e1e2;
+    border-width: 0.1ex;
+    border-color: #b4b4b4;
+    border-style: solid;
+    padding-top: 0.5ex;
+    padding-bottom: 0.5ex;
+    padding-left: 1ex;
+    padding-right: 1ex;
+    border-radius: 0.2ex;
+    color: #b4b4b4;
+}
+
+QPushButton:focus
+{
+    color: black;
+}
+
+QComboBox
+{
+    selection-background-color: #33A4DF;
+    border-style: solid;
+    border: 0.1ex solid #BAB9B8;
+    border-radius: 0.2ex;
+    padding: 0.5ex;
+    min-width: 7.5ex;
+}
+
+QPushButton:checked
+{
+    background-color: #BAB9B8;
+    border-color: #6A6969;
+}
+
+QComboBox:hover,
+QAbstractSpinBox:hover,
+QLineEdit:hover,
+QTextEdit:hover,
+QPlainTextEdit:hover,
+QAbstractView:hover,
+QTreeView:hover
+{
+    border: 0.1ex solid #33A4DF;
+    color: #31363B;
+}
+
+QComboBox:hover:pressed,
+QPushButton:hover:pressed,
+QAbstractSpinBox:hover:pressed,
+QLineEdit:hover:pressed,
+QTextEdit:hover:pressed,
+QPlainTextEdit:hover:pressed,
+QAbstractView:hover:pressed,
+QTreeView:hover:pressed
+{
+    background-color: #EFF0F1;
+}
+
+QComboBox:on
+{
+    padding-top: 0.3ex;
+    padding-left: 0.4ex;
+    selection-background-color: #4a4a4a;
+}
+
+QComboBox QAbstractItemView
+{
+    background-color: #FCFCFC;
+    border-radius: 0.2ex;
+    border: 0.1ex solid #BAB9B8;
+    selection-background-color: #33A4DF;
+}
+
+QComboBox::drop-down
+{
+    subcontrol-origin: padding;
+    subcontrol-position: top right;
+    width: 1.5ex;
+
+    border-left-width: 0ex;
+    border-left-color: darkgray;
+    border-left-style: solid;
+    border-top-right-radius: 0.3ex;
+    border-bottom-right-radius: 0.3ex;
+}
+
+QComboBox::down-arrow
+{
+    border-image: url(:/light/down_arrow_disabled.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QComboBox::down-arrow:on,
+QComboBox::down-arrow:hover,
+QComboBox::down-arrow:focus
+{
+    border-image: url(:/light/down_arrow.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QAbstractSpinBox
+{
+    padding: 0.5ex;
+    border: 0.1ex solid #BAB9B8;
+    background-color: #D9D8D7;
+    color: #31363B;
+    border-radius: 0.2ex;
+    min-width: 7.5ex;
+}
+
+QAbstractSpinBox:up-button
+{
+    background-color: transparent;
+    subcontrol-origin: border;
+    subcontrol-position: center right;
+}
+
+QAbstractSpinBox:down-button
+{
+    background-color: transparent;
+    subcontrol-origin: border;
+    subcontrol-position: center left;
+}
+
+QAbstractSpinBox::up-arrow,
+QAbstractSpinBox::up-arrow:disabled,
+QAbstractSpinBox::up-arrow:off
+{
+    border-image: url(:/light/up_arrow_disabled.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QAbstractSpinBox::up-arrow:hover
+{
+    border-image: url(:/light/up_arrow.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QAbstractSpinBox::down-arrow,
+QAbstractSpinBox::down-arrow:disabled,
+QAbstractSpinBox::down-arrow:off
+{
+    border-image: url(:/light/down_arrow_disabled.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QAbstractSpinBox::down-arrow:hover
+{
+    border-image: url(:/light/down_arrow.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QLabel
+{
+    border: 0ex solid black;
+}
+
+QTabWidget{
+    border: 0.1ex solid #BAB9B8;
+}
+
+/* BORDERS */
+QTabWidget::pane
+{
+    padding: 0.5ex;
+    margin: 0.1ex;
+}
+
+QTabWidget::pane:top
+{
+    border: 0.1ex solid #BAB9B8;
+    top: -0.1ex;
+}
+
+QTabWidget::pane:bottom
+{
+    border: 0.1ex solid #BAB9B8;
+    bottom: -0.1ex;
+}
+
+QTabWidget::pane:left
+{
+    border: 0.1ex solid #BAB9B8;
+    right: -0.1ex;
+}
+
+QTabWidget::pane:right
+{
+    border: 0.1ex solid #BAB9B8;
+    left: -0.1ex;
+}
+
+QTabBar
+{
+    qproperty-drawBase: 0;
+    left: 0.5ex; /* move to the right by 0.5ex */
+    border-radius: 0.3ex;
+}
+
+QTabBar:focus
+{
+    border: 0ex transparent black;
+}
+
+QTabBar::close-button
+{
+    border-image: url(:/light/close.svg);
+    width: 1.2ex;
+    height: 1.2ex;
+    background: transparent;
+}
+
+QTabBar::close-button:hover
+{
+    border-image: url(:/light/close-hover.svg);
+    width: 1.2ex;
+    height: 1.2ex;
+    background: transparent;
+}
+
+QTabBar::close-button:pressed
+{
+    border-image: url(:/light/close-pressed.svg);
+    width: 1.2ex;
+    height: 1.2ex;
+    background: transparent;
+}
+
+/* TOP TABS */
+QTabBar::tab:top
+{
+    color: #31363B;
+    border: 0.1ex transparent black;
+    border-left: 0.1ex solid #BAB9B8;
+    border-top: 0.1ex solid #BAB9B8;
+    background-color: #EFF0F1;
+    padding: 0.5ex;
+    min-width: 5ex;
+    border-top-left-radius: 0.2ex;
+    border-top-right-radius: 0.2ex;
+}
+
+QTabBar::tab:top:last,
+QTabBar::tab:top:only-one
+{
+    color: #31363B;
+    border: 0.1ex transparent black;
+    border-left: 0.1ex solid #BAB9B8;
+    border-right: 0.1ex solid #BAB9B8;
+    border-top: 0.1ex solid #BAB9B8;
+    background-color: #EFF0F1;
+    padding: 0.5ex;
+    min-width: 5ex;
+    border-top-left-radius: 0.2ex;
+    border-top-right-radius: 0.2ex;
+}
+
+QTabBar::tab:top:!selected
+{
+    color: #31363B;
+    background-color: #D9D8D7;
+    border: 0.1ex transparent black;
+    border-left: 0.1ex solid #BAB9B8;
+    border-top-left-radius: 0.2ex;
+    border-top-right-radius: 0.2ex;
+}
+
+QTabBar::tab:top:first:!selected
+{
+    color: #31363B;
+    background-color: #D9D8D7;
+    border: 0.1ex transparent black;
+    border-top-left-radius: 0.2ex;
+    border-top-right-radius: 0.2ex;
+}
+
+QTabBar::tab:top:!selected:hover
+{
+    background-color: rgba(61, 173, 232, 0.1);
+    border: 0.1ex rgba(61, 173, 232, 0.1);
+    border-left: 0.1ex solid #BAB9B8;
+}
+
+QTabBar::tab:top:!selected:first:hover
+{
+    background-color: rgba(61, 173, 232, 0.1);
+    border: 0.1ex rgba(61, 173, 232, 0.1);
+}
+
+/* BOTTOM TABS */
+QTabBar::tab:bottom
+{
+    color: #31363B;
+    border: 0.1ex transparent black;
+    border-left: 0.1ex solid #BAB9B8;
+    border-bottom: 0.1ex solid #BAB9B8;
+    background-color: #EFF0F1;
+    padding: 0.5ex;
+    border-bottom-left-radius: 0.2ex;
+    border-bottom-right-radius: 0.2ex;
+    min-width: 5ex;
+}
+
+QTabBar::tab:bottom:last,
+QTabBar::tab:bottom:only-one
+{
+    color: #31363B;
+    border: 0.1ex transparent black;
+    border-left: 0.1ex solid #BAB9B8;
+    border-right: 0.1ex solid #BAB9B8;
+    border-bottom: 0.1ex solid #BAB9B8;
+    background-color: #EFF0F1;
+    padding: 0.5ex;
+    border-bottom-left-radius: 0.2ex;
+    border-bottom-right-radius: 0.2ex;
+    min-width: 5ex;
+}
+
+QTabBar::tab:bottom:!selected
+{
+    color: #31363B;
+    background-color: #D9D8D7;
+    border: 0.1ex transparent black;
+    border-left: 0.1ex solid #BAB9B8;
+    border-bottom-left-radius: 0.2ex;
+    border-bottom-right-radius: 0.2ex;
+}
+
+QTabBar::tab:bottom:first:!selected
+{
+    color: #31363B;
+    background-color: #D9D8D7;
+    border: 0.1ex transparent black;
+    border-bottom-left-radius: 0.2ex;
+    border-bottom-right-radius: 0.2ex;
+}
+
+QTabBar::tab:bottom:!selected:hover
+{
+    background-color: rgba(61, 173, 232, 0.1);
+    border: 0.1ex rgba(61, 173, 232, 0.1);
+    border-left: 0.1ex solid #BAB9B8;
+}
+
+QTabBar::tab:bottom:!selected:first:hover
+{
+    background-color: rgba(61, 173, 232, 0.1);
+    border: 0.1ex rgba(61, 173, 232, 0.1);
+}
+
+/* LEFT TABS */
+QTabBar::tab:left
+{
+    color: #31363B;
+    border: 0.1ex transparent black;
+    border-top: 0.1ex solid #BAB9B8;
+    border-right: 0.1ex solid #BAB9B8;
+    background-color: #EFF0F1;
+    padding: 0.5ex;
+    border-top-right-radius: 0.2ex;
+    border-bottom-right-radius: 0.2ex;
+    min-height: 5ex;
+}
+
+QTabBar::tab:left:last,
+QTabBar::tab:left:only-one
+{
+    color: #31363B;
+    border: 0.1ex transparent black;
+    border-top: 0.1ex solid #BAB9B8;
+    border-bottom: 0.1ex solid #BAB9B8;
+    border-right: 0.1ex solid #BAB9B8;
+    background-color: #EFF0F1;
+    padding: 0.5ex;
+    border-top-right-radius: 0.2ex;
+    border-bottom-right-radius: 0.2ex;
+    min-height: 5ex;
+}
+
+QTabBar::tab:left:!selected
+{
+    color: #31363B;
+    background-color: #D9D8D7;
+    border: 0.1ex transparent black;
+    border-top: 0.1ex solid #BAB9B8;
+    border-top-right-radius: 0.2ex;
+    border-bottom-right-radius: 0.2ex;
+}
+
+QTabBar::tab:left:!selected:hover
+{
+    background-color: rgba(61, 173, 232, 0.1);
+    border: 0.1ex rgba(61, 173, 232, 0.1);
+    border-top: 0.1ex solid #BAB9B8;
+}
+
+QTabBar::tab:left:!selected:first:hover
+{
+    background-color: rgba(61, 173, 232, 0.1);
+    border: 0.1ex rgba(61, 173, 232, 0.1);
+}
+
+/* RIGHT TABS */
+QTabBar::tab:right
+{
+    color: #31363B;
+    border: 0.1ex transparent black;
+    border-top: 0.1ex solid #BAB9B8;
+    border-left: 0.1ex solid #BAB9B8;
+    background-color: #D9D8D7;
+    padding: 0.5ex;
+    border-top-left-radius: 0.2ex;
+    border-bottom-left-radius: 0.2ex;
+    min-height: 5ex;
+}
+
+QTabBar::tab:right:last,
+QTabBar::tab:right:only-one
+{
+    color: #31363B;
+    border: 0.1ex transparent black;
+    border-top: 0.1ex solid #BAB9B8;
+    border-bottom: 0.1ex solid #BAB9B8;
+    border-left: 0.1ex solid #BAB9B8;
+    background-color: #D9D8D7;
+    padding: 0.5ex;
+    border-top-left-radius: 0.2ex;
+    border-bottom-left-radius: 0.2ex;
+    min-height: 5ex;
+}
+
+QTabBar::tab:right:!selected
+{
+    color: #31363B;
+    background-color: #54575B;
+    border: 0.1ex transparent black;
+    border-top: 0.1ex solid #BAB9B8;
+    border-top-left-radius: 0.2ex;
+    border-bottom-left-radius: 0.2ex;
+}
+
+QTabBar::tab:right:!selected:hover
+{
+    background-color: rgba(61, 173, 232, 0.1);
+    border: 0.1ex rgba(61, 173, 232, 0.1);
+    border-top: 0.1ex solid #BAB9B8;
+}
+
+QTabBar::tab:right:!selected:first:hover
+{
+    background-color: rgba(61, 173, 232, 0.1);
+    border: 0.1ex rgba(61, 173, 232, 0.1);
+}
+
+QTabBar QToolButton::right-arrow:enabled
+{
+    border-image: url(:/light/right_arrow.svg);
+}
+
+QTabBar QToolButton::left-arrow:enabled
+{
+    border-image: url(:/light/left_arrow.svg);
+}
+
+QTabBar QToolButton::right-arrow:disabled
+{
+    border-image: url(:/light/right_arrow_disabled.svg);
+}
+
+QTabBar QToolButton::left-arrow:disabled
+{
+    border-image: url(:/light/left_arrow_disabled.svg);
+}
+
+QDockWidget
+{
+    background: #EFF0F1;
+    border: 0.1ex solid #403F3F;
+    titlebar-close-icon: url(:/light/transparent.svg);
+    titlebar-normal-icon: url(:/light/transparent.svg);
+}
+
+QDockWidget::close-button,
+QDockWidget::float-button
+{
+    border: 0.1ex solid transparent;
+    border-radius: 0.2ex;
+    background: transparent;
+}
+
+
+QDockWidget::float-button
+{
+    border-image: url(:/dark/undock.svg);
+}
+
+QDockWidget::float-button:hover
+{
+    border-image: url(:/dark/undock-hover.svg) ;
+}
+
+QDockWidget::close-button
+{
+    border-image: url(:/dark/close.svg) ;
+}
+
+QDockWidget::close-button:hover
+{
+    border-image: url(:/dark/close-hover.svg) ;
+}
+
+QDockWidget::close-button:pressed
+{
+    border-image: url(:/dark/close-pressed.svg) ;
+}
+
+QTreeView,
+QListView
+{
+    border: 0.1ex solid #BAB9B8;
+    background-color: #FCFCFC;
+}
+
+
+QTreeView::branch:has-siblings:!adjoins-item
+{
+    border-image: url(:/light/stylesheet-vline.svg) 0;
+}
+
+QTreeView::branch:has-siblings:adjoins-item
+{
+    border-image: url(:/light/stylesheet-branch-more.svg) 0;
+}
+
+QTreeView::branch:!has-children:!has-siblings:adjoins-item
+{
+    border-image: url(:/light/stylesheet-branch-end.svg) 0;
+}
+
+QTreeView::branch:has-children:!has-siblings:closed,
+QTreeView::branch:closed:has-children:has-siblings
+{
+    border-image: url(:/light/stylesheet-branch-end-closed.svg) 0;
+    image: url(:/light/branch_closed.svg);
+}
+
+QTreeView::branch:open:has-children:!has-siblings,
+QTreeView::branch:open:has-children:has-siblings
+{
+    border-image: url(:/light/stylesheet-branch-end-open.svg) 0;
+    image: url(:/light/branch_open.svg);
+}
+
+QTableView::item,
+QListView::item,
+QTreeView::item
+{
+    padding: 0.3ex;
+}
+
+QTableView::item:!selected:hover,
+QListView::item:!selected:hover,
+QTreeView::item:!selected:hover
+{
+    background-color: rgba(61, 173, 232, 0.1);
+    outline: 0;
+    color: #31363B;
+    padding: 0.3ex;
+}
+
+QSlider::groove:horizontal
+{
+    border: 0.1ex solid #EFF0F1;
+    height: 0.4ex;
+    background: #9CA0A4;
+    margin: 0px;
+    border-radius: 0.2ex;
+}
+
+QSlider::handle:horizontal
+{
+    background: #D9D8D7;
+    border: 0.1ex solid #BABEC2;
+    width: 1.6ex;
+    height: 1.6ex;
+    margin: -0.8ex 0;
+    border-radius: 0.9ex;
+}
+
+QSlider::groove:vertical
+{
+    border: 0.1ex solid #EFF0F1;
+    width: 0.4ex;
+    background: #9CA0A4;
+    margin: 0ex;
+    border-radius: 0.3ex;
+}
+
+QSlider::handle:vertical
+{
+    background: #D9D8D7;
+    border: 0.1ex solid #BABEC2;
+    width: 1.6ex;
+    height: 1.6ex;
+    margin: 0 -0.8ex;
+    border-radius: 0.9ex;
+}
+
+QSlider::handle:horizontal:focus,
+QSlider::handle:vertical:focus
+{
+    border: 0.1ex solid #33A4DF;
+}
+
+QSlider::handle:horizontal:hover,
+QSlider::handle:vertical:hover
+{
+    border: 0.1ex solid #51c2fc;
+}
+
+QSlider::sub-page:horizontal,
+QSlider::add-page:vertical
+{
+    background: #33A4DF;
+    border-radius: 0.3ex;
+}
+
+QSlider::add-page:horizontal,
+QSlider::sub-page:vertical
+{
+    background: #BABEC2;
+    border-radius: 0.3ex;
+}
+
+QToolButton
+{
+    background-color: transparent;
+    border: 0.1ex solid #BAB9B8;
+    border-radius: 0.2ex;
+    margin: 0.3ex;
+    padding: 0.5ex;
+}
+
+QToolButton[popupMode="1"] /* only for MenuButtonPopup */
+{
+    padding-right: 2ex; /* make way for the popup button */
+}
+
+QToolButton[popupMode="2"] /* only for InstantPopup */
+{
+    padding-right: 1ex; /* make way for the popup button */
+}
+
+QToolButton::menu-indicator
+{
+    border-image: url(:/light/down_arrow.svg);
+    top: -0.7ex; left: -0.2ex; /* shift it a bit */
+    width = 0.9ex;
+    height = 0.6ex;
+}
+
+QToolButton::menu-arrow
+{
+    border-image: url(:/light/down_arrow.svg);
+    width = 0.9ex;
+    height = 0.6ex;
+}
+
+QToolButton:hover,
+QToolButton::menu-button:hover
+{
+    background-color: transparent;
+    border: 0.1ex solid #33A4DF;
+}
+
+QToolButton:checked,
+QToolButton:pressed,
+QToolButton::menu-button:pressed
+{
+    background-color: #47b8fc;
+    border: 0.1ex solid #47b8fc;
+    padding: 0.5ex;
+}
+
+QToolButton::menu-button
+{
+    border: 0.1ex solid #BAB9B8;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+    /* 1ex width + 0.4ex for border + no text = 2ex allocated above */
+    width: 1ex;
+    padding: 0.5ex;
+    outline: none;
+}
+
+QToolButton::menu-arrow:open
+{
+    border: 0.1ex solid #BAB9B8;
+}
+
+QPushButton::menu-indicator
+{
+    subcontrol-origin: padding;
+    subcontrol-position: bottom right;
+    left: 0.8ex;
+}
+
+QTableView
+{
+    border: 0.1ex solid #BAB9B8;
+    gridline-color: #BAB9B8;
+    background-color: #FCFCFC;
+}
+
+
+QTableView,
+QHeaderView
+{
+    border-radius: 0px;
+}
+
+QTableView::item:pressed
+{
+    background: #33A4DF;
+    color: #31363B;
+}
+
+QTableView::item:selected:active
+{
+    background: #33A4DF;
+    color: #31363B;
+}
+
+QTableView::item:selected:hover
+{
+    background-color: #47b8f3;
+    color: #31363B;
+}
+
+QListView::item:pressed,
+QTreeView::item:pressed
+{
+    background: #3daee9;
+    color: #31363B;
+}
+
+QTreeView::item:selected:active,
+QListView::item:selected:active
+{
+    background: #3daee9;
+    color: #31363B;
+}
+
+QListView::item:selected:hover,
+QTreeView::item:selected:hover
+{
+    background-color: #51c2fc;
+    color: #31363B;
+}
+
+
+QHeaderView
+{
+    background-color: #EFF0F1;
+    border: 0.1ex transparent;
+    border-radius: 0px;
+    margin: 0px;
+    padding: 0px;
+
+}
+
+QHeaderView::section
+{
+    background-color: #EFF0F1;
+    color: #31363B;
+    padding: 0.5ex;
+    border: 0.1ex solid #BAB9B8;
+    border-radius: 0px;
+    text-align: center;
+}
+
+QHeaderView::section::vertical::first,
+QHeaderView::section::vertical::only-one
+{
+    border-top: 0.1ex solid #BAB9B8;
+}
+
+QHeaderView::section::vertical
+{
+    border-top: transparent;
+}
+
+QHeaderView::section::horizontal::first, QHeaderView::section::horizontal::only-one
+{
+    border-left: 0.1ex solid #BAB9B8;
+}
+
+QHeaderView::section::horizontal
+{
+    border-left: transparent;
+}
+
+
+QHeaderView::section:checked
+
+ {
+    color: black;
+    background-color: #b9dae7;
+ }
+
+ /* style the sort indicator */
+QHeaderView::down-arrow
+{
+    image: url(:/light/down_arrow.svg);
+}
+
+QHeaderView::up-arrow
+{
+    image: url(:/light/up_arrow.svg);
+}
+
+QTableCornerButton::section
+{
+    background-color: #EFF0F1;
+    border: 0.1ex transparent #BAB9B8;
+    border-radius: 0px;
+}
+
+QToolBox
+{
+    padding: 0.5ex;
+    border: 0.1ex transparent black;
+}
+
+QToolBox:selected
+{
+    background-color: #EFF0F1;
+    border-color: #33A4DF;
+}
+
+QToolBox:hover
+{
+    border-color: #33A4DF;
+}
+
+QStatusBar::item
+{
+    border: 0px transparent dark;
+}
+
+QSplitter::handle
+{
+    border: 0.1ex dashed #BAB9B8;
+}
+
+QSplitter::handle:hover
+{
+    background-color: #787876;
+    border: 0.1ex solid #BAB9B8;
+}
+
+QSplitter::handle:horizontal
+{
+    width: 0.1ex;
+}
+
+QSplitter::handle:vertical
+{
+    height: 0.1ex;
+}
+
+QProgressBar:horizontal
+{
+    background-color: #BABEC2;
+    border: 0.1ex solid #EFF0F1;
+    border-radius: 0.3ex;
+    height: 0.5ex;
+    text-align: right;
+    margin-top: 0.5ex;
+    margin-bottom: 0.5ex;
+    margin-right: 5ex;
+    padding: 0px;
+}
+
+QProgressBar::chunk:horizontal
+{
+    background-color: #33A4DF;
+    border: 0.1ex transparent;
+    border-radius: 0.3ex;
+}
+
+QAbstractSpinBox
+{
+    background-color: #EFF0F1;
+}
+
+QSpinBox,
+QDoubleSpinBox
+{
+    padding-right: 1.5ex;
+}
+
+QSpinBox::up-button,
+QDoubleSpinBox::up-button
+{
+    subcontrol-origin: content;
+    subcontrol-position: right top;
+
+    width: 1.6ex;
+    border-width: 0.1ex;
+}
+
+QSpinBox::up-arrow,
+QDoubleSpinBox::up-arrow
+{
+    border-image: url(:/light/up_arrow.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QSpinBox::up-arrow:hover,
+QSpinBox::up-arrow:pressed,
+QDoubleSpinBox::up-arrow:hover,
+QDoubleSpinBox::up-arrow:pressed
+{
+    border-image: url(:/light/up_arrow-hover.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QSpinBox::up-arrow:disabled,
+QSpinBox::up-arrow:off,
+QDoubleSpinBox::up-arrow:disabled,
+QDoubleSpinBox::up-arrow:off
+{
+   border-image: url(:/light/up_arrow_disabled.svg);
+}
+
+QSpinBox::down-button,
+QDoubleSpinBox::down-button
+{
+    subcontrol-origin: content;
+    subcontrol-position: right bottom;
+
+    width: 1.6ex;
+    border-width: 0.1ex;
+}
+
+QSpinBox::down-arrow,
+QDoubleSpinBox::down-arrow
+{
+    border-image: url(:/light/down_arrow.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QSpinBox::down-arrow:hover,
+QSpinBox::down-arrow:pressed,
+QDoubleSpinBox::down-arrow:hover,
+QDoubleSpinBox::down-arrow:pressed
+{
+    border-image: url(:/light/down_arrow-hover.svg);
+    width: 0.9ex;
+    height: 0.6ex;
+}
+
+QSpinBox::down-arrow:disabled,
+QSpinBox::down-arrow:off,
+QDoubleSpinBox::down-arrow:disabled,
+QDoubleSpinBox::down-arrow:off
+{
+   border-image: url(:/light/down_arrow_disabled.svg);
+}
+
+QPushButton:hover
+{
+    border: 0.1ex solid #3daef3;
+    color: #31363B;
+}
+
+QPushButton:focus
+{
+    background-color: qlineargradient(x1: 0.5, y1: 0.5 x2: 0.5, y2: 1, stop: 0 #4cbdff, stop: 0.5 #33a4e8);
+    color: white;
+}
+
+QPushButton:focus:hover
+{
+    background-color: qlineargradient(x1: 0.5, y1: 0.5 x2: 0.5, y2: 1, stop: 0 #bedfec, stop: 0.5 #b9dae7);
+    color: #31363B;
+}
+
+QPushButton:focus:pressed,
+QPushButton:pressed
+{
+    background-color: qlineargradient(x1: 0.5, y1: 0.5 x2: 0.5, y2: 1, stop: 0 #bedfec, stop: 0.5 #b9dae7);
+    color: #31363B;
+}
+
diff --git a/runtime/light/branch_closed-on.svg b/runtime/light/branch_closed-on.svg
new file mode 100644
index 000000000..23c542188
--- /dev/null
+++ b/runtime/light/branch_closed-on.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="9">
+  <path fill="#000" fill-rule="evenodd" d="M1,8V1L5,4.5Z"/>
+</svg>
diff --git a/runtime/light/branch_closed.svg b/runtime/light/branch_closed.svg
new file mode 100644
index 000000000..286c1a9e9
--- /dev/null
+++ b/runtime/light/branch_closed.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="18">
+  <path fill="#4b4b4b" d="M5,12V6L9,9Z"/>
+</svg>
diff --git a/runtime/light/branch_open-on.svg b/runtime/light/branch_open-on.svg
new file mode 100644
index 000000000..9e759272b
--- /dev/null
+++ b/runtime/light/branch_open-on.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="6">
+  <path fill="#000" d="M1,1H8L4.5,5Z"/>
+</svg>
diff --git a/runtime/light/branch_open.svg b/runtime/light/branch_open.svg
new file mode 100644
index 000000000..514a3125d
--- /dev/null
+++ b/runtime/light/branch_open.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="12">
+  <path fill="#4b4b4b" d="M5.5,3H12.5L9,9Z"/>
+</svg>
diff --git a/runtime/light/checkbox_checked-hover.svg b/runtime/light/checkbox_checked-hover.svg
new file mode 100644
index 000000000..64d666710
--- /dev/null
+++ b/runtime/light/checkbox_checked-hover.svg
@@ -0,0 +1,5 @@
+<svg x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+  <path d="M2,2 h14 v14 h-0.9 v-13.1 h-13.1 z" fill="#51c2fc"/>
+  <path d="M16,16 h-14 v-14 h0.9 v13.1 h13.1 z" fill="#51c2fc"/>
+  <path d="M5,5 h8 v8 h-8 v-8 z" fill="#51c2fc" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/light/checkbox_checked.svg b/runtime/light/checkbox_checked.svg
new file mode 100644
index 000000000..f3acb639c
--- /dev/null
+++ b/runtime/light/checkbox_checked.svg
@@ -0,0 +1,5 @@
+<svg x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+  <path d="M2,2 h14 v14 h-0.9 v-13.1 h-13.1 z" fill="#3daee9"/>
+  <path d="M16,16 h-14 v-14 h0.9 v13.1 h13.1 z" fill="#3daee9"/>
+  <path d="M5,5 h8 v8 h-8 v-8 z" fill="#3daee9" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/light/checkbox_checked_disabled.svg b/runtime/light/checkbox_checked_disabled.svg
new file mode 100644
index 000000000..b7be04b6a
--- /dev/null
+++ b/runtime/light/checkbox_checked_disabled.svg
@@ -0,0 +1,5 @@
+<svg x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+  <path d="M2,2 h14 v14 h-0.9 v-13.1 h-13.1 z" fill="#31363B"/>
+  <path d="M16,16 h-14 v-14 h0.9 v13.1 h13.1 z" fill="#31363B"/>
+  <path d="M5,5 h8 v8 h-8 v-8 z" fill="#31363B" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/light/checkbox_indeterminate-hover.svg b/runtime/light/checkbox_indeterminate-hover.svg
new file mode 100644
index 000000000..def959679
--- /dev/null
+++ b/runtime/light/checkbox_indeterminate-hover.svg
@@ -0,0 +1,7 @@
+<svg x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+  <path d="M2,2 h14 v14 h-0.9 v-13.1 h-13.1 z" fill="#51c2fc"/>
+  <path d="M16,16 h-14 v-14 h0.9 v13.1 h13.1 z" fill="#51c2fc"/>
+  <path d="M5,5 h8 v8 h-0.9 v-7.1 h-7.1 z" fill="#51c2fc" fill-rule="evenodd"/>
+  <path d="M13,13 h-8 v-8 h0.9 v7.1 h7.1 z" fill="#51c2fc" fill-rule="evenodd"/>
+  <path d="M13,5 L 5,13 v-8 h8 z" fill="#51c2fc" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/light/checkbox_indeterminate.svg b/runtime/light/checkbox_indeterminate.svg
new file mode 100644
index 000000000..a619ab03e
--- /dev/null
+++ b/runtime/light/checkbox_indeterminate.svg
@@ -0,0 +1,7 @@
+<svg x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+  <path d="M2,2 h14 v14 h-0.9 v-13.1 h-13.1 z" fill="#3daee9"/>
+  <path d="M16,16 h-14 v-14 h0.9 v13.1 h13.1 z" fill="#3daee9"/>
+  <path d="M5,5 h8 v8 h-0.9 v-7.1 h-7.1 z" fill="#3daee9" fill-rule="evenodd"/>
+  <path d="M13,13 h-8 v-8 h0.9 v7.1 h7.1 z" fill="#3daee9" fill-rule="evenodd"/>
+  <path d="M13,5 L 5,13 v-8 h8 z" fill="#3daee9" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/light/checkbox_indeterminate_disabled.svg b/runtime/light/checkbox_indeterminate_disabled.svg
new file mode 100644
index 000000000..74d716860
--- /dev/null
+++ b/runtime/light/checkbox_indeterminate_disabled.svg
@@ -0,0 +1,7 @@
+<svg x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+  <path d="M2,2 h14 v14 h-0.9 v-13.1 h-13.1 z" fill="#31363B"/>
+  <path d="M16,16 h-14 v-14 h0.9 v13.1 h13.1 z" fill="#31363B"/>
+  <path d="M5,5 h8 v8 h-0.9 v-7.1 h-7.1 z" fill="#31363B" fill-rule="evenodd"/>
+  <path d="M13,13 h-8 v-8 h0.9 v7.1 h7.1 z" fill="#31363B" fill-rule="evenodd"/>
+  <path d="M13,5 L 5,13 v-8 h8 z" fill="#31363B" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/light/checkbox_unchecked-hover.svg b/runtime/light/checkbox_unchecked-hover.svg
new file mode 100644
index 000000000..8f0bb0145
--- /dev/null
+++ b/runtime/light/checkbox_unchecked-hover.svg
@@ -0,0 +1,4 @@
+<svg x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+  <path d="M2,2 h14 v14 h-0.9 v-13.1 h-13.1 z" fill="#51c2fc"/>
+  <path d="M16,16 h-14 v-14 h0.9 v13.1 h13.1 z" fill="#51c2fc"/>
+</svg>
diff --git a/runtime/light/checkbox_unchecked_disabled.svg b/runtime/light/checkbox_unchecked_disabled.svg
new file mode 100644
index 000000000..0ef430079
--- /dev/null
+++ b/runtime/light/checkbox_unchecked_disabled.svg
@@ -0,0 +1,4 @@
+<svg x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+  <path d="M2,2 h14 v14 h-0.9 v-13.1 h-13.1 z" fill="#31363B"/>
+  <path d="M16,16 h-14 v-14 h0.9 v13.1 h13.1 z" fill="#31363B"/>
+</svg>
diff --git a/runtime/light/close-hover.svg b/runtime/light/close-hover.svg
new file mode 100644
index 000000000..cb44c7811
--- /dev/null
+++ b/runtime/light/close-hover.svg
@@ -0,0 +1,3 @@
+<svg width="1200" height="1200">
+  <path d="M 600,1050 C 351.472,1050 150,848.528 150,600 150,351.472 351.472,150 600,150 c 248.528,0 450,201.472 450,450 0,248.528 -201.472,450 -450,450 z M 888.462,827.851 661.974,601.122 l 0,-2.244 226.488,-226.729 0,-60.611 -60.848,0 Q 727.339,411.986 627.043,512.451 613.524,525.358 600,538.267 l -226.487,-226.729 -61.975,0 0,60.611 L 538.026,600 311.538,826.729 l 0,61.733 60.848,0 q 34.363,-34.792 68.735,-69.59 L 600,661.733 l 226.487,226.729 61.975,0 0,-60.611 z" fill="#dc7676"/>
+</svg>
diff --git a/runtime/light/close-pressed.svg b/runtime/light/close-pressed.svg
new file mode 100644
index 000000000..a0dc2496f
--- /dev/null
+++ b/runtime/light/close-pressed.svg
@@ -0,0 +1,3 @@
+<svg width="1200" height="1200">
+  <path d="M 600,1050 C 351.472,1050 150,848.528 150,600 150,351.472 351.472,150 600,150 c 248.528,0 450,201.472 450,450 0,248.528 -201.472,450 -450,450 z M 888.462,827.851 661.974,601.122 l 0,-2.244 226.488,-226.729 0,-60.611 -60.848,0 Q 727.339,411.986 627.043,512.451 613.524,525.358 600,538.267 l -226.487,-226.729 -61.975,0 0,60.611 L 538.026,600 311.538,826.729 l 0,61.733 60.848,0 q 34.363,-34.792 68.735,-69.59 L 600,661.733 l 226.487,226.729 61.975,0 0,-60.611 z" fill="#b33e3e"/>
+</svg>
diff --git a/runtime/light/close.svg b/runtime/light/close.svg
new file mode 100644
index 000000000..07b50c9e3
--- /dev/null
+++ b/runtime/light/close.svg
@@ -0,0 +1,3 @@
+<svg width="1200" height="1200">
+  <path d="M 600,1050 C 351.472,1050 150,848.528 150,600 150,351.472 351.472,150 600,150 c 248.528,0 450,201.472 450,450 0,248.528 -201.472,450 -450,450 z M 888.462,827.851 661.974,601.122 l 0,-2.244 226.488,-226.729 0,-60.611 -60.848,0 Q 727.339,411.986 627.043,512.451 613.524,525.358 600,538.267 l -226.487,-226.729 -61.975,0 0,60.611 L 538.026,600 311.538,826.729 l 0,61.733 60.848,0 q 34.363,-34.792 68.735,-69.59 L 600,661.733 l 226.487,226.729 61.975,0 0,-60.611 z" fill="#626568"/>
+</svg>
diff --git a/runtime/light/down_arrow-hover.svg b/runtime/light/down_arrow-hover.svg
new file mode 100644
index 000000000..408397f95
--- /dev/null
+++ b/runtime/light/down_arrow-hover.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="9px" height="6px" viewBox="0 0 9 6" enable-background="new 0 0 9 6" xml:space="preserve">
+  <path d="M 1.1894592,0.91769718 4.5,4.2280182 7.8105408,0.91627648 c 0.1577125,-0.157702 0.4134624,-0.157702 0.5711749,0 0.1577124,0.15770202 0.1577124,0.41343492 0,0.57113692 l -3.5961283,3.5973102 0,0 0,0 c -0.1577124,0.1577019 -0.4134624,0.1577019 -0.5711748,0 L 0.6182843,1.4874134 c -0.1577124,-0.157702 -0.1577124,-0.4134349 0,-0.57113692 0.1577125,-0.15628131 0.4134624,-0.15628131 0.5711749,0.00142 z" fill="#3daee9"/>
+</svg>
diff --git a/runtime/light/down_arrow.svg b/runtime/light/down_arrow.svg
new file mode 100644
index 000000000..34c5d6a31
--- /dev/null
+++ b/runtime/light/down_arrow.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="9px" height="6px" viewBox="0 0 9 6" enable-background="new 0 0 9 6" xml:space="preserve">
+  <path d="M 1.1894592,0.91769718 4.5,4.2280182 7.8105408,0.91627648 c 0.1577125,-0.157702 0.4134624,-0.157702 0.5711749,0 0.1577124,0.15770202 0.1577124,0.41343492 0,0.57113692 l -3.5961283,3.5973102 0,0 0,0 c -0.1577124,0.1577019 -0.4134624,0.1577019 -0.5711748,0 L 0.6182843,1.4874134 c -0.1577124,-0.157702 -0.1577124,-0.4134349 0,-0.57113692 0.1577125,-0.15628131 0.4134624,-0.15628131 0.5711749,0.00142 z" fill="#31363B"/>
+</svg>
diff --git a/runtime/light/down_arrow_disabled.svg b/runtime/light/down_arrow_disabled.svg
new file mode 100644
index 000000000..af74a3075
--- /dev/null
+++ b/runtime/light/down_arrow_disabled.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="9px" height="6px" viewBox="0 0 9 6" enable-background="new 0 0 9 6" xml:space="preserve">
+  <path d="M 1.1894592,0.91769718 4.5,4.2280182 7.8105408,0.91627648 c 0.1577125,-0.157702 0.4134624,-0.157702 0.5711749,0 0.1577124,0.15770202 0.1577124,0.41343492 0,0.57113692 l -3.5961283,3.5973102 0,0 0,0 c -0.1577124,0.1577019 -0.4134624,0.1577019 -0.5711748,0 L 0.6182843,1.4874134 c -0.1577124,-0.157702 -0.1577124,-0.4134349 0,-0.57113692 0.1577125,-0.15628131 0.4134624,-0.15628131 0.5711749,0.00142 z" fill="#b0b0b0"/>
+</svg>
diff --git a/runtime/light/hmovetoolbar.svg b/runtime/light/hmovetoolbar.svg
new file mode 100644
index 000000000..57e54c95a
--- /dev/null
+++ b/runtime/light/hmovetoolbar.svg
@@ -0,0 +1,5 @@
+<svg x="0px" y="0px" width="16px" height="64px" viewBox="0 0 16 64" enable-background="new 0 0 16 64" xml:space="preserve">
+  <rect fill="#76797c" x="2" y="1" width="1" height="62.5"/>
+  <rect fill="#76797c" x="9" y="1" width="1" height="62.5"/>
+</svg>
+
diff --git a/runtime/light/hsepartoolbar.svg b/runtime/light/hsepartoolbar.svg
new file mode 100644
index 000000000..a44642539
--- /dev/null
+++ b/runtime/light/hsepartoolbar.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="7px" height="63px" viewBox="0 0 7 63" enable-background="new 0 0 7 63" xml:space="preserve">
+  <rect fill="#76797c" x="2" y="13" width="1" height="37"/>
+</svg>
diff --git a/runtime/light/left_arrow.svg b/runtime/light/left_arrow.svg
new file mode 100644
index 000000000..f77acf4cf
--- /dev/null
+++ b/runtime/light/left_arrow.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="6px" height="9px" viewBox="0 0 6 9" enable-background="new 0 0 6 9" xml:space="preserve">
+  <path d="m 5.0823028,1.1894593 -3.310321,3.3105408 3.3117417,3.3105408 c 0.157702,0.1577125 0.157702,0.4134624 0,0.5711749 -0.157702,0.1577123 -0.4134349,0.1577123 -0.5711369,0 l -3.59731017,-3.5961283 0,0 0,0 c -0.15770191,-0.1577124 -0.15770191,-0.4134624 0,-0.5711748 L 4.5125866,0.61828437 c 0.157702,-0.1577124 0.4134349,-0.1577124 0.5711369,0 0.1562813,0.1577125 0.1562813,0.41346243 -0.00142,0.57117493 z" fill="#31363B"/>
+</svg>
diff --git a/runtime/light/left_arrow_disabled.svg b/runtime/light/left_arrow_disabled.svg
new file mode 100644
index 000000000..2d749e725
--- /dev/null
+++ b/runtime/light/left_arrow_disabled.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="6px" height="9px" viewBox="0 0 6 9" enable-background="new 0 0 6 9" xml:space="preserve">
+  <path d="m 5.0823028,1.1894593 -3.310321,3.3105408 3.3117417,3.3105408 c 0.157702,0.1577125 0.157702,0.4134624 0,0.5711749 -0.157702,0.1577123 -0.4134349,0.1577123 -0.5711369,0 l -3.59731017,-3.5961283 0,0 0,0 c -0.15770191,-0.1577124 -0.15770191,-0.4134624 0,-0.5711748 L 4.5125866,0.61828437 c 0.157702,-0.1577124 0.4134349,-0.1577124 0.5711369,0 0.1562813,0.1577125 0.1562813,0.41346243 -0.00142,0.57117493 z" fill="#b0b0b0"/>
+</svg>
diff --git a/runtime/light/radio_checked-hover.svg b/runtime/light/radio_checked-hover.svg
new file mode 100644
index 000000000..f3d5c9899
--- /dev/null
+++ b/runtime/light/radio_checked-hover.svg
@@ -0,0 +1,5 @@
+<svg x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+  <path d="M1,10a9,9 0 1,0 18,0 h-0.9 a8.1,8.1 0 1,1 -16.2,0 h-0.9" fill="#51c2fc" fill-rule="evenodd"/>
+  <path d="M1,10a9,9 0 1,1 18,0 h-0.9 a8.1,8.1 0 1,0 -16.2,0 h-0.9" fill="#51c2fc" fill-rule="evenodd"/>
+  <path d="M4,10a6,6 0 1,0 12,0a6,6 0 1,0 -12,0" fill="#51c2fc" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/light/radio_checked.svg b/runtime/light/radio_checked.svg
new file mode 100644
index 000000000..86ff6bfac
--- /dev/null
+++ b/runtime/light/radio_checked.svg
@@ -0,0 +1,5 @@
+<svg x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+  <path d="M1,10a9,9 0 1,0 18,0 h-0.9 a8.1,8.1 0 1,1 -16.2,0 h-0.9" fill="#3daee9" fill-rule="evenodd"/>
+  <path d="M1,10a9,9 0 1,1 18,0 h-0.9 a8.1,8.1 0 1,0 -16.2,0 h-0.9" fill="#3daee9" fill-rule="evenodd"/>
+  <path d="M4,10a6,6 0 1,0 12,0a6,6 0 1,0 -12,0" fill="#3daee9" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/light/radio_checked_disabled.svg b/runtime/light/radio_checked_disabled.svg
new file mode 100644
index 000000000..269ae12dc
--- /dev/null
+++ b/runtime/light/radio_checked_disabled.svg
@@ -0,0 +1,5 @@
+<svg x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+  <path d="M1,10a9,9 0 1,0 18,0 h-0.9 a8.1,8.1 0 1,1 -16.2,0 h-0.9" fill="#31363B" fill-rule="evenodd"/>
+  <path d="M1,10a9,9 0 1,1 18,0 h-0.9 a8.1,8.1 0 1,0 -16.2,0 h-0.9" fill="#31363B" fill-rule="evenodd"/>
+  <path d="M4,10a6,6 0 1,0 12,0a6,6 0 1,0 -12,0" fill="#31363B" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/light/radio_unchecked-hover.svg b/runtime/light/radio_unchecked-hover.svg
new file mode 100644
index 000000000..f5fc94389
--- /dev/null
+++ b/runtime/light/radio_unchecked-hover.svg
@@ -0,0 +1,4 @@
+<svg x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+  <path d="M1,10a9,9 0 1,0 18,0 h-0.9 a8.1,8.1 0 1,1 -16.2,0 h-0.9" fill="#51c2fc" fill-rule="evenodd"/>
+  <path d="M1,10a9,9 0 1,1 18,0 h-0.9 a8.1,8.1 0 1,0 -16.2,0 h-0.9" fill="#51c2fc" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/light/radio_unchecked_disabled.svg b/runtime/light/radio_unchecked_disabled.svg
new file mode 100644
index 000000000..41f503d75
--- /dev/null
+++ b/runtime/light/radio_unchecked_disabled.svg
@@ -0,0 +1,4 @@
+<svg x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+  <path d="M1,10a9,9 0 1,0 18,0 h-0.9 a8.1,8.1 0 1,1 -16.2,0 h-0.9" fill="#31363B" fill-rule="evenodd"/>
+  <path d="M1,10a9,9 0 1,1 18,0 h-0.9 a8.1,8.1 0 1,0 -16.2,0 h-0.9" fill="#31363B" fill-rule="evenodd"/>
+</svg>
diff --git a/runtime/light/right_arrow.svg b/runtime/light/right_arrow.svg
new file mode 100644
index 000000000..a43ea2b62
--- /dev/null
+++ b/runtime/light/right_arrow.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="6px" height="9px" viewBox="0 0 6 9" enable-background="new 0 0 6 9" xml:space="preserve">
+  <path d="m 0.9166972,1.1894593 3.310321,3.3105408 -3.3117417,3.3105408 c -0.157702,0.1577125 -0.157702,0.4134624 0,0.5711749 0.157702,0.1577123 0.4134349,0.1577123 0.5711369,0 l 3.5973102,-3.5961283 0,0 0,0 c 0.1577019,-0.1577124 0.1577019,-0.4134624 0,-0.5711748 L 1.4864134,0.61828437 c -0.157702,-0.1577124 -0.4134349,-0.1577124 -0.5711369,0 -0.1562813,0.1577125 -0.1562813,0.41346243 0.00142,0.57117493 z" fill="#31363B"/>
+</svg>
diff --git a/runtime/light/right_arrow_disabled.svg b/runtime/light/right_arrow_disabled.svg
new file mode 100644
index 000000000..4940025ef
--- /dev/null
+++ b/runtime/light/right_arrow_disabled.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="9">
+  <path d="m 0.9166972,1.1894593 3.310321,3.3105408 -3.3117417,3.3105408 c -0.157702,0.1577125 -0.157702,0.4134624 0,0.5711749 0.157702,0.1577123 0.4134349,0.1577123 0.5711369,0 l 3.5973102,-3.5961283 0,0 0,0 c 0.1577019,-0.1577124 0.1577019,-0.4134624 0,-0.5711748 L 1.4864134,0.61828437 c -0.157702,-0.1577124 -0.4134349,-0.1577124 -0.5711369,0 -0.1562813,0.1577125 -0.1562813,0.41346243 0.00142,0.57117493 z" fill="#b0b0b0"/>
+</svg>
diff --git a/runtime/light/sizegrip.svg b/runtime/light/sizegrip.svg
new file mode 100644
index 000000000..3388f07dc
--- /dev/null
+++ b/runtime/light/sizegrip.svg
@@ -0,0 +1,3 @@
+<svg width="1000" height="1000">
+  <path fill="#b0b0b0" d="M22.1,1022.1L-22.1,977.9l1000-1000L1022.1,22.1Zm220,30L197.9,1007.9l1000-1000L1242.1,52.1Zm250,0L447.9,1007.9l1000-1000L1492.1,52.1Zm250,0L697.9,1007.9l1030-1030L1772.1,22.1Z"/>
+</svg>
diff --git a/runtime/light/spinup_disabled.svg b/runtime/light/spinup_disabled.svg
new file mode 100644
index 000000000..838436d0a
--- /dev/null
+++ b/runtime/light/spinup_disabled.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="6">
+  <path d="M 1.1894592,5.0833028 4.5,1.7729818 7.8105408,5.0847235 c 0.1577125,0.157702 0.4134624,0.157702 0.5711749,0 0.1577124,-0.157702 0.1577124,-0.4134349 0,-0.5711369 l -3.5961283,-3.59731019 0,0 0,0 c -0.1577124,-0.1577019 -0.4134624,-0.1577019 -0.5711748,0 L 0.6182843,4.5135866 c -0.1577124,0.157702 -0.1577124,0.4134349 0,0.5711369 0.1577125,0.1562813 0.4134624,0.1562813 0.5711749,-0.00142 z" fill="#b0b0b0"/>
+</svg>
diff --git a/runtime/light/stylesheet-branch-end-closed.svg b/runtime/light/stylesheet-branch-end-closed.svg
new file mode 100644
index 000000000..a31f5c0c1
--- /dev/null
+++ b/runtime/light/stylesheet-branch-end-closed.svg
@@ -0,0 +1,4 @@
+<svg width="81" height="58">
+  <rect id="VLine" fill="#bcbfc2" x="36" width="2" height="14"/>
+  <rect id="HLine" fill="#bcbfc2" x="65" y="28" height="1" width="28"/>
+</svg>
diff --git a/runtime/light/stylesheet-branch-end-open.svg b/runtime/light/stylesheet-branch-end-open.svg
new file mode 100644
index 000000000..a31f5c0c1
--- /dev/null
+++ b/runtime/light/stylesheet-branch-end-open.svg
@@ -0,0 +1,4 @@
+<svg width="81" height="58">
+  <rect id="VLine" fill="#bcbfc2" x="36" width="2" height="14"/>
+  <rect id="HLine" fill="#bcbfc2" x="65" y="28" height="1" width="28"/>
+</svg>
diff --git a/runtime/light/stylesheet-branch-end.svg b/runtime/light/stylesheet-branch-end.svg
new file mode 100644
index 000000000..a1c0a4281
--- /dev/null
+++ b/runtime/light/stylesheet-branch-end.svg
@@ -0,0 +1,4 @@
+<svg width="81" height="58">
+  <rect id="VLine" fill="#bcbfc2" x="36" width="2" height="28"/>
+  <rect id="HLine" fill="#bcbfc2" x="36" y="28" height="1" width="57"/>
+</svg>
diff --git a/runtime/light/stylesheet-branch-more.svg b/runtime/light/stylesheet-branch-more.svg
new file mode 100644
index 000000000..ebef8398a
--- /dev/null
+++ b/runtime/light/stylesheet-branch-more.svg
@@ -0,0 +1,4 @@
+<svg width="81" height="58">
+  <rect id="VLine" fill="#bcbfc2" x="36" width="2" height="58"/>
+  <rect id="HLine" fill="#bcbfc2" x="36" y="30" height="1" width="44"/>
+</svg>
diff --git a/runtime/light/stylesheet-vline.svg b/runtime/light/stylesheet-vline.svg
new file mode 100644
index 000000000..688177ea7
--- /dev/null
+++ b/runtime/light/stylesheet-vline.svg
@@ -0,0 +1,3 @@
+<svg width="81" height="58">
+  <rect fill="#bcbfc2" x="36" width="2" height="58"/>
+</svg>
diff --git a/runtime/light/transparent.svg b/runtime/light/transparent.svg
new file mode 100644
index 000000000..3a8ca5cf6
--- /dev/null
+++ b/runtime/light/transparent.svg
@@ -0,0 +1 @@
+<svg width="64" height="64"/>
diff --git a/runtime/light/undock-hover.svg b/runtime/light/undock-hover.svg
new file mode 100644
index 000000000..6bddbd721
--- /dev/null
+++ b/runtime/light/undock-hover.svg
@@ -0,0 +1,5 @@
+<svg width="1000" height="1000" >
+  <path id="BottomCircle" d="M100,500 a250,250, 0, 1,0, 800,0 M775,500 L500,775 L225,500 z" fill="#a2a2a2" />
+  <path id="TopCircle" d="M900,500 a250,250, 0, 1,0, -800,0 M225,500 L500,225 L775,500  z" fill="#a2a2a2" />
+  <path id="Inside" d="M275,500 L 500,725 L 725,500 L 500,275 z" fill="#a2a2a2" />
+</svg>
diff --git a/runtime/light/undock.svg b/runtime/light/undock.svg
new file mode 100644
index 000000000..9ab21971c
--- /dev/null
+++ b/runtime/light/undock.svg
@@ -0,0 +1,3 @@
+<svg width="1000" height="1000" >
+  <path d="M250,500 L 500,750 L 750,500 L 500,250 z" fill="none" stroke="#a2a2a2" stroke-width="50" />
+</svg>
diff --git a/runtime/light/up_arrow-hover.svg b/runtime/light/up_arrow-hover.svg
new file mode 100644
index 000000000..dd1271a5b
--- /dev/null
+++ b/runtime/light/up_arrow-hover.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="9px" height="6px" viewBox="0 0 9 6" enable-background="new 0 0 9 6" xml:space="preserve">
+  <path d="M 1.1894592,5.0833028 4.5,1.7729818 7.8105408,5.0847235 c 0.1577125,0.157702 0.4134624,0.157702 0.5711749,0 0.1577124,-0.157702 0.1577124,-0.4134349 0,-0.5711369 l -3.5961283,-3.59731019 0,0 0,0 c -0.1577124,-0.1577019 -0.4134624,-0.1577019 -0.5711748,0 L 0.6182843,4.5135866 c -0.1577124,0.157702 -0.1577124,0.4134349 0,0.5711369 0.1577125,0.1562813 0.4134624,0.1562813 0.5711749,-0.00142 z" fill="#3daee9"/>
+</svg>
diff --git a/runtime/light/up_arrow.svg b/runtime/light/up_arrow.svg
new file mode 100644
index 000000000..b02bb266b
--- /dev/null
+++ b/runtime/light/up_arrow.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="9px" height="6px" viewBox="0 0 9 6" enable-background="new 0 0 9 6" xml:space="preserve">
+  <path d="M 1.1894592,5.0833028 4.5,1.7729818 7.8105408,5.0847235 c 0.1577125,0.157702 0.4134624,0.157702 0.5711749,0 0.1577124,-0.157702 0.1577124,-0.4134349 0,-0.5711369 l -3.5961283,-3.59731019 0,0 0,0 c -0.1577124,-0.1577019 -0.4134624,-0.1577019 -0.5711748,0 L 0.6182843,4.5135866 c -0.1577124,0.157702 -0.1577124,0.4134349 0,0.5711369 0.1577125,0.1562813 0.4134624,0.1562813 0.5711749,-0.00142 z" fill="#31363B"/>
+</svg>
diff --git a/runtime/light/up_arrow_disabled.svg b/runtime/light/up_arrow_disabled.svg
new file mode 100644
index 000000000..742e1c549
--- /dev/null
+++ b/runtime/light/up_arrow_disabled.svg
@@ -0,0 +1,3 @@
+<svg x="0px" y="0px" width="9px" height="6px" viewBox="0 0 9 6" enable-background="new 0 0 9 6" xml:space="preserve">
+  <path d="M 1.1894592,5.0833028 4.5,1.7729818 7.8105408,5.0847235 c 0.1577125,0.157702 0.4134624,0.157702 0.5711749,0 0.1577124,-0.157702 0.1577124,-0.4134349 0,-0.5711369 l -3.5961283,-3.59731019 0,0 0,0 c -0.1577124,-0.1577019 -0.4134624,-0.1577019 -0.5711748,0 L 0.6182843,4.5135866 c -0.1577124,0.157702 -0.1577124,0.4134349 0,0.5711369 0.1577125,0.1562813 0.4134624,0.1562813 0.5711749,-0.00142 z" fill="#b0b0b0"/>
+</svg>
diff --git a/runtime/light/vmovetoolbar.svg b/runtime/light/vmovetoolbar.svg
new file mode 100644
index 000000000..0a30d45ef
--- /dev/null
+++ b/runtime/light/vmovetoolbar.svg
@@ -0,0 +1,8 @@
+<svg x="0px" y="0px" width="54px" height="10px" viewBox="0 0 54 10" enable-background="new 0 0 54 10" xml:space="preserve">
+  <rect id="Dark1" data-name="Dark1" fill="#292c31" x="16" y="1" width="4" height="8"/>
+  <rect id="Light1" data-name="Light1" fill="#7f8795" x="16" y="1" width="3" height="7"/>
+  <rect id="Dark2" data-name="Dark2" fill="#292c31" x="25" y="1" width="4" height="8"/>
+  <rect id="Light2" data-name="Light2" fill="#7f8795" x="25" y="1" width="3" height="7"/>
+  <rect id="Dark3" data-name="Dark3" fill="#292c31" x="34" y="1" width="4" height="8"/>
+  <rect id="Light3" data-name="Light3" fill="#7f8795" x="34" y="1" width="3" height="7"/>
+</svg>
diff --git a/runtime/light/vsepartoolbars.svg b/runtime/light/vsepartoolbars.svg
new file mode 100644
index 000000000..00e91ab8d
--- /dev/null
+++ b/runtime/light/vsepartoolbars.svg
@@ -0,0 +1,7 @@
+<svg x="0px" y="0px" width="63px" height="7px" viewBox="0 0 63 7" enable-background="new 0 0 63 7" xml:space="preserve">
+  <rect id="Dark1" data-name="Dark1" fill="#292c31" x="25" y="1" width="1" height="5"/>
+  <rect id="Dark2" data-name="Dark2" fill="#292c31" x="38" y="1" width="1" height="5"/>
+  <rect id="Light1" data-name="Light1" fill="#7f8795" x="23" y="1" width="2" height="5"/>
+  <rect id="Light2" data-name="Light2" fill="#7f8795" x="30" y="1" width="2" height="5"/>
+  <rect id="Light3" data-name="Light3" fill="#7f8795" x="36" y="1" width="2" height="5"/>
+</svg>
diff --git a/runtime/macos.h b/runtime/macos.h
new file mode 100644
index 000000000..437265670
--- /dev/null
+++ b/runtime/macos.h
@@ -0,0 +1,17 @@
+//////////////////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2020, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+// macos.h - macOS-specific Objective-C/C++ functions
+//
+//////////////////////////////////////////////////////////////////////////
+
+#ifndef MACOS_H
+#define MACOS_H
+
+bool IsDarkMode();
+
+#endif // MACOS_H
diff --git a/runtime/macos.mm b/runtime/macos.mm
new file mode 100644
index 000000000..2067776c8
--- /dev/null
+++ b/runtime/macos.mm
@@ -0,0 +1,22 @@
+//////////////////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2020, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+// macos.mm - macOS-specific Objective-C/C++ functions
+//
+//////////////////////////////////////////////////////////////////////////
+
+#import <Cocoa/Cocoa.h>
+
+// Detect if we're running in Dark mode
+bool IsDarkMode() {
+    if (@available(macOS 10.14, *)) {
+        NSString *interfaceStyle = [NSUserDefaults.standardUserDefaults valueForKey:@"AppleInterfaceStyle"];
+        return [interfaceStyle isEqualToString:@"Dark"];
+    } else {
+        return NO;
+    }
+}
diff --git a/runtime/pgAdmin4.cpp b/runtime/pgAdmin4.cpp
index 7a1b79801..c2b67c9ae 100644
--- a/runtime/pgAdmin4.cpp
+++ b/runtime/pgAdmin4.cpp
@@ -38,6 +38,10 @@
 #include "FloatingWindow.h"
 #include "Logger.h"
 
+#ifdef Q_OS_MAC
+#include "macos.h"
+#endif
+
 #include <QTime>
 
 QString logFileName;
@@ -58,6 +62,42 @@ int main(int argc, char * argv[])
     QApplication app(argc, argv);
     app.setQuitOnLastWindowClosed(false);
 
+    // Setup the styling
+#ifndef Q_OS_LINUX
+    QFile stylesheet;
+
+#ifdef Q_OS_WIN32
+    QSettings registry("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Themes\\Personalize", QSettings::Registry64Format);
+    if (registry.value("AppsUseLightTheme", true).toBool())
+    {
+        qDebug( "Windows Light Mode...");
+        stylesheet.setFileName(":/light.qss");
+    }
+    else
+    {
+        qDebug( "Windows Dark Mode..." );
+        stylesheet.setFileName(":/dark.qss");
+    }
+#endif
+
+#ifdef Q_OS_MAC
+    if (IsDarkMode())
+    {
+        qDebug( "macOS Dark Mode...");
+        stylesheet.setFileName(":/dark.qss");
+    }
+    else
+    {
+        qDebug( "macOS Light Mode..." );
+        stylesheet.setFileName(":/light.qss");
+    }
+#endif
+
+    stylesheet.open(QFile::ReadOnly | QFile::Text);
+    QTextStream stream(&stylesheet);
+    app.setStyleSheet(stream.readAll());
+#endif
+
     // Setup the settings management
     QCoreApplication::setOrganizationName("pgadmin");
     QCoreApplication::setOrganizationDomain("pgadmin.org");
diff --git a/runtime/pgAdmin4.pro b/runtime/pgAdmin4.pro
index a752cb9a7..47b679b62 100644
--- a/runtime/pgAdmin4.pro
+++ b/runtime/pgAdmin4.pro
@@ -102,11 +102,18 @@ SOURCES     =   pgAdmin4.cpp \
                 MenuActions.cpp \
                 FloatingWindow.cpp \
                 Logger.cpp
+
 FORMS       =   ConfigWindow.ui \
                 LogWindow.ui \
                 FloatingWindow.ui
 ICON        =   pgAdmin4.icns
 QMAKE_INFO_PLIST = Info.plist
 
-RESOURCES +=    pgadmin4.qrc
+RESOURCES +=    pgadmin4.qrc \
+                breeze.qrc
+
+macx {
+    HEADERS += macos.h
+    OBJECTIVE_SOURCES = macos.mm
+}
 


view thread (26+ messages)  latest in thread

reply

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Reply to all the recipients using the --to and --cc options:
  reply via email

  To: [email protected]
  Cc: [email protected], [email protected], [email protected], [email protected]
  Subject: Re: RM4292 - Dark mode support for Windows/macOS
  In-Reply-To: <CACCA4P1U8iLJWDM4_by0+HC9oPyUrrfArsu522FgWC6+sjjzWA@mail.gmail.com>

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox