add solarized-dark and solarized-light themes (#1978)

src/data/extra/extra.qrc

@@ -150,6 +150,70 @@
         <file>themes/pure/up.svg</file>
         <file>themes/pure/up_disabled.svg</file>
         <file>themes/pure/web.css</file>
+        <file>themes/solarized-dark/arrow_dropdown.svg</file>
+        <file>themes/solarized-dark/arrow_dropdown_disabled.svg</file>
+        <file>themes/solarized-dark/branch_closed.svg</file>
+        <file>themes/solarized-dark/branch_open.svg</file>
+        <file>themes/solarized-dark/checkbox_checked.svg</file>
+        <file>themes/solarized-dark/checkbox_checked_disabled.svg</file>
+        <file>themes/solarized-dark/checkbox_unchecked.svg</file>
+        <file>themes/solarized-dark/checkbox_unchecked_disabled.svg</file>
+        <file>themes/solarized-dark/close.svg</file>
+        <file>themes/solarized-dark/close_grey.svg</file>
+        <file>themes/solarized-dark/cover.png</file>
+        <file>themes/solarized-dark/down.svg</file>
+        <file>themes/solarized-dark/down_disabled.svg</file>
+        <file>themes/solarized-dark/float.svg</file>
+        <file>themes/solarized-dark/highlight.css</file>
+        <file>themes/solarized-dark/interface.qss</file>
+        <file>themes/solarized-dark/left.svg</file>
+        <file>themes/solarized-dark/left_disabled.svg</file>
+        <file>themes/solarized-dark/menu_checkbox.svg</file>
+        <file>themes/solarized-dark/menu_radiobutton.svg</file>
+        <file>themes/solarized-dark/palette.json</file>
+        <file>themes/solarized-dark/radiobutton_checked.svg</file>
+        <file>themes/solarized-dark/radiobutton_checked_disabled.svg</file>
+        <file>themes/solarized-dark/radiobutton_unchecked.svg</file>
+        <file>themes/solarized-dark/radiobutton_unchecked_disabled.svg</file>
+        <file>themes/solarized-dark/right.svg</file>
+        <file>themes/solarized-dark/right_disabled.svg</file>
+        <file>themes/solarized-dark/sizegrip.svg</file>
+        <file>themes/solarized-dark/text-editor.theme</file>
+        <file>themes/solarized-dark/up.svg</file>
+        <file>themes/solarized-dark/up_disabled.svg</file>
+        <file>themes/solarized-dark/web.css</file>
+        <file>themes/solarized-light/arrow_dropdown.svg</file>
+        <file>themes/solarized-light/arrow_dropdown_disabled.svg</file>
+        <file>themes/solarized-light/branch_closed.svg</file>
+        <file>themes/solarized-light/branch_open.svg</file>
+        <file>themes/solarized-light/checkbox_checked.svg</file>
+        <file>themes/solarized-light/checkbox_checked_disabled.svg</file>
+        <file>themes/solarized-light/checkbox_unchecked.svg</file>
+        <file>themes/solarized-light/checkbox_unchecked_disabled.svg</file>
+        <file>themes/solarized-light/close.svg</file>
+        <file>themes/solarized-light/close_grey.svg</file>
+        <file>themes/solarized-light/cover.png</file>
+        <file>themes/solarized-light/down.svg</file>
+        <file>themes/solarized-light/down_disabled.svg</file>
+        <file>themes/solarized-light/float.svg</file>
+        <file>themes/solarized-light/highlight.css</file>
+        <file>themes/solarized-light/interface.qss</file>
+        <file>themes/solarized-light/left.svg</file>
+        <file>themes/solarized-light/left_disabled.svg</file>
+        <file>themes/solarized-light/menu_checkbox.svg</file>
+        <file>themes/solarized-light/menu_radiobutton.svg</file>
+        <file>themes/solarized-light/palette.json</file>
+        <file>themes/solarized-light/radiobutton_checked.svg</file>
+        <file>themes/solarized-light/radiobutton_checked_disabled.svg</file>
+        <file>themes/solarized-light/radiobutton_unchecked.svg</file>
+        <file>themes/solarized-light/radiobutton_unchecked_disabled.svg</file>
+        <file>themes/solarized-light/right.svg</file>
+        <file>themes/solarized-light/right_disabled.svg</file>
+        <file>themes/solarized-light/sizegrip.svg</file>
+        <file>themes/solarized-light/text-editor.theme</file>
+        <file>themes/solarized-light/up.svg</file>
+        <file>themes/solarized-light/up_disabled.svg</file>
+        <file>themes/solarized-light/web.css</file>
         <file>tasks/git/git.json</file>
         <file>tasks/git/git.svg</file>
         <file>tasks/git/commit.svg</file>

src/data/extra/themes/solarized-dark/arrow_dropdown.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<g>
+	<polygon fill="#9EA5B4" points="128,192 256,320 384,192 	"/>
+</g>
+</svg>

src/data/extra/themes/solarized-dark/arrow_dropdown_disabled.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<g>
+	<polygon fill="#4D5765" points="128,192 256,320 384,192 	"/>
+</g>
+</svg>

src/data/extra/themes/solarized-dark/branch_closed.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="rotate(-90 256.00000000000006,256) " id="svg_1">
+   <polygon fill="#9EA5B4" id="svg_2" points="128,192 256,320 384,192  "/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/branch_open.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g id="svg_1">
+   <polygon fill="#9EA5B4" id="svg_2" points="128,192 256,320 384,192  "/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/checkbox_checked.svg

@@ -0,0 +1,7 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <rect id="svg_6" fill-opacity="0" height="299" width="299" y="106.5" x="106.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="30" stroke="#9EA5B4" fill="#000000"/>
+  <path stroke-opacity="0" id="svg_3" d="m126,243.24589l27.93756,-27.94743l76.53449,76.52461l127.58052,-127.54102l27.94743,27.92768l-155.52795,155.50821" stroke-width="5" fill="#9EA5B4" stroke="#000000"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/checkbox_checked_disabled.svg

@@ -0,0 +1,7 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <rect id="svg_6" fill-opacity="0" height="299" width="299" y="106.5" x="106.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="30" stroke="#4D5765" fill="#000000"/>
+  <path stroke-opacity="0" id="svg_3" d="m126,243.24589l27.93756,-27.94743l76.53449,76.52461l127.58052,-127.54102l27.94743,27.92768l-155.52795,155.50821" stroke-width="5" fill="#4D5765" stroke="#000000"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/checkbox_unchecked.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <rect id="svg_6" fill-opacity="0" height="299" width="299" y="106.5" x="106.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="30" stroke="#9EA5B4" fill="#000000"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/checkbox_unchecked_disabled.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <rect id="svg_6" fill-opacity="0" height="299" width="299" y="106.5" x="106.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="30" stroke="#4D5765" fill="#000000"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/close.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#9EA5B4" d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4
+	L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1
+	c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1
+	c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"/>
+</svg>

src/data/extra/themes/solarized-dark/close_grey.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#636D81" d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4
+	L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1
+	c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1
+	c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"/>
+</svg>

src/data/extra/themes/solarized-dark/down.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="null" id="svg_1">
+   <polygon points="128,192 256,320 384,192  " id="svg_2" fill="#9EA5B4"/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/down_disabled.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="null" id="svg_1">
+   <polygon points="128,192 256,320 384,192  " id="svg_2" fill="#4D5765"/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/float.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1609212036301" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2311" width="512" height="512" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M37.415385 689.230769V177.230769c0-76.8 61.046154-137.846154 137.846153-137.846154h512c76.8 0 137.846154 61.046154 137.846154 137.846154v59.076923h-118.153846V177.230769c0-11.815385-7.876923-19.692308-19.692308-19.692307h-512c-11.815385 0-19.692308 7.876923-19.692307 19.692307v512c0 11.815385 7.876923 19.692308 19.692307 19.692308h59.076924v118.153846h-59.076924c-76.8 0-137.846154-61.046154-137.846153-137.846154z m866.461538-374.153846h-512c-43.323077 0-78.769231 35.446154-78.769231 78.769231v512c0 43.323077 35.446154 78.769231 78.769231 78.769231h512c43.323077 0 78.769231-35.446154 78.769231-78.769231V393.846154c0-43.323077-35.446154-78.769231-78.769231-78.769231z m-78.769231 496.246154c0 9.846154-5.907692 15.753846-17.723077 15.753846H578.953846c-9.846154 0-19.692308-9.846154-19.692308-17.723077v-35.446154c0-9.846154 9.846154-19.692308 19.692308-19.692307h94.523077c11.815385 0 15.753846-11.815385 9.846154-19.692308L478.523077 529.723077c-7.876923-5.907692-7.876923-17.723077 0-25.6l25.6-23.630769c5.907692-7.876923 17.723077-7.876923 23.630769 0l204.8 204.8c7.876923 7.876923 19.692308 1.969231 19.692308-9.846154v-94.523077c0-11.815385 11.815385-19.692308 21.661538-19.692308h35.446154c9.846154 0 15.753846 9.846154 15.753846 19.692308v230.4z" p-id="2312" fill="#9EA5B4"></path></svg>

src/data/extra/themes/solarized-dark/highlight.css

@@ -0,0 +1,261 @@
+/* PrismJS 1.25.0
+https://prismjs.com/download.html#themes=prism-solarizedlight&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+agda+al+antlr4+apacheconf+apex+apl+applescript+aql+arduino+arff+asciidoc+aspnet+asm6502+autohotkey+autoit+bash+basic+batch+bbcode+birb+bison+bnf+brainfuck+brightscript+bro+bsl+c+csharp+cpp+cil+clojure+cmake+coffeescript+concurnas+csp+crystal+css-extras+cypher+d+dart+dataweave+dax+dhall+diff+django+dns-zone-file+docker+ebnf+editorconfig+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+firestore-security-rules+flow+fortran+ftl+gml+gcode+gdscript+gedcom+gherkin+git+glsl+go+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+http+hpkp+hsts+ichigojam+icon+ignore+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jolie+jq+jsdoc+js-extras+json+json5+jsonp+jsstacktrace+js-templates+julia+keyman+kotlin+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+lolcode+lua+makefile+markdown+markup-templating+matlab+mel+mizar+mongodb+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+naniscript+nasm+neon+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+pascaligo+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plsql+powerquery+powershell+processing+prolog+promql+properties+protobuf+pug+puppet+pure+purebasic+purescript+python+q+qml+qore+r+racket+jsx+tsx+reason+regex+renpy+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smali+smalltalk+smarty+sml+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+stan+iecst+stylus+swift+t4-templating+t4-cs+t4-vb+tap+tcl+tt2+textile+toml+turtle+twig+typescript+typoscript+unrealscript+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+wiki+xeora+xml-doc+xojo+xquery+yaml+yang+zig&plugins=line-numbers+toolbar+copy-to-clipboard+filter-highlight-all */
+/*
+ Solarized Color Schemes originally by Ethan Schoonover
+ http://ethanschoonover.com/solarized
+
+ Ported for PrismJS by Hector Matos
+ Website: https://krakendev.io
+ Twitter Handle: https://twitter.com/allonsykraken)
+*/
+
+/*
+SOLARIZED HEX
+--------- -------
+base03    #002b36
+base02    #073642
+base01    #586e75
+base00    #657b83
+base0     #839496
+base1     #93a1a1
+base2     #eee8d5
+base3     #fdf6e3
+yellow    #b58900
+orange    #cb4b16
+red       #dc322f
+magenta   #d33682
+violet    #6c71c4
+blue      #268bd2
+cyan      #2aa198
+green     #859900
+*/
+
+code[class*="language-"],
+pre[class*="language-"] {
+    color: #657b83; /* base00 */
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+
+    line-height: 1.5;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+    background: #073642; /* base02 */
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+    background: #073642; /* base02 */
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+    border-radius: 0.3em;
+}
+
+/* mod by nriver */
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+    background-color: #073642; /* base3 */
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+    padding: .1em;
+    border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: #93a1a1; /* base1 */
+}
+
+.token.punctuation {
+    color: #586e75; /* base01 */
+}
+
+.token.namespace {
+    opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+    color: #268bd2; /* blue */
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.url,
+.token.inserted {
+    color: #2aa198; /* cyan */
+}
+
+.token.entity {
+    color: #657b83; /* base00 */
+    background: #eee8d5; /* base2 */
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+    color: #859900; /* green */
+}
+
+.token.function,
+.token.class-name {
+    color: #b58900; /* yellow */
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+    color: #cb4b16; /* orange */
+}
+
+.token.important,
+.token.bold {
+    font-weight: bold;
+}
+.token.italic {
+    font-style: italic;
+}
+
+.token.entity {
+    cursor: help;
+}
+
+pre[class*="language-"].line-numbers {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+    position: relative;
+    white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    font-size: 100%;
+    left: -3.8em;
+    width: 3em; /* works for line-numbers below 1000 lines */
+    letter-spacing: -1px;
+    border-right: 1px solid #999;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+}
+
+    .line-numbers-rows > span {
+        display: block;
+        counter-increment: linenumber;
+    }
+
+        .line-numbers-rows > span:before {
+            content: counter(linenumber);
+            color: #999;
+            display: block;
+            padding-right: 0.8em;
+            text-align: right;
+        }
+
+div.code-toolbar {
+    position: relative;
+}
+
+div.code-toolbar > .toolbar {
+    position: absolute;
+    z-index: 10;
+    top: .3em;
+    right: .2em;
+    transition: opacity 0.3s ease-in-out;
+    opacity: 0;
+}
+
+div.code-toolbar:hover > .toolbar {
+    opacity: 1;
+}
+
+/* Separate line b/c rules are thrown out if selector is invalid.
+   IE11 and old Edge versions don't support :focus-within. */
+div.code-toolbar:focus-within > .toolbar {
+    opacity: 1;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item {
+    display: inline-block;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > a {
+    cursor: pointer;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > button {
+    background: none;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    line-height: normal;
+    overflow: visible;
+    padding: 0;
+    -webkit-user-select: none; /* for button */
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > a,
+div.code-toolbar > .toolbar > .toolbar-item > button,
+div.code-toolbar > .toolbar > .toolbar-item > span {
+    color: #bbb;
+    font-size: .8em;
+    padding: 0 .5em;
+    background: #f5f2f0;
+    background: rgba(224, 224, 224, 0.2);
+    box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
+    border-radius: .5em;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > a:hover,
+div.code-toolbar > .toolbar > .toolbar-item > a:focus,
+div.code-toolbar > .toolbar > .toolbar-item > button:hover,
+div.code-toolbar > .toolbar > .toolbar-item > button:focus,
+div.code-toolbar > .toolbar > .toolbar-item > span:hover,
+div.code-toolbar > .toolbar > .toolbar-item > span:focus {
+    color: inherit;
+    text-decoration: none;
+}
+

src/data/extra/themes/solarized-dark/interface.qss

@@ -0,0 +1,1176 @@
+/* Qt Style Sheets file
+ * Please refer to https://doc.qt.io/qt-5.12/stylesheet-reference.html
+ * for detailed inforamtion.
+ * **Notice** that selectors using base class and child class are considered to have the
+ * same specificity and the rule that appears last takes precedence.
+ * VNote specific syntax:
+ *  - @widgets#toolbox#title#border: reference to a color defined in palette.ini;
+ *  - $2px: 2 will be scaled by multiplying current display scaled factor.
+ */
+
+QWidget {
+    color: @widgets#qwidget#fg;
+    background-color: @widgets#qwidget#bg;
+    font-family: "冬青黑体", "YaHei Consolas Hybrid", "Microsoft YaHei", "微软雅黑", "Microsoft YaHei UI", "WenQuanYi Micro Hei", "文泉驿雅黑", "Dengxian", "等线体", "STXihei", "华文细黑", "Liberation Sans", "Droid Sans", "NSimSun", "新宋体", "SimSun", "宋体", "Helvetica", "sans-serif", "Tahoma", "Arial", "Verdana", "Geneva", "Georgia", "Times New Roman";
+}
+
+QWidget[DialogCentralWidget="true"] {
+    border: none;
+}
+
+/* All widgets */
+*[State="info"] {
+    border: 1px solid @widgets#qwidget#info#border;
+}
+
+*[State="warning"] {
+    border: 1px solid @widgets#qwidget#warning#border;
+}
+
+*[State="error"] {
+    border: 1px solid @widgets#qwidget#error#border;
+}
+
+/* QAbstractScrollArea */
+QAbstractScrollArea {
+    border: 1px solid @widgets#qabstractscrollarea#border;
+}
+
+QAbstractScrollArea::corner {
+    background-color: @widgets#qabstractscrollarea#corner#bg;
+    border: none;
+}
+
+vnotex--SearchPanel QAbstractScrollArea {
+    border: none;
+}
+
+/* ToolBox */
+vnotex--ToolBox QWidget[ToolBoxTitle="true"] {
+    border-bottom: 2px solid @widgets#toolbox#title#border;
+    margin: 0px;
+    padding: 0px;
+}
+
+vnotex--ToolBox QToolButton[ToolBoxTitleButton="true"] {
+    padding: 4px 10px 4px 4px;
+    margin: 0px;
+    border: none;
+}
+
+vnotex--ToolBox QToolButton[ToolBoxTitleButton="true"]:checked {
+    font-weight: bold;
+    /* Reverse */
+    color: @widgets#toolbox#title#button#active#fg;
+    background-color: @widgets#toolbox#title#button#active#bg;
+}
+
+/* TitleBar */
+/* The height should be large enough regarding to the action buttons. */
+vnotex--TitleBar QLabel[TitleBarTitle="true"] {
+    padding: 5px 1px;
+    margin: 0px;
+}
+
+/* QDockWidget */
+QDockWidget {
+    color: @widgets#qdockwidget#fg;
+    background-color: @widgets#qdockwidget#bg;
+    titlebar-close-icon: url(close.svg);
+    titlebar-normal-icon: url(float.svg);
+}
+
+QDockWidget::Title {
+    background-color: @widgets#qdockwidget#title#bg;
+    text-align: center left;
+}
+
+QDockWidget::close-button, QDockWidget::float-button {
+    border: none;
+    icon-size: 16px;
+    width: 16px;
+}
+
+QDockWidget::close-button:hover, QDockWidget::float-button:hover {
+    background-color: @widgets#qdockwidget#title#button#hover#bg;
+}
+
+QDockWidget::close-button {
+    subcontrol-position: top right;
+    subcontrol-origin: margin;
+    position: absolute;
+    top: 0px; right: 0px; bottom: 0px;
+}
+
+QDockWidget::float-button {
+    subcontrol-position: top right;
+    subcontrol-origin: margin;
+    position: absolute;
+    top: 0px; right: 18px; bottom: 0px;
+}
+
+/* NotebookSelector */
+vnotex--NotebookSelector {
+    icon-size: 20px;
+}
+
+vnotex--NotebookSelector QAbstractItemView::item {
+    padding: 5px, 2px, 5px, 2px;
+}
+
+QToolTip
+{
+    border: none;
+    color: @widgets#qtooltip#fg;
+    background-color: @widgets#qtooltip#bg;
+}
+
+/* QMainWindow */
+QMainWindow {
+    color: @widgets#qmainwindow#fg;
+    background-color: @widgets#qmainwindow#bg;
+}
+
+QMainWindow::separator {
+    /* For vertical */
+    width: 1px;
+    /* For horizontal */
+    height: 1px;
+    background-color: @widgets#qmainwindow#separator#bg;
+}
+
+/* QToolBar */
+QToolBar {
+    border: none;
+    background-color: @widgets#qtoolbar#bg;
+}
+
+QToolBar::separator {
+    width: 1px;
+    height: 1px;
+    border: none;
+    background-color: @widgets#qtoolbar#separator#bg;
+}
+
+QToolBarExtension#qt_toolbar_ext_button {
+    background-color: @widgets#qtoolbar#extension#bg;
+    margin: 30px;
+}
+
+QToolBarExtension#qt_toolbar_ext_button:hover {
+    background-color: @widgets#qtoolbar#extension#hover#bg;
+    margin: 30px;
+}
+
+/* QToolButton */
+/* Only for MenuButtonPopup */
+QToolButton[popupMode="1"] {
+    /* Make way for the popup button */
+    padding-right: 16px; /* make way for the popup button */
+}
+
+/* Must put after popupMode related styles */
+QToolButton[ActionToolButton="true"] {
+    border: none;
+}
+
+QToolButton[ActionToolButton="true"]::menu-indicator {
+    image: none;
+}
+
+QToolButton[NoMenuIndicator="true"]::menu-indicator {
+    image: none;
+}
+
+/* QPushButton, QToolButton */
+QToolButton {
+    border: none;
+    color: @widgets#qtoolbutton#fg;
+    background-color: @widgets#qtoolbutton#bg;
+    margin: 1px 3px 1px 3px;
+    padding: 0px;
+}
+
+QToolButton:checked {
+    color: @widgets#qtoolbutton#checked#fg;
+    background-color: @widgets#qtoolbutton#checked#bg;
+}
+
+QToolButton:hover {
+    border:none;
+    color: @widgets#qtoolbutton#hover#fg;
+    background-color: @widgets#qtoolbutton#hover#bg;
+}
+
+QToolButton:pressed {
+    color: @widgets#qtoolbutton#pressed#fg;
+    background-color: @widgets#qtoolbutton#pressed#bg;
+}
+
+/* the subcontrols below are used only in the MenuButtonPopup mode */
+QToolButton::menu-button {
+    border: none;
+    width: 16px;
+}
+
+QToolButton::menu-arrow {
+    image: url(arrow_dropdown.svg);
+    width: 16px;
+    height: 16px;
+}
+
+QPushButton[DangerButton="true"]:hover, QToolButton[DangerButton="true"]:hover {
+    color: @widgets#qwidget#danger#fg;
+    background-color: @widgets#qwidget#danger#bg;
+    border: none;
+}
+
+/* QPushButton */
+QPushButton {
+    color: @widgets#qpushbutton#fg;
+    background-color: @widgets#qpushbutton#bg;
+    border: 1px solid @widgets#qpushbutton#border;
+    padding: 3px;
+    min-width: 80px;
+}
+
+QPushButton:default {
+    border: 1px solid @widgets#qpushbutton#default#border;
+}
+
+QPushButton:focus {
+    color: @widgets#qpushbutton#focus#fg;
+    background-color: @widgets#qpushbutton#focus#bg;
+}
+
+QPushButton:checked {
+    color: @widgets#qpushbutton#checked#fg;
+    background-color: @widgets#qpushbutton#checked#bg;
+}
+
+QPushButton:flat {
+    border: none;
+}
+
+QPushButton:hover {
+    color: @widgets#qpushbutton#hover#fg;
+    background-color: @widgets#qpushbutton#hover#bg;
+}
+
+QPushButton:pressed {
+    color: @widgets#qpushbutton#pressed#fg;
+    background-color: @widgets#qpushbutton#pressed#bg;
+}
+
+QPushButton:disabled {
+    color: @widgets#qpushbutton#disabled#fg;
+    background-color: @widgets#qpushbutton#disabled#bg;
+}
+
+QPushButton::menu-indicator {
+    image: url(arrow_dropdown.svg);
+    width: 16px;
+    height: 16px;
+}
+
+/* QMenu */
+QMenu {
+    color: @widgets#qmenu#fg;
+    background-color: @widgets#qmenu#bg;
+    border: 2px solid @widgets#qmenu#border;
+}
+
+QMenu::icon {
+    margin: 5px;
+}
+
+QMenu::item {
+    padding: 5px 30px 5px 30px;
+    border: 1px solid transparent;
+}
+
+QMenu::item:selected {
+    color: @widgets#qmenu#item#selected#fg;
+    background-color: @widgets#qmenu#item#selected#bg;
+}
+
+QMenu::item:disabled {
+    color: @widgets#qmenu#item#disabled#fg;
+}
+
+QMenu::icon:checked { /* appearance of a 'checked' icon */
+    border: 2px solid @widgets#qmenu#fg;
+}
+
+QMenu::separator {
+    height: 1px;
+    background-color: @widgets#qmenu#separator#bg;
+    margin-left: 10px;
+    margin-right: 5px;
+}
+
+QMenu::indicator {
+    width: 20px;
+    height: 20px;
+}
+
+QMenu::indicator:non-exclusive:unchecked {
+    image: none;
+}
+
+QMenu::indicator:non-exclusive:checked {
+    image: url(menu_checkbox.svg);
+}
+
+QMenu::indicator:exclusive:unchecked {
+    image: none;
+}
+
+QMenu::indicator:exclusive:checked {
+    image: url(menu_radiobutton.svg);
+}
+
+/* QWidgetAction item */
+vnotex--LabelWithButtonsWidget {
+    background-color: @widgets#qmenu#bg;
+}
+
+vnotex--LabelWithButtonsWidget:hover {
+    background-color: @widgets#qmenu#item#selected#bg;
+}
+
+vnotex--LabelWithButtonsWidget QLabel {
+    color: @widgets#qmenu#fg;
+}
+
+vnotex--LabelWithButtonsWidget QLabel:hover {
+    color: @widgets#qmenu#item#selected#fg;
+}
+/* End QMenu */
+
+QDialog {
+    color: @widgets#qdialog#fg;
+    background-color: @widgets#qdialog#bg
+}
+
+/* DrapDropAreaIndicator */
+vnotex--DragDropAreaIndicator {
+    border: 2px dashed @widgets#dragdropareaindicator#border;
+    margin: 2px;
+    max-height: 200px;
+}
+
+/* QComboBox */
+QComboBox {
+    padding: 3px;
+    color: @widgets#qcombobox#fg;
+    background-color: @widgets#qcombobox#bg;
+    border: 1px solid @widgets#qcombobox#border;
+}
+
+QComboBox:focus, QComboBox:on {
+    background-color: @widgets#qcombobox#focus#bg;
+    border: 2px solid @widgets#qcombobox#focus#border;
+}
+
+QComboBox:hover {
+    background-color: @widgets#qcombobox#hover#bg;
+    border: 2px solid @widgets#qcombobox#hover#border;
+}
+
+QComboBox:disabled {
+    color: @widgets#qcombobox#disabled#fg;
+}
+
+QComboBox::drop-down {
+    subcontrol-origin: padding;
+    subcontrol-position: top right;
+    width: 20px;
+    border: none;
+    background-color: transparent;
+}
+
+QComboBox::down-arrow {
+    image: url(arrow_dropdown.svg);
+    width: 20px;
+    height: 20px;
+}
+
+QComboBox::down-arrow:disabled {
+    image: url(arrow_dropdown_disabled.svg);
+    width: 20px;
+    height: 20px;
+}
+
+QComboBox QAbstractItemView {
+    padding: 2px;
+    border: 1px solid @widgets#qcombobox#view#border;
+    background-color: @widgets#qcombobox#view#bg;
+    selection-color: @widgets#qcombobox#view#selection#fg;
+    selection-background-color: @widgets#qcombobox#view#selection#bg;
+}
+
+QComboBox QAbstractItemView::item {
+    background-color: transparent;
+    padding: 3px;
+}
+
+QComboBox QAbstractItemView::item:hover {
+    color: @widgets#qcombobox#item#hover#fg;
+    background-color: @widgets#qcombobox#item#hover#bg;
+}
+
+/* QLabel */
+QLabel {
+    border: none;
+    color: @widgets#qlabel#fg;
+    background-color: transparent;
+}
+
+vnotex--DragDropAreaIndicator QLabel {
+    color: @widgets#dragdropareaindicator#fg;
+    font-size: 12pt;
+    font-weight: bold;
+}
+
+vnotex--MainWindow QLabel#MainWindowTipsLabel {
+    font-size: 20pt;
+    font-weight: bold;
+    color: @widgets#mainwindow#tips_label#fg;
+    background-color: @widgets#mainwindow#tips_label#bg;
+}
+
+/* QLineEdit */
+QLineEdit[EmbeddedLineEdit="true"] {
+    border: none;
+    padding: 0px;
+    margin: 0px;
+    color: @widgets#qlineedit#fg;
+    background-color: transparent;
+}
+
+QLineEdit[EmbeddedLineEdit="true"]:focus {
+    border: none;
+    background-color: @widgets#qlineedit#focus#bg;
+}
+
+QLineEdit[EmbeddedLineEdit="true"]:hover {
+    border: none;
+    background-color: @widgets#qlineedit#hover#bg;
+}
+
+QLineEdit {
+    border: 1px solid @widgets#qlineedit#border;
+    padding: 3px;
+    color: @widgets#qlineedit#fg;
+    background-color: @widgets#qlineedit#bg;
+    selection-color: @widgets#qlineedit#selection#fg;
+    selection-background-color: @widgets#qlineedit#selection#bg;
+}
+
+QLineEdit:focus {
+    border: 2px solid @widgets#qlineedit#focus#border;
+    background-color: @widgets#qlineedit#focus#bg;
+}
+
+QLineEdit:hover {
+    border: 2px solid @widgets#qlineedit#hover#border;
+    background-color: @widgets#qlineedit#hover#bg;
+}
+
+QLineEdit:disabled {
+    color: @widgets#qlineedit#disabled#fg;
+}
+
+/* QPlainTextEdit and QTextEdit */
+QPlainTextEdit, QTextEdit {
+    color: @widgets#qlineedit#fg;
+    background-color: @widgets#qlineedit#bg;
+    selection-color: @widgets#qlineedit#selection#fg;
+    selection-background-color: @widgets#qlineedit#selection#bg;
+}
+
+/* QTabWidget */
+QTabWidget {
+    border: none;
+}
+
+QTabWidget::pane {
+    border: none;
+}
+
+QTabWidget::tab-bar {
+    alignment: left;
+}
+
+/* QTabBar */
+QTabBar {
+    border: none;
+}
+
+QTabBar::tab {
+    color: @widgets#qtabbar#tab#fg;
+    background-color: @widgets#qtabbar#tab#bg;
+    border: none;
+}
+
+QTabBar::tab:top, QTabBar::tab:bottom {
+    border-top: 2px solid transparent;
+    border-right: 1px solid @widgets#qtabbar#tab#border;
+    /* MUST leave right and left padding 0px. */
+    padding: 2px 0px 2px 0px;
+    height: 20px;
+}
+
+QTabBar::tab:right {
+    border-right: 3px solid transparent;
+    border-bottom: 1px solid @widgets#qtabbar#tab#border;
+    padding: 5px 2px 5px 2px;
+    min-width: 20px;
+}
+
+QTabBar::tab:left {
+    border-left: 3px solid transparent;
+    border-bottom: 1px solid @widgets#qtabbar#tab#border;
+    padding: 5px 2px 5px 2px;
+    min-width: 20px;
+}
+
+/* Tabified QDockWidget */
+QMainWindow > QTabBar::tab:right {
+    border-right: 3px solid transparent;
+    border-bottom: none;
+    margin: 0px;
+    padding: 6px 2px -10px 2px;
+}
+
+/* Tabified QDockWidget */
+QMainWindow > QTabBar::tab:left {
+    border-left: 3px solid transparent;
+    border-bottom: none;
+    margin: 0px;
+    padding: -10px 2px 6px 2px;
+}
+
+QTabBar::tab:hover {
+    color: @widgets#qtabbar#tab#hover#fg;
+    background-color: @widgets#qtabbar#tab#hover#bg;
+}
+
+QTabBar::tab:selected {
+    color: @widgets#qtabbar#tab#selected#fg;
+    background-color: @widgets#qtabbar#tab#selected#bg;
+}
+
+QTabBar::tab:top:selected, QTabBar::tab:bottom:selected {
+    border-top: 2px solid @widgets#qtabbar#tab#selected#border;
+}
+
+QTabBar::tab:right:selected {
+    border-right: 3px solid @widgets#qtabbar#tab#selected#border;
+}
+
+QTabBar::tab:left:selected {
+    border-left: 3px solid @widgets#qtabbar#tab#selected#border;
+}
+
+QTabBar::close-button {
+    image: url(close_grey.svg);
+}
+
+QTabBar::close-button:focus {
+    image: url(close.svg);
+}
+
+QTabBar::close-button:hover {
+    image: url(close.svg);
+}
+
+QTabBar::scroller {
+    width: $20px;
+}
+
+QTabBar QToolButton {
+    border: none;
+}
+
+QTabBar QToolButton::right-arrow:enabled {
+    image: url(right.svg);
+}
+
+QTabBar QToolButton::left-arrow:enabled {
+    image: url(left.svg);
+}
+
+QTabBar QToolButton::right-arrow:disabled {
+    image: url(right_disabled.svg);
+}
+
+QTabBar QToolButton::left-arrow:disabled {
+    image: url(left_disabled.svg);
+}
+
+/* QTreeView */
+QTreeView {
+    color: @widgets#qtreeview#fg;
+    background-color: @widgets#qtreeview#bg;
+    show-decoration-selected: 0;
+    border: none;
+    selection-background-color: transparent;
+    outline: none;
+}
+
+QTreeView::item {
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+QTreeView::item:hover {
+    color: @widgets#qtreeview#item#hover#fg;
+    background-color: @widgets#qtreeview#item#hover#bg;
+}
+
+QTreeView::item:selected {
+    color: @widgets#qtreeview#item#selected#fg;
+    background-color: @widgets#qtreeview#item#selected#bg;
+}
+
+QTreeView::item:selected:active {
+    color: @widgets#qtreeview#item#selected#active#fg;
+    background-color: @widgets#qtreeview#item#selected#active#bg;
+}
+
+QTreeView::item:selected:!active {
+    color: @widgets#qtreeview#item#selected#inactive#fg;
+    background-color: @widgets#qtreeview#item#selected#inactive#bg;
+}
+
+QTreeView::branch:has-siblings:!adjoins-item {
+    border-image: none;
+}
+
+QTreeView::branch:has-siblings:adjoins-item {
+    border-image: none;
+}
+
+QTreeView::branch:!has-children:!has-siblings:adjoins-item {
+    border-image: none;
+}
+
+QTreeView::branch:has-children:!has-siblings:closed,
+QTreeView::branch:closed:has-children:has-siblings {
+    border-image: none;
+    image: url(branch_closed.svg);
+}
+
+QTreeView::branch:open:has-children:!has-siblings,
+QTreeView::branch:open:has-children:has-siblings  {
+    border-image: none;
+    image: url(branch_open.svg);
+}
+
+/* QListView */
+QListView {
+    color: @widgets#qlistview#fg;
+    background-color: @widgets#qlistview#bg;
+    show-decoration-selected: 0;
+    border: none;
+    selection-background-color: transparent;
+    outline: none;
+}
+
+QListView::item {
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+QListView::item:hover {
+    color: @widgets#qlistview#item#hover#fg;
+    background-color: @widgets#qlistview#item#hover#bg;
+}
+
+QListView::item:selected {
+    color: @widgets#qlistview#item#selected#fg;
+    background-color: @widgets#qlistview#item#selected#bg;
+}
+
+QListView::item:selected:active {
+    color: @widgets#qlistview#item#selected#active#fg;
+    background-color: @widgets#qlistview#item#selected#active#bg;
+}
+
+QListView::item:selected:!active {
+    color: @widgets#qlistview#item#selected#inactive#fg;
+    background-color: @widgets#qlistview#item#selected#inactive#bg;
+}
+
+QListView::item:disabled {
+    background-color: transparent;
+}
+
+/* QSplitter */
+QSplitter {
+    border: none;
+}
+
+QSplitter::handle {
+    background-color: @widgets#qsplitter#handle#bg;
+}
+
+QSplitter::handle:pressed {
+    background-color: @widgets#qsplitter#handle#pressed#bg;
+}
+
+QSplitter::handle:vertical {
+    height: 2px;
+}
+
+QSplitter::handle:horizontal {
+    width: 2px;
+}
+
+/* QStatusBar */
+QStatusBar {
+    color: @widgets#qstatusbar#fg;
+    background-color: @widgets#qstatusbar#bg;
+    border: none;
+}
+
+QStatusBar::item {
+    border: none;
+}
+
+/* QScrollBar */
+QScrollBar::add-page, QScrollBar::sub-page {
+    background-color: @widgets#qscrollbar#addpage#bg;
+}
+
+QScrollBar:vertical {
+    background-color: @widgets#qscrollbar#bg;
+    width: 16px;
+    margin: 16px 0px 16px 0px;
+    padding: 0px 2px 0px 2px;
+    border: none;
+}
+
+QScrollBar::handle:vertical {
+    background-color: @widgets#qscrollbar#handle#bg;
+    min-height: 16px;
+}
+
+QScrollBar::handle:vertical:hover {
+    background-color: @widgets#qscrollbar#handle#hover#bg;
+}
+
+QScrollBar::handle:vertical:pressed {
+    background-color: @widgets#qscrollbar#handle#pressed#bg;
+}
+
+QScrollBar::add-line:vertical {
+    border: none;
+    background-color: @widgets#qscrollbar#bg;
+    width: 16px;
+    height: 16px;
+    subcontrol-position: bottom;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::add-line:vertical:hover {
+    background-color: @widgets#qscrollbar#handle#hover#bg;
+}
+
+QScrollBar::add-line:vertical:pressed {
+    background-color: @widgets#qscrollbar#handle#pressed#bg;
+}
+
+QScrollBar::sub-line:vertical {
+    border: none;
+    background-color: @widgets#qscrollbar#bg;
+    width: 16px;
+    height: 16px;
+    subcontrol-position: top;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::sub-line:vertical:hover {
+    background-color: @widgets#qscrollbar#handle#hover#bg;
+}
+
+QScrollBar::sub-line:vertical:pressed {
+    background-color: @widgets#qscrollbar#handle#pressed#bg;
+}
+
+QScrollBar::down-arrow:vertical {
+    image: url(down.svg);
+    width: 16px;
+    height: 16px;
+}
+
+QScrollBar::up-arrow:vertical {
+    image: url(up.svg);
+    width: 16px;
+    height: 16px;
+}
+
+QScrollBar:horizontal {
+    background-color: @widgets#qscrollbar#bg;
+    height: 16px;
+    margin: 0px 16px 0px 16px;
+    padding: 2px 0px 2px 0px;
+    border: none;
+}
+
+QScrollBar::handle:horizontal {
+    background-color: @widgets#qscrollbar#handle#bg;
+    min-width: 16px;
+}
+
+QScrollBar::handle:horizontal:hover {
+    background-color: @widgets#qscrollbar#handle#hover#bg;
+}
+
+QScrollBar::handle:horizontal:pressed {
+    background-color: @widgets#qscrollbar#handle#pressed#bg;
+}
+
+QScrollBar::add-line:horizontal {
+    border: none;
+    background-color: @widgets#qscrollbar#bg;
+    width: 16px;
+    height: 16px;
+    subcontrol-position: right;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::add-line:horizontal:hover {
+    background-color: @widgets#qscrollbar#handle#hover#bg;
+}
+
+QScrollBar::add-line:horizontal:pressed {
+    background-color: @widgets#qscrollbar#handle#pressed#bg;
+}
+
+QScrollBar::sub-line:horizontal {
+    border: none;
+    background-color: @widgets#qscrollbar#bg;
+    width: 16px;
+    height: 16px;
+    subcontrol-position: left;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::sub-line:horizontal:hover {
+    background-color: @widgets#qscrollbar#handle#hover#bg;
+}
+
+QScrollBar::sub-line:horizontal:pressed {
+    background-color: @widgets#qscrollbar#handle#pressed#bg;
+}
+
+QScrollBar::right-arrow:horizontal {
+    image: url(right.svg);
+    width: 16px;
+    height: 16px;
+}
+
+QScrollBar::left-arrow:horizontal {
+    image: url(left.svg);
+    width: 16px;
+    height: 16px;
+}
+
+/* QCheckBox */
+QCheckBox {
+    spacing: 5px;
+}
+
+QCheckBox:disabled {
+    color: @widgets#qcheckbox#disabled#fg;
+}
+
+QCheckBox::indicator:unchecked {
+    image: url(checkbox_unchecked.svg);
+}
+
+QCheckBox::indicator:unchecked:disabled {
+    image: url(checkbox_unchecked_disabled.svg);
+}
+
+QCheckBox::indicator:checked {
+    image: url(checkbox_checked.svg);
+}
+
+QCheckBox::indicator:checked:disabled {
+    image: url(checkbox_checked_disabled.svg);
+}
+
+QCheckBox::indicator {
+    width: 20px;
+    height: 20px;
+}
+
+QCheckBox::indicator:focus {
+    background-color: @widgets#qcheckbox#indicator#focus#bg;
+}
+
+QCheckBox::indicator:hover {
+    background-color: @widgets#qcheckbox#indicator#hover#bg;
+}
+
+QCheckBox::indicator:pressed {
+    background-color: @widgets#qcheckbox#indicator#pressed#bg;
+}
+
+/* QRadioButton */
+QRadioButton {
+    spacing: 5px;
+}
+
+QRadioButton:disabled {
+    color: @widgets#qradiobutton#disabled#fg;
+}
+
+QRadioButton::indicator:unchecked {
+    image: url(radiobutton_unchecked.svg);
+}
+
+QRadioButton::indicator:unchecked:disabled {
+    image: url(radiobutton_unchecked_disabled.svg);
+}
+
+QRadioButton::indicator:checked {
+    image: url(radiobutton_checked.svg);
+}
+
+QRadioButton::indicator:checked:disabled {
+    image: url(radiobutton_checked_disabled.svg);
+}
+
+QRadioButton::indicator {
+    width: 20px;
+    height: 20px;
+}
+
+QRadioButton::indicator:focus {
+    background-color: @widgets#qradiobutton#indicator#focus#bg;
+}
+
+QRadioButton::indicator:hover {
+    background-color: @widgets#qradiobutton#indicator#hover#bg;
+}
+
+QRadioButton::indicator:pressed {
+    background-color: @widgets#qradiobutton#indicator#pressed#bg;
+}
+
+QAbstractSpinBox {
+    border: 1px solid @widgets#qspinbox#border;
+    color: @widgets#qspinbox#fg;
+    background-color: @widgets#qspinbox#bg;
+    padding-right: 25px;
+    min-height: 25px;
+    selection-color: @widgets#qspinbox#selection#fg;
+    selection-background-color: @widgets#qspinbox#selection#bg;
+}
+
+QAbstractSpinBox:disabled {
+    color: @widgets#qspinbox#disabled#fg;
+    background-color: @widgets#qspinbox#disabled#bg;
+}
+
+QAbstractSpinBox:focus {
+    border: 2px solid @widgets#qspinbox#focus#border;
+    background-color: @widgets#qspinbox#focus#bg;
+}
+
+QAbstractSpinBox:hover {
+    border: 2px solid @widgets#qspinbox#hover#border;
+    background-color: @widgets#qspinbox#hover#bg;
+}
+
+QAbstractSpinBox::up-button {
+    subcontrol-origin: border;
+    /* Position at the top right corner */
+    subcontrol-position: top right;
+    width: 25px;
+    border: none;
+    background-color: transparent;
+}
+
+QAbstractSpinBox::up-button:hover {
+    background-color: @widgets#qspinbox#button#hover#bg;
+}
+
+QAbstractSpinBox::up-button:pressed {
+    background-color: @widgets#qspinbox#button#pressed#bg;
+}
+
+QAbstractSpinBox::up-arrow {
+    image: url(up.svg);
+    width: 12px;
+    height: 12px;
+}
+
+QAbstractSpinBox::up-arrow:disabled, QAbstractSpinBox::up-arrow:off {
+    image: url(up_disabled.svg);
+}
+
+QAbstractSpinBox::down-button {
+    subcontrol-origin: border;
+    /* Position at the top right corner */
+    subcontrol-position: bottom right;
+    width: 25px;
+    border: none;
+    background-color: transparent;
+}
+
+QAbstractSpinBox::down-button:hover {
+    background-color: @widgets#qspinbox#button#hover#bg;
+}
+
+QAbstractSpinBox::down-button:pressed {
+    background-color: @widgets#qspinbox#button#pressed#bg;
+}
+
+QAbstractSpinBox::down-arrow {
+    image: url(down.svg);
+    width: 12px;
+    height: 12px;
+}
+
+QAbstractSpinBox::down-arrow:disabled, QAbstractSpinBox::down-arrow:off {
+    image: url(down_disabled.svg);
+}
+
+/* QHeaderView */
+QHeaderView::section {
+    color: @widgets#qheaderview#section#fg;
+    background-color: @widgets#qheaderview#section#bg;
+    padding-left: 4px;
+    border: none;
+    border-left: 1px solid @widgets#qheaderview#section#border;
+    border-bottom: 1px solid @widgets#qheaderview#section#border;
+}
+
+QHeaderView::section:checked
+{
+    color: @widgets#qheaderview#section#checked#fg;
+    background-color: @widgets#qheaderview#section#checked#bg;
+}
+
+/* style the sort indicator */
+QHeaderView::down-arrow {
+    image: url(down.svg);
+    width: 12px;
+    height: 12px;
+}
+
+QHeaderView::up-arrow {
+    image: url(up.svg);
+    width: 12px;
+    height: 12px;
+}
+
+/* QProgressBar */
+QProgressBar {
+    background-color: @widgets#qprogressbar#bg;
+    border: 1px solid @widgets#qprogressbar#border;
+    text-align: center;
+}
+
+QProgressBar::chunk {
+    background-color: @widgets#qprogressbar#chunk#bg;
+    width: 20px;
+}
+
+/* QGroupBox */
+QGroupBox {
+    border: 2px solid @widgets#qgroupbox#border;
+    border-radius: 5px;
+    margin-top: 2ex;
+}
+
+QGroupBox::title {
+    color: @widgets#qgroupbox#title#fg;
+    subcontrol-origin: margin;
+    subcontrol-position: top left;
+    position: absolute;
+    padding: 0 3px;
+    top: 0px;
+    left: 10px;
+    bottom: 0px;
+}
+
+/* QSlider */
+QSlider::groove:horizontal {
+    border: 1px solid @widgets#qslider#groove#border;
+    height: 8px;
+    background-color: @widgets#qslider#groove#bg;
+    margin: 2px 0;
+}
+
+QSlider::handle:horizontal {
+    border: 1px solid @widgets#qslider#handle#border;
+    background-color: @widgets#qslider#handle#bg;
+    width: 18px;
+    margin: -2px 0;
+}
+
+QSlider::add-page:horizontal {
+    background-color: transparent;
+}
+
+QSlider::sub-page:horizontal {
+    border: 1px solid @widgets#qslider#subpage#border;
+    background-color: @widgets#qslider#subpage#bg;
+    margin: 2px 0;
+}
+
+QSlider::groove:vertical {
+    border: 1px solid @widgets#qslider#groove#border;
+    width: 8px;
+    background-color: @widgets#qslider#groove#bg;
+    margin: 0 2px;
+}
+
+QSlider::handle:vertical {
+    border: 1px solid @widgets#qslider#handle#border;
+    background-color: @widgets#qslider#handle#bg;
+    height: 18px;
+    margin: 0 -2px;
+}
+
+QSlider::add-page:vertical {
+    background-color: transparent;
+}
+
+QSlider::sub-page:vertical {
+    border: 1px solid @widgets#qslider#subpage#border;
+    background-color: @widgets#qslider#subpage#bg;
+    margin: 0 2px;
+}
+
+QSizeGrip {
+    image: url(sizegrip.svg);
+    width: 16px;
+    height: 16px;
+}
+
+/* ViewWindow */
+vnotex--ViewWindow QToolBar[ViewWindowToolBar="true"] {
+    background-color: @widgets#viewwindow#toolbar#bg;
+}
+
+/* ViewSplit */
+vnotex--ViewSplit QTabBar::tab:selected {
+    color: @widgets#viewsplit#tabbar#tab#selected#fg;
+    background-color: @widgets#viewsplit#tabbar#tab#selected#bg;
+}
+
+vnotex--ViewSplit QTabBar[ViewSplitFlash="true"]::tab:selected {
+    background-color: @widgets#viewsplit#flash#bg;
+}
+
+vte--VTextEdit {
+    border: none;
+}

src/data/extra/themes/solarized-dark/left.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="rotate(90 255.99999999999997,256.00000000000006) " id="svg_1">
+   <polygon points="128,192 256,320 384,192  " id="svg_2" fill="#9EA5B4"/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/left_disabled.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="rotate(90 255.99999999999997,256.00000000000006) " id="svg_1">
+   <polygon points="128,192 256,320 384,192  " id="svg_2" fill="#4D5765"/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/menu_checkbox.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <path stroke-opacity="0" id="svg_3" d="m126,243.24589l27.93756,-27.94743l76.53449,76.52461l127.58052,-127.54102l27.94743,27.92768l-155.52795,155.50821" stroke-width="5" fill="#9EA5B4" stroke="#000000"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/menu_radiobutton.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <circle fill="#9EA5B4" stroke="#000000" stroke-width="20" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" cx="257.00002" cy="256" r="83.2406" id="svg_11"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/palette.json

@@ -0,0 +1,653 @@
+{
+    "metadata" : {
+        "revision" : 0,
+        "//comment" : "If there is a file named 'editor-highlight.theme' under theme folder, this value will be ignored.",
+        "//comment" : "Otherwise, this value specify the theme name to use for syntax highlighting.",
+        "editor-highlight-theme" : "Solarized Dark",
+        "//comment" : "If there is a file named 'markdown-editor-highlight.theme' under theme folder, this value will be ignored.",
+        "//comment" : "Otherwise, this value specify the theme name to use for syntax highlighting.",
+        "//comment" : "If empty, 'editor-highlight-theme' will be used.",
+        "markdown-editor-highlight-theme" : "Solarized Dark",
+        "display_name" : "Solarized-dark",
+        "//comment" : "Display name for different locales",
+        "display_name_zh_CN" : "Solarized-dark",
+        "author": "nriver",
+    },
+    "palette" : {
+        "bg1_1" : "#002b36",
+        "bg1_2" : "#022e39",
+        "bg1_3" : "#04313c",
+        "bg1_4" : "#05333f",
+        "bg1_5" : "#073642",
+        "bg1_51" : "#15414c",
+        "bg1_6" : "#234c57",
+        "bg1_7" : "#305761",
+        "bg1_71" : "#3e626c",
+        "bg1_8" : "#4c6d76",
+        "bg1_9" : "#5a7881",
+        "fg1_1" : "#67838b",
+        "fg1_2" : "#758e96",
+        "fg1_3" : "#8398a0",
+        "fg1_4" : "#91a3aa",
+        "fg1_5" : "#9eaeb5",
+        "fg1_6" : "#acb9bf",
+        "fg1_7" : "#bac4ca",
+        "fg1_8" : "#c8cfd4",
+        "fg1_9" : "#d5dadf",
+        "fg1_10" : "#e3e5e9",
+        "bg2_2" : "#3a4ba6",
+        "bg2_3" : "#3f52b4",
+        "bg2_4" : "#485bbf",
+        "bg2_5" : "#14161B",
+        "bg2_6" : "#6675c9",
+        "bg2_7" : "#7482ce",
+        "bg2_8" : "#838fd3",
+        "bg2_9" : "#919cd8",
+        "fg10" : "#b71c1c",
+        "fg11" : "#ab5683",
+        "fg12" : "#5768c4",
+        "fg13" : "#b42b1f",
+        "fg15_3" : "#4f5666",
+        "fg15_4" : "#60697c",
+        "fg15_5" : "#9ea5b4",
+        "bg10_4" : "#073642",
+        "bg10_5" : "#002B36",
+        "bg10_6" : "#3c414d",
+        "bg10_7" : "#444b58",
+        "bg10_8" : "#5a5f66",
+        "bg11" : "#0c7bff"
+    },
+    "base" : {
+        "normal" : {
+            "fg" : "@palette#fg1_5",
+            "bg" : "@palette#bg1_5",
+            "border" : "@palette#bg1_6"
+        },
+        "master" : {
+            "fg" : "@palette#fg1_9",
+            "bg" : "@palette#bg2_5",
+            "alt" : "@palette#bg2_4"
+        },
+        "header" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "@base#normal#bg"
+        },
+        "footer" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "@base#normal#bg"
+        },
+        "title" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "@palette#bg1_51"
+        },
+        "content" : {
+            "fg" : "@palette#fg1_8",
+            "bg" : "@palette#bg10_5",
+            "border" : "@base#normal#border",
+            "disabled" : {
+                "fg" : "@base#disabled#fg",
+                "bg" : "@base#content#bg"
+            },
+            "pressed" : {
+                "fg" : "@base#pressed#fg",
+                "bg" : "@base#pressed#bg"
+            },
+            "focus" : {
+                "fg" : "@base#content#fg",
+                "bg" : "@base#focus#bg",
+                "border" : "@base#master#bg"
+            },
+            "hover" : {
+                "fg" : "@base#content#fg",
+                "bg" : "@base#hover#bg",
+                "border" : "@base#master#bg"
+            },
+            "selection" : {
+                "fg" : "@palette#fg1_10",
+                "bg" : "@palette#bg11"
+            },
+            "selected" : {
+                "fg" : "@base#content#fg",
+                "bg" : "@base#selected#bg",
+                "active" : {
+                    "fg" : "@base#content#selected#fg",
+                    "bg" : "@base#content#selected#bg"
+                },
+                "inactive" : {
+                    "fg" : "@base#content#selected#fg",
+                    "bg" : "@base#content#hover#bg"
+                }
+            }
+        },
+        "error" : {
+            "fg" : "@palette#fg10"
+        },
+        "warning" : {
+            "fg" : "@palette#fg11"
+        },
+        "info" : {
+            "fg" : "@palette#fg12"
+        },
+        "danger" : {
+            "fg": "@palette#fg1_10",
+            "bg": "@palette#fg13"
+        },
+        "disabled" : {
+            "fg" : "@palette#fg1_1",
+            "bg" : "@base#normal#bg"
+        },
+        "pressed" : {
+            "fg" : "@palette#fg1_3",
+            "bg" : "@palette#bg1_3"
+        },
+        "focus" : {
+            "fg" : "@palette#fg1_8",
+            "bg" : "@palette#bg1_6"
+        },
+        "hover" : {
+            "fg" : "@palette#fg1_8",
+            "bg" : "@palette#bg1_7"
+        },
+        "selected" : {
+            "fg" : "@palette#fg1_9",
+            "bg" : "@palette#bg1_8"
+        },
+        "icon" : {
+            "fg" : "@palette#fg15_5",
+            "inactive" : {
+                "fg" : "@palette#fg15_4"
+            },
+            "disabled" : {
+                "fg" : "@palette#fg15_3"
+            },
+            "warning" : {
+                "fg" : "@base#warning#fg"
+            },
+            "danger" : {
+                "fg": "@base#danger#fg"
+            },
+            "selected" : {
+                "fg" : "@base#master#bg"
+            }
+        }
+    },
+    "widgets" : {
+        "separator" : {
+            "bg" : "@base#normal#border"
+        },
+        "qwidget" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "@base#normal#bg",
+            "info" : {
+                "border" : "@base#info#fg"
+            },
+            "warning" : {
+                "border" : "@base#warning#fg"
+            },
+            "error" : {
+                "border" : "@base#error#fg"
+            },
+            "danger" : {
+                "fg" : "@base#danger#fg",
+                "bg" : "@base#danger#bg"
+            }
+        },
+        "toolbox" : {
+            "title" : {
+                "border" : "@widgets#toolbox#title#button#active#bg",
+                "button": {
+                    "fg" : "@base#normal#fg",
+                    "active" : {
+                        "fg" : "@base#master#fg",
+                        "bg" : "@base#master#bg"
+                    }
+                }
+            }
+        },
+        "titlebar" : {
+            "button" : {
+                "fg" : "@base#icon#fg"
+            },
+            "menu_icon" : {
+                "fg" : "@base#icon#fg",
+                "disabled" : {
+                    "fg" : "@base#icon#disabled#fg"
+                }
+            }
+        },
+        "toolbar" : {
+            "icon" : {
+                "fg" : "@base#icon#fg",
+                "disabled" : {
+                    "fg" : "@base#icon#disabled#fg"
+                },
+                "danger" : {
+                    "fg" : "@base#icon#danger#fg"
+                }
+            }
+        },
+        "notebookexplorer" : {
+            "node_icon" : {
+                "fg" : "@base#icon#fg",
+                "invalid" : {
+                    "fg" : "@base#icon#warning#fg"
+                }
+            },
+            "external_node_icon" : {
+                "fg" : "@base#icon#inactive#fg"
+            }
+        },
+        "locationlist" : {
+            "node_icon" : {
+                "fg" : "@base#icon#fg"
+            }
+        },
+        "viewsplit" : {
+            "action_button" : {
+                "fg" : "@base#icon#inactive#fg",
+                "active" : {
+                    "fg" : "@base#icon#fg"
+                }
+            },
+            "tabbar" : {
+                "tab" : {
+                    "selected" : {
+                        "fg" : "@base#content#fg",
+                        "bg" : "@base#content#bg"
+                    }
+                }
+            },
+            "flash" : {
+                "bg" : "@base#master#alt"
+            }
+        },
+        "qmainwindow" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "@base#normal#bg",
+            "separator" : {
+                "bg" : "@widgets#separator#bg"
+            }
+        },
+        "dragdropareaindicator" : {
+            "fg" : "@base#normal#fg",
+            "border" : "@widgets#dragdropareaindicator#fg"
+        },
+        "navigationlabel" : {
+            "fg" : "@widgets#toolbox#title#button#active#fg",
+            "bg" : "@widgets#toolbox#title#button#active#bg"
+        },
+        "qmenu" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "@base#normal#bg",
+            "border" : "@base#normal#border",
+            "item" : {
+                "selected" : {
+                    "fg" : "@base#selected#fg",
+                    "bg" : "@base#selected#bg"
+                },
+                "disabled" : {
+                    "fg" : "@base#disabled#fg"
+                }
+            },
+            "separator" : {
+                "bg" : "@widgets#separator#bg"
+            }
+        },
+        "qtooltip" : {
+            "fg" : "@base#master#fg",
+            "bg" : "@base#master#bg"
+        },
+        "qtoolbar" : {
+            "bg" : "@base#header#bg",
+            "separator" : {
+                "bg" : "@widgets#separator#bg"
+            },
+            "extension" : {
+                "bg" : "@base#normal#border",
+                "hover" : {
+                    "bg" : "@base#hover#bg"
+                }
+            }
+        },
+        "qtoolbutton" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "transparent",
+            "checked" : {
+                "fg" : "@base#selected#fg",
+                "bg" : "@base#selected#bg"
+            },
+            "hover" : {
+                "fg" : "@base#hover#fg",
+                "bg" : "@base#hover#bg"
+            },
+            "pressed" : {
+                "fg" : "@base#pressed#fg",
+                "bg" : "@base#pressed#bg"
+            }
+        },
+        "qdockwidget" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "@base#normal#bg",
+            "title" : {
+                "bg" : "@base#title#bg",
+                "button" : {
+                    "hover" : {
+                        "bg" : "@base#hover#bg"
+                    }
+                }
+            }
+        },
+        "qpushbutton" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "transparent",
+            "border" : "@base#normal#border",
+            "default" : {
+                "border" : "@base#master#bg"
+            },
+            "focus" : {
+                "fg" : "@base#focus#fg",
+                "bg" : "@base#focus#bg"
+            },
+            "checked" : {
+                "fg" : "@base#selected#fg",
+                "bg" : "@base#selected#bg"
+            },
+            "hover" : {
+                "fg" : "@base#hover#fg",
+                "bg" : "@base#hover#bg"
+            },
+            "pressed" : {
+                "fg" : "@base#pressed#fg",
+                "bg" : "@base#pressed#bg"
+            },
+            "disabled" : {
+                "fg" : "@base#disabled#fg",
+                "bg" : "@widgets#qpushbutton#bg"
+            }
+        },
+        "qdialog" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "@base#normal#bg"
+        },
+        "qcombobox" : {
+            "fg" : "@base#content#fg",
+            "bg" : "@base#content#bg",
+            "border" : "@base#content#border",
+            "focus" : {
+                "bg" : "@base#content#focus#bg",
+                "border" : "@base#content#focus#border"
+            },
+            "hover" : {
+                "bg" : "@base#content#hover#bg",
+                "border" : "@base#content#hover#border"
+            },
+            "disabled" : {
+                "fg" : "@base#content#disabled#fg"
+            },
+            "view" : {
+                "border" : "@base#content#border",
+                "bg" : "@widgets#qcombobox#bg",
+                "selection" : {
+                    "fg" : "@base#content#selection#fg",
+                    "bg" : "@base#content#selection#bg"
+                }
+            },
+            "item" : {
+                "hover" : {
+                    "fg" : "@base#content#hover#fg",
+                    "bg" : "@base#content#hover#bg"
+                }
+            }
+        },
+        "qlabel" : {
+            "fg" : "@base#normal#fg"
+        },
+        "qlineedit" : {
+            "border" : "@base#content#border",
+            "fg" : "@base#content#fg",
+            "bg" : "@base#content#bg",
+            "selection" : {
+                "fg" : "@base#content#selection#fg",
+                "bg" : "@base#content#selection#bg"
+            },
+            "focus" : {
+                "bg" : "@base#content#focus#bg",
+                "border" : "@base#content#focus#border"
+            },
+            "hover" : {
+                "bg" : "@base#content#hover#bg",
+                "border" : "@base#content#hover#border"
+            },
+            "disabled" : {
+                "fg" : "@base#content#disabled#fg"
+            }
+        },
+        "qtabbar" : {
+            "tab" : {
+                "fg" : "@base#normal#fg",
+                "bg" : "@base#normal#bg",
+                "border" : "@base#normal#border",
+                "hover" : {
+                    "fg" : "@base#hover#fg",
+                    "bg" : "@base#hover#bg"
+                },
+                "selected" : {
+                    "fg" : "@base#content#fg",
+                    "bg" : "@base#content#bg",
+                    "border" : "@base#master#bg"
+                }
+            }
+        },
+        "qtreeview" : {
+            "fg" : "@base#content#fg",
+            "bg" : "@base#content#bg",
+            "item" : {
+                "hover" : {
+                    "fg" : "@base#content#hover#fg",
+                    "bg" : "@base#content#hover#bg"
+                },
+                "selected" : {
+                    "fg" : "@base#content#selected#fg",
+                    "bg" : "@base#content#selected#bg",
+                    "active" : {
+                        "fg" : "@base#content#selected#active#fg",
+                        "bg" : "@base#content#selected#active#bg"
+                    },
+                    "inactive" : {
+                        "fg" : "@base#content#selected#inactive#fg",
+                        "bg" : "@base#content#selected#inactive#bg"
+                    }
+                }
+            }
+        },
+        "qlistview" : {
+            "fg" : "@base#content#fg",
+            "bg" : "@base#content#bg",
+            "item" : {
+                "hover" : {
+                    "fg" : "@base#content#hover#fg",
+                    "bg" : "@base#content#hover#bg"
+                },
+                "selected" : {
+                    "fg" : "@base#content#selected#fg",
+                    "bg" : "@base#content#selected#bg",
+                    "active" : {
+                        "fg" : "@base#content#selected#active#fg",
+                        "bg" : "@base#content#selected#active#bg"
+                    },
+                    "inactive" : {
+                        "fg" : "@base#content#selected#inactive#fg",
+                        "bg" : "@base#content#selected#inactive#bg"
+                    }
+                }
+            }
+        },
+        "qsplitter" : {
+            "handle" : {
+                "bg" : "@base#normal#border",
+                "pressed" : {
+                    "bg" : "@base#pressed#bg"
+                }
+            }
+        },
+        "qstatusbar" : {
+            "fg" : "@base#footer#fg",
+            "bg" : "@base#footer#bg"
+        },
+        "qscrollbar" : {
+            "bg" : "@base#normal#bg",
+            "addpage" : {
+                "bg" : "transparent"
+            },
+            "handle" : {
+                "bg" : "@palette#bg1_6",
+                "hover" : {
+                    "bg" : "@palette#bg1_71"
+                },
+                "pressed" : {
+                    "bg" : "@palette#bg1_7"
+                }
+            }
+        },
+        "qcheckbox" : {
+            "disabled" : {
+                "fg" : "@base#disabled#fg"
+            },
+            "indicator" : {
+                "focus" : {
+                    "bg" : "@base#focus#bg"
+                },
+                "hover" : {
+                    "bg" : "@base#hover#bg"
+                },
+                "pressed" : {
+                    "bg" : "@base#pressed#bg"
+                }
+            }
+        },
+        "qradiobutton" : {
+            "disabled" : {
+                "fg" : "@base#disabled#fg"
+            },
+            "indicator" : {
+                "focus" : {
+                    "bg" : "@base#focus#bg"
+                },
+                "hover" : {
+                    "bg" : "@base#hover#bg"
+                },
+                "pressed" : {
+                    "bg" : "@base#pressed#bg"
+                }
+            }
+        },
+        "qspinbox" : {
+            "border" : "@base#content#border",
+            "fg" : "@base#content#fg",
+            "bg" : "@base#content#bg",
+            "disabled" : {
+                "fg" : "@base#content#disabled#fg",
+                "bg" : "@base#content#disabled#bg"
+            },
+            "selection" : {
+                "fg" : "@base#content#selection#fg",
+                "bg" : "@base#content#selection#bg"
+            },
+            "focus" : {
+                "bg" : "@base#content#focus#bg",
+                "border" : "@base#content#focus#border"
+            },
+            "hover" : {
+                "bg" : "@base#content#hover#bg",
+                "border" : "@base#content#hover#border"
+            },
+            "button" : {
+                "hover" : {
+                    "bg" : "@base#content#hover#bg"
+                },
+                "pressed" : {
+                    "bg" : "@base#content#pressed#bg"
+                }
+            }
+        },
+        "qheaderview" : {
+            "section" : {
+                "fg" : "@base#content#fg",
+                "bg" : "@base#content#bg",
+                "border" : "@base#content#border",
+                "checked" : {
+                    "fg" : "@base#content#selected#fg",
+                    "bg" : "@base#content#selected#bg"
+                }
+            }
+        },
+        "qprogressbar" : {
+            "bg" : "@base#content#bg",
+            "border" : "@base#content#border",
+            "chunk" : {
+                "bg" : "@base#master#alt"
+            }
+        },
+        "qgroupbox" : {
+            "border" : "@base#normal#border",
+            "title" : {
+                "fg" : "@base#normal#fg"
+            }
+        },
+        "qabstractscrollarea" : {
+            "border" : "@base#normal#border",
+            "corner" : {
+                "bg" : "@widgets#qscrollbar#bg"
+            }
+        },
+        "qslider" : {
+            "groove" : {
+                "bg" : "@base#content#bg",
+                "border" : "@base#content#border"
+            },
+            "handle" : {
+                "border" : "@base#content#border",
+                "bg" : "@base#master#bg"
+            },
+            "subpage" : {
+                "border" : "@widgets#qslider#handle#border",
+                "bg" : "@base#master#alt"
+            }
+        },
+        "viewwindow" : {
+            "toolbar" : {
+                "bg" : "@base#content#bg"
+            }
+        },
+        "quickselector" : {
+            "item_icon" : {
+                "fg" : "@palette#bg2_9",
+                "border" : "@palette#bg2_9"
+            }
+        },
+        "styleditemdelegate" : {
+            "separator" : {
+                "fg" : "@base#normal#fg",
+                "bg" : "@widgets#separator#bg"
+            },
+            "highlight" : {
+                "fg" : "@base#master#fg",
+                "bg" : "@base#master#bg"
+            }
+        },
+        "mainwindow" : {
+            "dockwidget_tabbar" : {
+                "icon" : {
+                    "fg" : "@base#icon#fg",
+                    "selected" : {
+                        "fg" : "@base#icon#selected#fg"
+                    }
+                }
+            },
+            "tips_label" : {
+                "fg" : "@base#master#fg",
+                "bg" : "@base#master#bg"
+            }
+        }
+    }
+}

src/data/extra/themes/solarized-dark/radiobutton_checked.svg

@@ -0,0 +1,7 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <circle fill="#000000" stroke-width="30" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" cx="256.00001" cy="256.00001" r="142.96561" id="svg_9" stroke="#9EA5B4"/>
+  <circle fill="#9EA5B4" stroke="#000000" stroke-width="20" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" cx="256.00002" cy="256" r="83.2406" id="svg_11"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/radiobutton_checked_disabled.svg

@@ -0,0 +1,7 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <circle fill="#000000" stroke-width="30" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" cx="256.00001" cy="256.00001" r="142.96561" id="svg_9" stroke="#4D5765"/>
+  <circle fill="#4D5765" stroke="#000000" stroke-width="20" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" cx="256.00002" cy="256" r="83.2406" id="svg_11"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/radiobutton_unchecked.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <circle fill="#000000" stroke-width="30" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" cx="256.00001" cy="256.00001" r="142.96561" id="svg_9" stroke="#9EA5B4"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/radiobutton_unchecked_disabled.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <circle fill="#000000" stroke-width="30" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" cx="256.00001" cy="256.00001" r="142.96561" id="svg_9" stroke="#4D5765"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/right.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="rotate(-90 256.00000000000006,256) " id="svg_1">
+   <polygon fill="#9EA5B4" id="svg_2" points="128,192 256,320 384,192  "/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/right_disabled.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="rotate(-90 256.00000000000006,256) " id="svg_1">
+   <polygon fill="#4D5765" id="svg_2" points="128,192 256,320 384,192  "/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/sizegrip.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1609394859499" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3664" width="512" height="512" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M938.666667 938.666667 853.333333 938.666667 853.333333 853.333333 938.666667 853.333333 938.666667 938.666667M938.666667 768 853.333333 768 853.333333 682.666667 938.666667 682.666667 938.666667 768M768 938.666667 682.666667 938.666667 682.666667 853.333333 768 853.333333 768 938.666667M768 768 682.666667 768 682.666667 682.666667 768 682.666667 768 768M597.333333 938.666667 512 938.666667 512 853.333333 597.333333 853.333333 597.333333 938.666667M938.666667 597.333333 853.333333 597.333333 853.333333 512 938.666667 512 938.666667 597.333333Z" p-id="3665" fill="#9EA5B4"></path></svg>

src/data/extra/themes/solarized-dark/text-editor.theme

@@ -0,0 +1,202 @@
+{
+    "metadata" : {
+        "revision" : 0,
+        "name" : "Solarized-dark",
+        "type" : "vtextedit"
+    },
+    "editor-styles" : {
+        "Text" : {
+            "//comment" : "Support a list of fonts separated by ,",
+            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New",
+            "font-size" : 12,
+            "text-color" : "#ccd1d8",
+            "background-color" : "#002B36",
+            "selected-text-color" : "#e3e5e9",
+            "selected-background-color" : "#0c7bff"
+        },
+        "CursorLine" : {
+            "background-color" : "#073642"
+        },
+        "TrailingSpace" : {
+            "background-color" : "#959eae"
+        },
+        "Tab" : {
+            "background-color" : "#a0a8b7"
+        },
+        "SelectedText" : {
+            "//comment" : "Selected text highlight",
+            "text-color" : "#222222",
+            "background-color" : "#dfdf00"
+        },
+        "IndicatorsBorder" : {
+            "text-color" : "#8a93a6",
+            "background-color" : "#04313c"
+        },
+        "CurrentLineNumber" : {
+            "text-color" : "#ccd1d8"
+        },
+        "Folding" : {
+            "text-color" : "#838fd3"
+        },
+        "FoldedFolding" : {
+            "text-color" : "#919cd8"
+        },
+        "FoldingHighlight" : {
+            "text-color" : "#4c5562"
+        },
+        "FoldedFoldingRangeLine" : {
+            "background-color" : "#3a4ba6"
+        },
+        "IncrementalSearch" : {
+            "//comment" : "Incremental search highlight",
+            "text-color" : "#222222",
+            "background-color" : "#ce93d8"
+        },
+        "Search" : {
+            "//comment" : "Search highlight",
+            "text-color" : "#222222",
+            "background-color" : "#4db6ac"
+        },
+        "SearchUnderCursor" : {
+            "//comment" : "Search highlight under cursor",
+            "text-color" : "#222222",
+            "background-color" : "#66bb6a"
+        }
+    },
+    "//comment" : "Override the Text style in editor-styles",
+    "markdown-editor-styles" : {
+        "Text" : {
+            "//comment" : "Support a list of fonts separated by ,",
+            "font-family" : "YaHei Consolas Hybrid, 冬青黑体, Microsoft YaHei, 微软雅黑, Microsoft YaHei UI, WenQuanYi Micro Hei, 文泉驿雅黑, Dengxian, 等线体, STXihei, 华文细黑, Liberation Sans, Droid Sans, NSimSun, 新宋体, SimSun, 宋体, Verdana, Helvetica, Tahoma, Arial, Geneva, Georgia, Times New Roman",
+            "font-size" : 12,
+            "text-color" : "#ccd1d8",
+            "background-color" : "#002B36",
+            "selected-text-color" : "#e3e5e9",
+            "selected-background-color" : "#0c7bff"
+        },
+        "Preview" : {
+            "background-color" : "#b0bec5"
+        }
+    },
+    "markdown-syntax-styles" : {
+        "H1" : {
+            "text-color" : "#CA4A17",
+            "bold" : true,
+            "font-size" : 17
+        },
+        "H2" : {
+            "text-color" : "#CA4A17",
+            "bold" : true,
+            "font-size" : 16
+        },
+        "H3" : {
+            "text-color" : "#CA4A17",
+            "bold" : true,
+            "font-size" : 15
+        },
+        "H4" : {
+            "text-color" : "#CA4A17",
+            "bold" : true,
+            "font-size" : 14
+        },
+        "H5" : {
+            "text-color" : "#CA4A17",
+            "bold" : true,
+            "font-size" : 13
+        },
+        "H6" : {
+            "text-color" : "#CA4A17",
+            "bold" : true,
+            "font-size" : 12
+        },
+        "HRULE" : {
+            "text-color" : "#abb2bf",
+            "background-color" : "#864046"
+        },
+        "LIST_BULLET" : {
+            "text-color" : "#CA4A17",
+            "bold" : true
+        },
+        "LIST_ENUMERATOR" : {
+            "text-color" : "#CA4A17"
+        },
+        "LINK" : {
+            "text-color" : "#2AA198"
+        },
+        "AUTO_LINK_URL" : {
+            "text-color" : "#2AA198"
+        },
+        "AUTO_LINK_EMAIL" : {
+            "text-color" : "#2AA198"
+        },
+        "IMAGE" : {
+            "text-color" : "#4883b3"
+        },
+        "REFERENCE" : {
+            "text-color" : "#56b6c2"
+        },
+        "CODE" : {
+            "text-color" : "#D7BA7D",
+            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
+        },
+        "EMPH" : {
+            "italic" : true
+        },
+        "STRONG" : {
+            "bold" : true
+        },
+        "HTML_ENTITY" : {
+            "text-color" : "#c07855"
+        },
+        "HTML" : {
+            "text-color" : "#c07855"
+        },
+        "HTMLBLOCK" : {
+            "text-color" : "#c07855"
+        },
+        "COMMENT" : {
+            "text-color" : "#7e899d"
+        },
+        "VERBATIM" : {
+            "text-color" : "#D7BA7D",
+            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
+        },
+        "//comment" : "Please modify the syntax highlight theme as well if you change this",
+        "FENCEDCODEBLOCK" : {
+            "text-color" : "#D7BA7D",
+            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
+        },
+        "BLOCKQUOTE" : {
+            "text-color" : "#7482ce"
+        },
+        "NOTE" : {
+            "text-color" : "#9575cd"
+        },
+        "STRIKE" : {
+            "text-color" : "#e57373",
+            "strike-through" : true
+        },
+        "FRONTMATTER" : {
+            "text-color" : "#6e7686"
+        },
+        "INLINEEQUATION" : {
+            "text-color" : "#4db6ac",
+            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
+        },
+        "DISPLAYFORMULA" : {
+            "text-color" : "#4db6ac",
+            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
+        },
+        "MARK" : {
+            "text-color" : "#d7dae0",
+            "background-color" : "#898900"
+        },
+        "TABLE" : {
+            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
+        },
+        "TABLEBORDER" : {
+            "text-color" : "#CA4A17",
+            "background-color" : "#444b58"
+        }
+   }
+}

src/data/extra/themes/solarized-dark/up.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="rotate(180 255.99999999999997,256) " id="svg_1">
+   <polygon points="128,192 256,320 384,192  " id="svg_2" fill="#9EA5B4"/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/up_disabled.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="rotate(180 255.99999999999997,256) " id="svg_1">
+   <polygon points="128,192 256,320 384,192  " id="svg_2" fill="#4D5765"/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-dark/web.css

@@ -0,0 +1,302 @@
+/* 
+    https://github.com/Nriver/vnote-solarized-theme
+    made by Nriver
+*/
+
+body {
+    margin: 0 auto;
+    font-family: "YaHei Consolas Hybrid", "Noto Sans", "Helvetica Neue", "Segoe UI", Helvetica, Tahoma, Arial, Geneva, Georgia, Palatino, "Times New Roman", "冬青黑体", "Microsoft YaHei", "微软雅黑", "Microsoft YaHei UI", "WenQuanYi Micro Hei", "文泉驿雅黑", Dengxian, "等线体", STXihei, "华文细黑", "Liberation Sans", "Droid Sans", NSimSun, "新宋体", SimSun, "宋体", "Apple Color Emoji", "Segoe UI Emoji";
+    color: #ccd1d8;
+    line-height: 1.5;
+    padding: 16px;
+    background-color: #002B36;
+    font-size: 16px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: #CA4A17;
+    font-weight: bold;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    padding: 0;
+}
+
+p {
+    padding: 0;
+    margin-bottom: 16px;
+}
+
+h1 {
+    font-size: 26px;
+}
+
+h2 {
+    font-size: 24px;
+}
+
+h3 {
+    font-size: 22px;
+}
+
+h4 {
+    font-size: 20px;
+}
+
+h5 {
+    font-size: 19px;
+}
+
+h6 {
+    font-size: 18px;
+}
+
+a {
+    color: #2AA198;
+    margin: 0;
+    padding: 0;
+    vertical-align: baseline;
+    text-decoration: none;
+    word-break: break-word;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+a:visited {
+    color: #ba68c8;
+}
+
+ul, ol {
+    padding: 0;
+    padding-left: 24px;
+}
+
+li {
+    line-height: 24px;
+}
+
+li ul, li ol {
+    margin-left: 16px;
+}
+
+p, ul, ol {
+    font-size: 16px;
+    line-height: 24px;
+}
+
+mark {
+    color: #000000;
+    background-color: #c4c400;
+}
+
+pre {
+    display: block;
+    overflow-y: hidden;
+    overflow-x: auto;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+}
+
+code {
+    font-family: "YaHei Consolas Hybrid", Consolas, Monaco, "Andale Mono", Monospace, "Courier New";
+    color: #D7BA7D;
+    word-break: break-word;
+}
+
+pre code {
+    display: block;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    color: #D7BA7D;
+    background-color: #073642;
+    line-height: 1.5;
+    font-family: "YaHei Consolas Hybrid", Consolas, Monaco, "Andale Mono", Monospace, "Courier New";
+    white-space: pre;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+}
+
+aside {
+    display: block;
+    float: right;
+    width: 390px;
+}
+
+blockquote {
+    color: #abb2bf;
+    border-left: .5em solid #abb2bf;
+    padding: 0 1em;
+    margin-left: 0;
+}
+
+blockquote p {
+    color: #abb2bf;
+}
+
+hr {
+    display: block;
+    text-align: left;
+    margin: 1em 0;
+    border: none;
+    height: 2px;
+    background-color: #4c5562;
+}
+
+table {
+   padding: 0;
+   margin: 1rem 0.5rem;
+   border-collapse: collapse;
+}
+
+table tr {
+   border-top: 1px solid #4c5562;
+   background-color: #002B36;
+   margin: 0;
+   padding: 0;
+}
+
+table tr:hover {
+   background-color: #3b424c;
+}
+
+table tr th {
+   font-weight: bold;
+   border: 1px solid #4c5562;
+   margin: 0;
+   padding: 6px 13px;
+}
+
+table tr td {
+   border: 1px solid #4c5562;
+   margin: 0;
+   padding: 6px 13px;
+}
+
+table tr th :first-child, table tr td :first-child {
+   margin-top: 0;
+}
+
+table tr th :last-child, table tr td :last-child {
+   margin-bottom: 0;
+}
+
+div.vx-mermaid-graph {
+    margin: 16px 0px 16px 0px;
+    overflow-y: hidden;
+    background: #B0BEC5;
+    color: #6C6C6C;
+}
+
+div.vx-flowchartjs-graph {
+    padding: 0px 5px 0px 5px;
+    margin: 16px 0px 16px 0px;
+    width: fit-content;
+    overflow: hidden;
+    background: #B0BEC5;
+    color: #6C6C6C;
+}
+
+div.vx-wavedrom-graph {
+    padding: 0px 5px 0px 5px;
+    margin: 16px 0px 16px 0px;
+    width: fit-content;
+    overflow: hidden;
+    background: #B0BEC5;
+    color: #6C6C6C;
+}
+
+div.vx-plantuml-graph {
+    padding: 5px 5px 0px 5px;
+    margin: 16px 0px 16px 0px;
+    width: fit-content;
+    overflow: hidden;
+    background: #B0BEC5;
+    color: #6C6C6C;
+}
+
+::selection {
+  background-color: #0c7bff;
+  color: #e3e5e9;
+}
+
+::-webkit-scrollbar {
+    background-color: #073642;
+    width: 14px;
+    height: 14px;
+    border: none;
+}
+
+::-webkit-scrollbar-corner {
+    background-color: #073642;
+}
+
+::-webkit-scrollbar-button {
+    /* This selector affects the styling of both the up & down and left & right buttons of a scrollbar */
+    height: 14px;
+    width: 14px;
+    background-color: #073642;
+}
+
+::-webkit-scrollbar-button:hover {
+    background-color: #535d6c;
+}
+
+::-webkit-scrollbar-button:active {
+    background-color: #002B36;
+}
+
+::-webkit-scrollbar-track {
+    /* This selector affects the styling of the area in the scrollbar between the two buttons */
+    background-color: #073642;
+}
+
+::-webkit-scrollbar-thumb {
+    /* This selector affects the styling of draggable element of the scollbar */
+    border: none;
+    background-color: #304A50;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #465356;
+}
+
+::-webkit-scrollbar-thumb:active {
+    background-color: #4C666C;
+}
+
+::-webkit-scrollbar-button:horizontal:increment {
+    background-image: url(right.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+::-webkit-scrollbar-button:horizontal:decrement {
+    background-image: url(left.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+::-webkit-scrollbar-button:vertical:increment {
+    background-image: url(down.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+::-webkit-scrollbar-button:vertical:decrement {
+    background-image: url(up.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+#vx-content span.vx-search-match {
+    color: #222222;
+    background-color: #4db6ac;
+}
+
+#vx-content span.vx-current-search-match {
+    color: #222222;
+    background-color: #66bb6a;
+}

src/data/extra/themes/solarized-light/arrow_dropdown.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<g>
+	<polygon fill="#9EA5B4" points="128,192 256,320 384,192 	"/>
+</g>
+</svg>

src/data/extra/themes/solarized-light/arrow_dropdown_disabled.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<g>
+	<polygon fill="#4D5765" points="128,192 256,320 384,192 	"/>
+</g>
+</svg>

src/data/extra/themes/solarized-light/branch_closed.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="rotate(-90 256.00000000000006,256) " id="svg_1">
+   <polygon fill="#9EA5B4" id="svg_2" points="128,192 256,320 384,192  "/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/branch_open.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g id="svg_1">
+   <polygon fill="#9EA5B4" id="svg_2" points="128,192 256,320 384,192  "/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/checkbox_checked.svg

@@ -0,0 +1,7 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <rect id="svg_6" fill-opacity="0" height="299" width="299" y="106.5" x="106.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="30" stroke="#9EA5B4" fill="#000000"/>
+  <path stroke-opacity="0" id="svg_3" d="m126,243.24589l27.93756,-27.94743l76.53449,76.52461l127.58052,-127.54102l27.94743,27.92768l-155.52795,155.50821" stroke-width="5" fill="#9EA5B4" stroke="#000000"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/checkbox_checked_disabled.svg

@@ -0,0 +1,7 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <rect id="svg_6" fill-opacity="0" height="299" width="299" y="106.5" x="106.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="30" stroke="#4D5765" fill="#000000"/>
+  <path stroke-opacity="0" id="svg_3" d="m126,243.24589l27.93756,-27.94743l76.53449,76.52461l127.58052,-127.54102l27.94743,27.92768l-155.52795,155.50821" stroke-width="5" fill="#4D5765" stroke="#000000"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/checkbox_unchecked.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <rect id="svg_6" fill-opacity="0" height="299" width="299" y="106.5" x="106.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="30" stroke="#9EA5B4" fill="#000000"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/checkbox_unchecked_disabled.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <rect id="svg_6" fill-opacity="0" height="299" width="299" y="106.5" x="106.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="30" stroke="#4D5765" fill="#000000"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/close.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#9EA5B4" d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4
+	L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1
+	c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1
+	c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"/>
+</svg>

src/data/extra/themes/solarized-light/close_grey.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#636D81" d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4
+	L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1
+	c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1
+	c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"/>
+</svg>

src/data/extra/themes/solarized-light/down.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="null" id="svg_1">
+   <polygon points="128,192 256,320 384,192  " id="svg_2" fill="#9EA5B4"/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/down_disabled.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="null" id="svg_1">
+   <polygon points="128,192 256,320 384,192  " id="svg_2" fill="#4D5765"/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/float.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1609212036301" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2311" width="512" height="512" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M37.415385 689.230769V177.230769c0-76.8 61.046154-137.846154 137.846153-137.846154h512c76.8 0 137.846154 61.046154 137.846154 137.846154v59.076923h-118.153846V177.230769c0-11.815385-7.876923-19.692308-19.692308-19.692307h-512c-11.815385 0-19.692308 7.876923-19.692307 19.692307v512c0 11.815385 7.876923 19.692308 19.692307 19.692308h59.076924v118.153846h-59.076924c-76.8 0-137.846154-61.046154-137.846153-137.846154z m866.461538-374.153846h-512c-43.323077 0-78.769231 35.446154-78.769231 78.769231v512c0 43.323077 35.446154 78.769231 78.769231 78.769231h512c43.323077 0 78.769231-35.446154 78.769231-78.769231V393.846154c0-43.323077-35.446154-78.769231-78.769231-78.769231z m-78.769231 496.246154c0 9.846154-5.907692 15.753846-17.723077 15.753846H578.953846c-9.846154 0-19.692308-9.846154-19.692308-17.723077v-35.446154c0-9.846154 9.846154-19.692308 19.692308-19.692307h94.523077c11.815385 0 15.753846-11.815385 9.846154-19.692308L478.523077 529.723077c-7.876923-5.907692-7.876923-17.723077 0-25.6l25.6-23.630769c5.907692-7.876923 17.723077-7.876923 23.630769 0l204.8 204.8c7.876923 7.876923 19.692308 1.969231 19.692308-9.846154v-94.523077c0-11.815385 11.815385-19.692308 21.661538-19.692308h35.446154c9.846154 0 15.753846 9.846154 15.753846 19.692308v230.4z" p-id="2312" fill="#9EA5B4"></path></svg>

src/data/extra/themes/solarized-light/highlight.css

@@ -0,0 +1,260 @@
+/* PrismJS 1.25.0
+https://prismjs.com/download.html#themes=prism-solarizedlight&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+agda+al+antlr4+apacheconf+apex+apl+applescript+aql+arduino+arff+asciidoc+aspnet+asm6502+autohotkey+autoit+bash+basic+batch+bbcode+birb+bison+bnf+brainfuck+brightscript+bro+bsl+c+csharp+cpp+cil+clojure+cmake+coffeescript+concurnas+csp+crystal+css-extras+cypher+d+dart+dataweave+dax+dhall+diff+django+dns-zone-file+docker+ebnf+editorconfig+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+firestore-security-rules+flow+fortran+ftl+gml+gcode+gdscript+gedcom+gherkin+git+glsl+go+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+http+hpkp+hsts+ichigojam+icon+ignore+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jolie+jq+jsdoc+js-extras+json+json5+jsonp+jsstacktrace+js-templates+julia+keyman+kotlin+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+lolcode+lua+makefile+markdown+markup-templating+matlab+mel+mizar+mongodb+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+naniscript+nasm+neon+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+pascaligo+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plsql+powerquery+powershell+processing+prolog+promql+properties+protobuf+pug+puppet+pure+purebasic+purescript+python+q+qml+qore+r+racket+jsx+tsx+reason+regex+renpy+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smali+smalltalk+smarty+sml+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+stan+iecst+stylus+swift+t4-templating+t4-cs+t4-vb+tap+tcl+tt2+textile+toml+turtle+twig+typescript+typoscript+unrealscript+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+wiki+xeora+xml-doc+xojo+xquery+yaml+yang+zig&plugins=line-numbers+toolbar+copy-to-clipboard+filter-highlight-all */
+/*
+ Solarized Color Schemes originally by Ethan Schoonover
+ http://ethanschoonover.com/solarized
+
+ Ported for PrismJS by Hector Matos
+ Website: https://krakendev.io
+ Twitter Handle: https://twitter.com/allonsykraken)
+*/
+
+/*
+SOLARIZED HEX
+--------- -------
+base03    #002b36
+base02    #073642
+base01    #586e75
+base00    #657b83
+base0     #839496
+base1     #93a1a1
+base2     #eee8d5
+base3     #fdf6e3
+yellow    #b58900
+orange    #cb4b16
+red       #dc322f
+magenta   #d33682
+violet    #6c71c4
+blue      #268bd2
+cyan      #2aa198
+green     #859900
+*/
+
+code[class*="language-"],
+pre[class*="language-"] {
+    color: #657b83; /* base00 */
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+
+    line-height: 1.5;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+    background: #073642; /* base02 */
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+    background: #073642; /* base02 */
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+    border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+    background-color: #fdf6e3; /* base3 */
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+    padding: .1em;
+    border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: #93a1a1; /* base1 */
+}
+
+.token.punctuation {
+    color: #586e75; /* base01 */
+}
+
+.token.namespace {
+    opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+    color: #268bd2; /* blue */
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.url,
+.token.inserted {
+    color: #2aa198; /* cyan */
+}
+
+.token.entity {
+    color: #657b83; /* base00 */
+    background: #eee8d5; /* base2 */
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+    color: #859900; /* green */
+}
+
+.token.function,
+.token.class-name {
+    color: #b58900; /* yellow */
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+    color: #cb4b16; /* orange */
+}
+
+.token.important,
+.token.bold {
+    font-weight: bold;
+}
+.token.italic {
+    font-style: italic;
+}
+
+.token.entity {
+    cursor: help;
+}
+
+pre[class*="language-"].line-numbers {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+    position: relative;
+    white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    font-size: 100%;
+    left: -3.8em;
+    width: 3em; /* works for line-numbers below 1000 lines */
+    letter-spacing: -1px;
+    border-right: 1px solid #999;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+}
+
+    .line-numbers-rows > span {
+        display: block;
+        counter-increment: linenumber;
+    }
+
+        .line-numbers-rows > span:before {
+            content: counter(linenumber);
+            color: #999;
+            display: block;
+            padding-right: 0.8em;
+            text-align: right;
+        }
+
+div.code-toolbar {
+    position: relative;
+}
+
+div.code-toolbar > .toolbar {
+    position: absolute;
+    z-index: 10;
+    top: .3em;
+    right: .2em;
+    transition: opacity 0.3s ease-in-out;
+    opacity: 0;
+}
+
+div.code-toolbar:hover > .toolbar {
+    opacity: 1;
+}
+
+/* Separate line b/c rules are thrown out if selector is invalid.
+   IE11 and old Edge versions don't support :focus-within. */
+div.code-toolbar:focus-within > .toolbar {
+    opacity: 1;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item {
+    display: inline-block;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > a {
+    cursor: pointer;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > button {
+    background: none;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    line-height: normal;
+    overflow: visible;
+    padding: 0;
+    -webkit-user-select: none; /* for button */
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > a,
+div.code-toolbar > .toolbar > .toolbar-item > button,
+div.code-toolbar > .toolbar > .toolbar-item > span {
+    color: #bbb;
+    font-size: .8em;
+    padding: 0 .5em;
+    background: #f5f2f0;
+    background: rgba(224, 224, 224, 0.2);
+    box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
+    border-radius: .5em;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > a:hover,
+div.code-toolbar > .toolbar > .toolbar-item > a:focus,
+div.code-toolbar > .toolbar > .toolbar-item > button:hover,
+div.code-toolbar > .toolbar > .toolbar-item > button:focus,
+div.code-toolbar > .toolbar > .toolbar-item > span:hover,
+div.code-toolbar > .toolbar > .toolbar-item > span:focus {
+    color: inherit;
+    text-decoration: none;
+}
+

src/data/extra/themes/solarized-light/interface.qss

@@ -0,0 +1,1177 @@
+/* Qt Style Sheets file
+ * Please refer to https://doc.qt.io/qt-5.12/stylesheet-reference.html
+ * for detailed inforamtion.
+ * **Notice** that selectors using base class and child class are considered to have the
+ * same specificity and the rule that appears last takes precedence.
+ * VNote specific syntax:
+ *  - @widgets#toolbox#title#border: reference to a color defined in palette.ini;
+ *  - $2px: 2 will be scaled by multiplying current display scaled factor.
+ */
+
+QWidget {
+    color: @widgets#qwidget#fg;
+    background-color: @widgets#qwidget#bg;
+    font-family: "冬青黑体", "YaHei Consolas Hybrid", "Microsoft YaHei", "微软雅黑", "Microsoft YaHei UI", "WenQuanYi Micro Hei", "文泉驿雅黑", "Dengxian", "等线体", "STXihei", "华文细黑", "Liberation Sans", "Droid Sans", "NSimSun", "新宋体", "SimSun", "宋体", "Helvetica", "sans-serif", "Tahoma", "Arial", "Verdana", "Geneva", "Georgia", "Times New Roman";
+    text-color: #657B83;
+}
+
+QWidget[DialogCentralWidget="true"] {
+    border: none;
+}
+
+/* All widgets */
+*[State="info"] {
+    border: 1px solid @widgets#qwidget#info#border;
+}
+
+*[State="warning"] {
+    border: 1px solid @widgets#qwidget#warning#border;
+}
+
+*[State="error"] {
+    border: 1px solid @widgets#qwidget#error#border;
+}
+
+/* QAbstractScrollArea */
+QAbstractScrollArea {
+    border: 1px solid @widgets#qabstractscrollarea#border;
+}
+
+QAbstractScrollArea::corner {
+    background-color: @widgets#qabstractscrollarea#corner#bg;
+    border: none;
+}
+
+vnotex--SearchPanel QAbstractScrollArea {
+    border: none;
+}
+
+/* ToolBox */
+vnotex--ToolBox QWidget[ToolBoxTitle="true"] {
+    border-bottom: 2px solid @widgets#toolbox#title#border;
+    margin: 0px;
+    padding: 0px;
+}
+
+vnotex--ToolBox QToolButton[ToolBoxTitleButton="true"] {
+    padding: 4px 10px 4px 4px;
+    margin: 0px;
+    border: none;
+}
+
+vnotex--ToolBox QToolButton[ToolBoxTitleButton="true"]:checked {
+    font-weight: bold;
+    /* Reverse */
+    color: @widgets#toolbox#title#button#active#fg;
+    background-color: @widgets#toolbox#title#button#active#bg;
+}
+
+/* TitleBar */
+/* The height should be large enough regarding to the action buttons. */
+vnotex--TitleBar QLabel[TitleBarTitle="true"] {
+    padding: 5px 1px;
+    margin: 0px;
+}
+
+/* QDockWidget */
+QDockWidget {
+    color: @widgets#qdockwidget#fg;
+    background-color: @widgets#qdockwidget#bg;
+    titlebar-close-icon: url(close.svg);
+    titlebar-normal-icon: url(float.svg);
+}
+
+QDockWidget::Title {
+    background-color: @widgets#qdockwidget#title#bg;
+    text-align: center left;
+}
+
+QDockWidget::close-button, QDockWidget::float-button {
+    border: none;
+    icon-size: 16px;
+    width: 16px;
+}
+
+QDockWidget::close-button:hover, QDockWidget::float-button:hover {
+    background-color: @widgets#qdockwidget#title#button#hover#bg;
+}
+
+QDockWidget::close-button {
+    subcontrol-position: top right;
+    subcontrol-origin: margin;
+    position: absolute;
+    top: 0px; right: 0px; bottom: 0px;
+}
+
+QDockWidget::float-button {
+    subcontrol-position: top right;
+    subcontrol-origin: margin;
+    position: absolute;
+    top: 0px; right: 18px; bottom: 0px;
+}
+
+/* NotebookSelector */
+vnotex--NotebookSelector {
+    icon-size: 20px;
+}
+
+vnotex--NotebookSelector QAbstractItemView::item {
+    padding: 5px, 2px, 5px, 2px;
+}
+
+QToolTip
+{
+    border: none;
+    color: @widgets#qtooltip#fg;
+    background-color: @widgets#qtooltip#bg;
+}
+
+/* QMainWindow */
+QMainWindow {
+    color: @widgets#qmainwindow#fg;
+    background-color: @widgets#qmainwindow#bg;
+}
+
+QMainWindow::separator {
+    /* For vertical */
+    width: 1px;
+    /* For horizontal */
+    height: 1px;
+    background-color: @widgets#qmainwindow#separator#bg;
+}
+
+/* QToolBar */
+QToolBar {
+    border: none;
+    background-color: @widgets#qtoolbar#bg;
+}
+
+QToolBar::separator {
+    width: 1px;
+    height: 1px;
+    border: none;
+    background-color: @widgets#qtoolbar#separator#bg;
+}
+
+QToolBarExtension#qt_toolbar_ext_button {
+    background-color: @widgets#qtoolbar#extension#bg;
+    margin: 30px;
+}
+
+QToolBarExtension#qt_toolbar_ext_button:hover {
+    background-color: @widgets#qtoolbar#extension#hover#bg;
+    margin: 30px;
+}
+
+/* QToolButton */
+/* Only for MenuButtonPopup */
+QToolButton[popupMode="1"] {
+    /* Make way for the popup button */
+    padding-right: 16px; /* make way for the popup button */
+}
+
+/* Must put after popupMode related styles */
+QToolButton[ActionToolButton="true"] {
+    border: none;
+}
+
+QToolButton[ActionToolButton="true"]::menu-indicator {
+    image: none;
+}
+
+QToolButton[NoMenuIndicator="true"]::menu-indicator {
+    image: none;
+}
+
+/* QPushButton, QToolButton */
+QToolButton {
+    border: none;
+    color: @widgets#qtoolbutton#fg;
+    background-color: @widgets#qtoolbutton#bg;
+    margin: 1px 3px 1px 3px;
+    padding: 0px;
+}
+
+QToolButton:checked {
+    color: @widgets#qtoolbutton#checked#fg;
+    background-color: @widgets#qtoolbutton#checked#bg;
+}
+
+QToolButton:hover {
+    border:none;
+    color: @widgets#qtoolbutton#hover#fg;
+    background-color: @widgets#qtoolbutton#hover#bg;
+}
+
+QToolButton:pressed {
+    color: @widgets#qtoolbutton#pressed#fg;
+    background-color: @widgets#qtoolbutton#pressed#bg;
+}
+
+/* the subcontrols below are used only in the MenuButtonPopup mode */
+QToolButton::menu-button {
+    border: none;
+    width: 16px;
+}
+
+QToolButton::menu-arrow {
+    image: url(arrow_dropdown.svg);
+    width: 16px;
+    height: 16px;
+}
+
+QPushButton[DangerButton="true"]:hover, QToolButton[DangerButton="true"]:hover {
+    color: @widgets#qwidget#danger#fg;
+    background-color: @widgets#qwidget#danger#bg;
+    border: none;
+}
+
+/* QPushButton */
+QPushButton {
+    color: @widgets#qpushbutton#fg;
+    background-color: @widgets#qpushbutton#bg;
+    border: 1px solid @widgets#qpushbutton#border;
+    padding: 3px;
+    min-width: 80px;
+}
+
+QPushButton:default {
+    border: 1px solid @widgets#qpushbutton#default#border;
+}
+
+QPushButton:focus {
+    color: @widgets#qpushbutton#focus#fg;
+    background-color: @widgets#qpushbutton#focus#bg;
+}
+
+QPushButton:checked {
+    color: @widgets#qpushbutton#checked#fg;
+    background-color: @widgets#qpushbutton#checked#bg;
+}
+
+QPushButton:flat {
+    border: none;
+}
+
+QPushButton:hover {
+    color: @widgets#qpushbutton#hover#fg;
+    background-color: @widgets#qpushbutton#hover#bg;
+}
+
+QPushButton:pressed {
+    color: @widgets#qpushbutton#pressed#fg;
+    background-color: @widgets#qpushbutton#pressed#bg;
+}
+
+QPushButton:disabled {
+    color: @widgets#qpushbutton#disabled#fg;
+    background-color: @widgets#qpushbutton#disabled#bg;
+}
+
+QPushButton::menu-indicator {
+    image: url(arrow_dropdown.svg);
+    width: 16px;
+    height: 16px;
+}
+
+/* QMenu */
+QMenu {
+    color: @widgets#qmenu#fg;
+    background-color: @widgets#qmenu#bg;
+    border: 2px solid @widgets#qmenu#border;
+}
+
+QMenu::icon {
+    margin: 5px;
+}
+
+QMenu::item {
+    padding: 5px 30px 5px 30px;
+    border: 1px solid transparent;
+}
+
+QMenu::item:selected {
+    color: @widgets#qmenu#item#selected#fg;
+    background-color: @widgets#qmenu#item#selected#bg;
+}
+
+QMenu::item:disabled {
+    color: @widgets#qmenu#item#disabled#fg;
+}
+
+QMenu::icon:checked { /* appearance of a 'checked' icon */
+    border: 2px solid @widgets#qmenu#fg;
+}
+
+QMenu::separator {
+    height: 1px;
+    background-color: @widgets#qmenu#separator#bg;
+    margin-left: 10px;
+    margin-right: 5px;
+}
+
+QMenu::indicator {
+    width: 20px;
+    height: 20px;
+}
+
+QMenu::indicator:non-exclusive:unchecked {
+    image: none;
+}
+
+QMenu::indicator:non-exclusive:checked {
+    image: url(menu_checkbox.svg);
+}
+
+QMenu::indicator:exclusive:unchecked {
+    image: none;
+}
+
+QMenu::indicator:exclusive:checked {
+    image: url(menu_radiobutton.svg);
+}
+
+/* QWidgetAction item */
+vnotex--LabelWithButtonsWidget {
+    background-color: @widgets#qmenu#bg;
+}
+
+vnotex--LabelWithButtonsWidget:hover {
+    background-color: @widgets#qmenu#item#selected#bg;
+}
+
+vnotex--LabelWithButtonsWidget QLabel {
+    color: @widgets#qmenu#fg;
+}
+
+vnotex--LabelWithButtonsWidget QLabel:hover {
+    color: @widgets#qmenu#item#selected#fg;
+}
+/* End QMenu */
+
+QDialog {
+    color: @widgets#qdialog#fg;
+    background-color: @widgets#qdialog#bg
+}
+
+/* DrapDropAreaIndicator */
+vnotex--DragDropAreaIndicator {
+    border: 2px dashed @widgets#dragdropareaindicator#border;
+    margin: 2px;
+    max-height: 200px;
+}
+
+/* QComboBox */
+QComboBox {
+    padding: 3px;
+    color: @widgets#qcombobox#fg;
+    background-color: @widgets#qcombobox#bg;
+    border: 1px solid @widgets#qcombobox#border;
+}
+
+QComboBox:focus, QComboBox:on {
+    background-color: @widgets#qcombobox#focus#bg;
+    border: 2px solid @widgets#qcombobox#focus#border;
+}
+
+QComboBox:hover {
+    background-color: @widgets#qcombobox#hover#bg;
+    border: 2px solid @widgets#qcombobox#hover#border;
+}
+
+QComboBox:disabled {
+    color: @widgets#qcombobox#disabled#fg;
+}
+
+QComboBox::drop-down {
+    subcontrol-origin: padding;
+    subcontrol-position: top right;
+    width: 20px;
+    border: none;
+    background-color: transparent;
+}
+
+QComboBox::down-arrow {
+    image: url(arrow_dropdown.svg);
+    width: 20px;
+    height: 20px;
+}
+
+QComboBox::down-arrow:disabled {
+    image: url(arrow_dropdown_disabled.svg);
+    width: 20px;
+    height: 20px;
+}
+
+QComboBox QAbstractItemView {
+    padding: 2px;
+    border: 1px solid @widgets#qcombobox#view#border;
+    background-color: @widgets#qcombobox#view#bg;
+    selection-color: @widgets#qcombobox#view#selection#fg;
+    selection-background-color: @widgets#qcombobox#view#selection#bg;
+}
+
+QComboBox QAbstractItemView::item {
+    background-color: transparent;
+    padding: 3px;
+}
+
+QComboBox QAbstractItemView::item:hover {
+    color: @widgets#qcombobox#item#hover#fg;
+    background-color: @widgets#qcombobox#item#hover#bg;
+}
+
+/* QLabel */
+QLabel {
+    border: none;
+    color: @widgets#qlabel#fg;
+    background-color: transparent;
+}
+
+vnotex--DragDropAreaIndicator QLabel {
+    color: @widgets#dragdropareaindicator#fg;
+    font-size: 12pt;
+    font-weight: bold;
+}
+
+vnotex--MainWindow QLabel#MainWindowTipsLabel {
+    font-size: 20pt;
+    font-weight: bold;
+    color: @widgets#mainwindow#tips_label#fg;
+    background-color: @widgets#mainwindow#tips_label#bg;
+}
+
+/* QLineEdit */
+QLineEdit[EmbeddedLineEdit="true"] {
+    border: none;
+    padding: 0px;
+    margin: 0px;
+    color: @widgets#qlineedit#fg;
+    background-color: transparent;
+}
+
+QLineEdit[EmbeddedLineEdit="true"]:focus {
+    border: none;
+    background-color: @widgets#qlineedit#focus#bg;
+}
+
+QLineEdit[EmbeddedLineEdit="true"]:hover {
+    border: none;
+    background-color: @widgets#qlineedit#hover#bg;
+}
+
+QLineEdit {
+    border: 1px solid @widgets#qlineedit#border;
+    padding: 3px;
+    color: @widgets#qlineedit#fg;
+    background-color: @widgets#qlineedit#bg;
+    selection-color: @widgets#qlineedit#selection#fg;
+    selection-background-color: @widgets#qlineedit#selection#bg;
+}
+
+QLineEdit:focus {
+    border: 2px solid @widgets#qlineedit#focus#border;
+    background-color: @widgets#qlineedit#focus#bg;
+}
+
+QLineEdit:hover {
+    border: 2px solid @widgets#qlineedit#hover#border;
+    background-color: @widgets#qlineedit#hover#bg;
+}
+
+QLineEdit:disabled {
+    color: @widgets#qlineedit#disabled#fg;
+}
+
+/* QPlainTextEdit and QTextEdit */
+QPlainTextEdit, QTextEdit {
+    color: @widgets#qlineedit#fg;
+    background-color: @widgets#qlineedit#bg;
+    selection-color: @widgets#qlineedit#selection#fg;
+    selection-background-color: @widgets#qlineedit#selection#bg;
+}
+
+/* QTabWidget */
+QTabWidget {
+    border: none;
+}
+
+QTabWidget::pane {
+    border: none;
+}
+
+QTabWidget::tab-bar {
+    alignment: left;
+}
+
+/* QTabBar */
+QTabBar {
+    border: none;
+}
+
+QTabBar::tab {
+    color: @widgets#qtabbar#tab#fg;
+    background-color: @widgets#qtabbar#tab#bg;
+    border: none;
+}
+
+QTabBar::tab:top, QTabBar::tab:bottom {
+    border-top: 2px solid transparent;
+    border-right: 1px solid @widgets#qtabbar#tab#border;
+    /* MUST leave right and left padding 0px. */
+    padding: 2px 0px 2px 0px;
+    height: 20px;
+}
+
+QTabBar::tab:right {
+    border-right: 3px solid transparent;
+    border-bottom: 1px solid @widgets#qtabbar#tab#border;
+    padding: 5px 2px 5px 2px;
+    min-width: 20px;
+}
+
+QTabBar::tab:left {
+    border-left: 3px solid transparent;
+    border-bottom: 1px solid @widgets#qtabbar#tab#border;
+    padding: 5px 2px 5px 2px;
+    min-width: 20px;
+}
+
+/* Tabified QDockWidget */
+QMainWindow > QTabBar::tab:right {
+    border-right: 3px solid transparent;
+    border-bottom: none;
+    margin: 0px;
+    padding: 6px 2px -10px 2px;
+}
+
+/* Tabified QDockWidget */
+QMainWindow > QTabBar::tab:left {
+    border-left: 3px solid transparent;
+    border-bottom: none;
+    margin: 0px;
+    padding: -10px 2px 6px 2px;
+}
+
+QTabBar::tab:hover {
+    color: @widgets#qtabbar#tab#hover#fg;
+    background-color: @widgets#qtabbar#tab#hover#bg;
+}
+
+QTabBar::tab:selected {
+    color: @widgets#qtabbar#tab#selected#fg;
+    background-color: @widgets#qtabbar#tab#selected#bg;
+}
+
+QTabBar::tab:top:selected, QTabBar::tab:bottom:selected {
+    border-top: 2px solid @widgets#qtabbar#tab#selected#border;
+}
+
+QTabBar::tab:right:selected {
+    border-right: 3px solid @widgets#qtabbar#tab#selected#border;
+}
+
+QTabBar::tab:left:selected {
+    border-left: 3px solid @widgets#qtabbar#tab#selected#border;
+}
+
+QTabBar::close-button {
+    image: url(close_grey.svg);
+}
+
+QTabBar::close-button:focus {
+    image: url(close.svg);
+}
+
+QTabBar::close-button:hover {
+    image: url(close.svg);
+}
+
+QTabBar::scroller {
+    width: $20px;
+}
+
+QTabBar QToolButton {
+    border: none;
+}
+
+QTabBar QToolButton::right-arrow:enabled {
+    image: url(right.svg);
+}
+
+QTabBar QToolButton::left-arrow:enabled {
+    image: url(left.svg);
+}
+
+QTabBar QToolButton::right-arrow:disabled {
+    image: url(right_disabled.svg);
+}
+
+QTabBar QToolButton::left-arrow:disabled {
+    image: url(left_disabled.svg);
+}
+
+/* QTreeView */
+QTreeView {
+    color: @widgets#qtreeview#fg;
+    background-color: @widgets#qtreeview#bg;
+    show-decoration-selected: 0;
+    border: none;
+    selection-background-color: transparent;
+    outline: none;
+}
+
+QTreeView::item {
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+QTreeView::item:hover {
+    color: @widgets#qtreeview#item#hover#fg;
+    background-color: @widgets#qtreeview#item#hover#bg;
+}
+
+QTreeView::item:selected {
+    color: @widgets#qtreeview#item#selected#fg;
+    background-color: @widgets#qtreeview#item#selected#bg;
+}
+
+QTreeView::item:selected:active {
+    color: @widgets#qtreeview#item#selected#active#fg;
+    background-color: @widgets#qtreeview#item#selected#active#bg;
+}
+
+QTreeView::item:selected:!active {
+    color: @widgets#qtreeview#item#selected#inactive#fg;
+    background-color: @widgets#qtreeview#item#selected#inactive#bg;
+}
+
+QTreeView::branch:has-siblings:!adjoins-item {
+    border-image: none;
+}
+
+QTreeView::branch:has-siblings:adjoins-item {
+    border-image: none;
+}
+
+QTreeView::branch:!has-children:!has-siblings:adjoins-item {
+    border-image: none;
+}
+
+QTreeView::branch:has-children:!has-siblings:closed,
+QTreeView::branch:closed:has-children:has-siblings {
+    border-image: none;
+    image: url(branch_closed.svg);
+}
+
+QTreeView::branch:open:has-children:!has-siblings,
+QTreeView::branch:open:has-children:has-siblings  {
+    border-image: none;
+    image: url(branch_open.svg);
+}
+
+/* QListView */
+QListView {
+    color: @widgets#qlistview#fg;
+    background-color: @widgets#qlistview#bg;
+    show-decoration-selected: 0;
+    border: none;
+    selection-background-color: transparent;
+    outline: none;
+}
+
+QListView::item {
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+QListView::item:hover {
+    color: @widgets#qlistview#item#hover#fg;
+    background-color: @widgets#qlistview#item#hover#bg;
+}
+
+QListView::item:selected {
+    color: @widgets#qlistview#item#selected#fg;
+    background-color: @widgets#qlistview#item#selected#bg;
+}
+
+QListView::item:selected:active {
+    color: @widgets#qlistview#item#selected#active#fg;
+    background-color: @widgets#qlistview#item#selected#active#bg;
+}
+
+QListView::item:selected:!active {
+    color: @widgets#qlistview#item#selected#inactive#fg;
+    background-color: @widgets#qlistview#item#selected#inactive#bg;
+}
+
+QListView::item:disabled {
+    background-color: transparent;
+}
+
+/* QSplitter */
+QSplitter {
+    border: none;
+}
+
+QSplitter::handle {
+    background-color: @widgets#qsplitter#handle#bg;
+}
+
+QSplitter::handle:pressed {
+    background-color: @widgets#qsplitter#handle#pressed#bg;
+}
+
+QSplitter::handle:vertical {
+    height: 2px;
+}
+
+QSplitter::handle:horizontal {
+    width: 2px;
+}
+
+/* QStatusBar */
+QStatusBar {
+    color: @widgets#qstatusbar#fg;
+    background-color: @widgets#qstatusbar#bg;
+    border: none;
+}
+
+QStatusBar::item {
+    border: none;
+}
+
+/* QScrollBar */
+QScrollBar::add-page, QScrollBar::sub-page {
+    background-color: @widgets#qscrollbar#addpage#bg;
+}
+
+QScrollBar:vertical {
+    background-color: @widgets#qscrollbar#bg;
+    width: 16px;
+    margin: 16px 0px 16px 0px;
+    padding: 0px 2px 0px 2px;
+    border: none;
+}
+
+QScrollBar::handle:vertical {
+    background-color: @widgets#qscrollbar#handle#bg;
+    min-height: 16px;
+}
+
+QScrollBar::handle:vertical:hover {
+    background-color: @widgets#qscrollbar#handle#hover#bg;
+}
+
+QScrollBar::handle:vertical:pressed {
+    background-color: @widgets#qscrollbar#handle#pressed#bg;
+}
+
+QScrollBar::add-line:vertical {
+    border: none;
+    background-color: @widgets#qscrollbar#bg;
+    width: 16px;
+    height: 16px;
+    subcontrol-position: bottom;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::add-line:vertical:hover {
+    background-color: @widgets#qscrollbar#handle#hover#bg;
+}
+
+QScrollBar::add-line:vertical:pressed {
+    background-color: @widgets#qscrollbar#handle#pressed#bg;
+}
+
+QScrollBar::sub-line:vertical {
+    border: none;
+    background-color: @widgets#qscrollbar#bg;
+    width: 16px;
+    height: 16px;
+    subcontrol-position: top;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::sub-line:vertical:hover {
+    background-color: @widgets#qscrollbar#handle#hover#bg;
+}
+
+QScrollBar::sub-line:vertical:pressed {
+    background-color: @widgets#qscrollbar#handle#pressed#bg;
+}
+
+QScrollBar::down-arrow:vertical {
+    image: url(down.svg);
+    width: 16px;
+    height: 16px;
+}
+
+QScrollBar::up-arrow:vertical {
+    image: url(up.svg);
+    width: 16px;
+    height: 16px;
+}
+
+QScrollBar:horizontal {
+    background-color: @widgets#qscrollbar#bg;
+    height: 16px;
+    margin: 0px 16px 0px 16px;
+    padding: 2px 0px 2px 0px;
+    border: none;
+}
+
+QScrollBar::handle:horizontal {
+    background-color: @widgets#qscrollbar#handle#bg;
+    min-width: 16px;
+}
+
+QScrollBar::handle:horizontal:hover {
+    background-color: @widgets#qscrollbar#handle#hover#bg;
+}
+
+QScrollBar::handle:horizontal:pressed {
+    background-color: @widgets#qscrollbar#handle#pressed#bg;
+}
+
+QScrollBar::add-line:horizontal {
+    border: none;
+    background-color: @widgets#qscrollbar#bg;
+    width: 16px;
+    height: 16px;
+    subcontrol-position: right;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::add-line:horizontal:hover {
+    background-color: @widgets#qscrollbar#handle#hover#bg;
+}
+
+QScrollBar::add-line:horizontal:pressed {
+    background-color: @widgets#qscrollbar#handle#pressed#bg;
+}
+
+QScrollBar::sub-line:horizontal {
+    border: none;
+    background-color: @widgets#qscrollbar#bg;
+    width: 16px;
+    height: 16px;
+    subcontrol-position: left;
+    subcontrol-origin: margin;
+}
+
+QScrollBar::sub-line:horizontal:hover {
+    background-color: @widgets#qscrollbar#handle#hover#bg;
+}
+
+QScrollBar::sub-line:horizontal:pressed {
+    background-color: @widgets#qscrollbar#handle#pressed#bg;
+}
+
+QScrollBar::right-arrow:horizontal {
+    image: url(right.svg);
+    width: 16px;
+    height: 16px;
+}
+
+QScrollBar::left-arrow:horizontal {
+    image: url(left.svg);
+    width: 16px;
+    height: 16px;
+}
+
+/* QCheckBox */
+QCheckBox {
+    spacing: 5px;
+}
+
+QCheckBox:disabled {
+    color: @widgets#qcheckbox#disabled#fg;
+}
+
+QCheckBox::indicator:unchecked {
+    image: url(checkbox_unchecked.svg);
+}
+
+QCheckBox::indicator:unchecked:disabled {
+    image: url(checkbox_unchecked_disabled.svg);
+}
+
+QCheckBox::indicator:checked {
+    image: url(checkbox_checked.svg);
+}
+
+QCheckBox::indicator:checked:disabled {
+    image: url(checkbox_checked_disabled.svg);
+}
+
+QCheckBox::indicator {
+    width: 20px;
+    height: 20px;
+}
+
+QCheckBox::indicator:focus {
+    background-color: @widgets#qcheckbox#indicator#focus#bg;
+}
+
+QCheckBox::indicator:hover {
+    background-color: @widgets#qcheckbox#indicator#hover#bg;
+}
+
+QCheckBox::indicator:pressed {
+    background-color: @widgets#qcheckbox#indicator#pressed#bg;
+}
+
+/* QRadioButton */
+QRadioButton {
+    spacing: 5px;
+}
+
+QRadioButton:disabled {
+    color: @widgets#qradiobutton#disabled#fg;
+}
+
+QRadioButton::indicator:unchecked {
+    image: url(radiobutton_unchecked.svg);
+}
+
+QRadioButton::indicator:unchecked:disabled {
+    image: url(radiobutton_unchecked_disabled.svg);
+}
+
+QRadioButton::indicator:checked {
+    image: url(radiobutton_checked.svg);
+}
+
+QRadioButton::indicator:checked:disabled {
+    image: url(radiobutton_checked_disabled.svg);
+}
+
+QRadioButton::indicator {
+    width: 20px;
+    height: 20px;
+}
+
+QRadioButton::indicator:focus {
+    background-color: @widgets#qradiobutton#indicator#focus#bg;
+}
+
+QRadioButton::indicator:hover {
+    background-color: @widgets#qradiobutton#indicator#hover#bg;
+}
+
+QRadioButton::indicator:pressed {
+    background-color: @widgets#qradiobutton#indicator#pressed#bg;
+}
+
+QAbstractSpinBox {
+    border: 1px solid @widgets#qspinbox#border;
+    color: @widgets#qspinbox#fg;
+    background-color: @widgets#qspinbox#bg;
+    padding-right: 25px;
+    min-height: 25px;
+    selection-color: @widgets#qspinbox#selection#fg;
+    selection-background-color: @widgets#qspinbox#selection#bg;
+}
+
+QAbstractSpinBox:disabled {
+    color: @widgets#qspinbox#disabled#fg;
+    background-color: @widgets#qspinbox#disabled#bg;
+}
+
+QAbstractSpinBox:focus {
+    border: 2px solid @widgets#qspinbox#focus#border;
+    background-color: @widgets#qspinbox#focus#bg;
+}
+
+QAbstractSpinBox:hover {
+    border: 2px solid @widgets#qspinbox#hover#border;
+    background-color: @widgets#qspinbox#hover#bg;
+}
+
+QAbstractSpinBox::up-button {
+    subcontrol-origin: border;
+    /* Position at the top right corner */
+    subcontrol-position: top right;
+    width: 25px;
+    border: none;
+    background-color: transparent;
+}
+
+QAbstractSpinBox::up-button:hover {
+    background-color: @widgets#qspinbox#button#hover#bg;
+}
+
+QAbstractSpinBox::up-button:pressed {
+    background-color: @widgets#qspinbox#button#pressed#bg;
+}
+
+QAbstractSpinBox::up-arrow {
+    image: url(up.svg);
+    width: 12px;
+    height: 12px;
+}
+
+QAbstractSpinBox::up-arrow:disabled, QAbstractSpinBox::up-arrow:off {
+    image: url(up_disabled.svg);
+}
+
+QAbstractSpinBox::down-button {
+    subcontrol-origin: border;
+    /* Position at the top right corner */
+    subcontrol-position: bottom right;
+    width: 25px;
+    border: none;
+    background-color: transparent;
+}
+
+QAbstractSpinBox::down-button:hover {
+    background-color: @widgets#qspinbox#button#hover#bg;
+}
+
+QAbstractSpinBox::down-button:pressed {
+    background-color: @widgets#qspinbox#button#pressed#bg;
+}
+
+QAbstractSpinBox::down-arrow {
+    image: url(down.svg);
+    width: 12px;
+    height: 12px;
+}
+
+QAbstractSpinBox::down-arrow:disabled, QAbstractSpinBox::down-arrow:off {
+    image: url(down_disabled.svg);
+}
+
+/* QHeaderView */
+QHeaderView::section {
+    color: @widgets#qheaderview#section#fg;
+    background-color: @widgets#qheaderview#section#bg;
+    padding-left: 4px;
+    border: none;
+    border-left: 1px solid @widgets#qheaderview#section#border;
+    border-bottom: 1px solid @widgets#qheaderview#section#border;
+}
+
+QHeaderView::section:checked
+{
+    color: @widgets#qheaderview#section#checked#fg;
+    background-color: @widgets#qheaderview#section#checked#bg;
+}
+
+/* style the sort indicator */
+QHeaderView::down-arrow {
+    image: url(down.svg);
+    width: 12px;
+    height: 12px;
+}
+
+QHeaderView::up-arrow {
+    image: url(up.svg);
+    width: 12px;
+    height: 12px;
+}
+
+/* QProgressBar */
+QProgressBar {
+    background-color: @widgets#qprogressbar#bg;
+    border: 1px solid @widgets#qprogressbar#border;
+    text-align: center;
+}
+
+QProgressBar::chunk {
+    background-color: @widgets#qprogressbar#chunk#bg;
+    width: 20px;
+}
+
+/* QGroupBox */
+QGroupBox {
+    border: 2px solid @widgets#qgroupbox#border;
+    border-radius: 5px;
+    margin-top: 2ex;
+}
+
+QGroupBox::title {
+    color: @widgets#qgroupbox#title#fg;
+    subcontrol-origin: margin;
+    subcontrol-position: top left;
+    position: absolute;
+    padding: 0 3px;
+    top: 0px;
+    left: 10px;
+    bottom: 0px;
+}
+
+/* QSlider */
+QSlider::groove:horizontal {
+    border: 1px solid @widgets#qslider#groove#border;
+    height: 8px;
+    background-color: @widgets#qslider#groove#bg;
+    margin: 2px 0;
+}
+
+QSlider::handle:horizontal {
+    border: 1px solid @widgets#qslider#handle#border;
+    background-color: @widgets#qslider#handle#bg;
+    width: 18px;
+    margin: -2px 0;
+}
+
+QSlider::add-page:horizontal {
+    background-color: transparent;
+}
+
+QSlider::sub-page:horizontal {
+    border: 1px solid @widgets#qslider#subpage#border;
+    background-color: @widgets#qslider#subpage#bg;
+    margin: 2px 0;
+}
+
+QSlider::groove:vertical {
+    border: 1px solid @widgets#qslider#groove#border;
+    width: 8px;
+    background-color: @widgets#qslider#groove#bg;
+    margin: 0 2px;
+}
+
+QSlider::handle:vertical {
+    border: 1px solid @widgets#qslider#handle#border;
+    background-color: @widgets#qslider#handle#bg;
+    height: 18px;
+    margin: 0 -2px;
+}
+
+QSlider::add-page:vertical {
+    background-color: transparent;
+}
+
+QSlider::sub-page:vertical {
+    border: 1px solid @widgets#qslider#subpage#border;
+    background-color: @widgets#qslider#subpage#bg;
+    margin: 0 2px;
+}
+
+QSizeGrip {
+    image: url(sizegrip.svg);
+    width: 16px;
+    height: 16px;
+}
+
+/* ViewWindow */
+vnotex--ViewWindow QToolBar[ViewWindowToolBar="true"] {
+    background-color: @widgets#viewwindow#toolbar#bg;
+}
+
+/* ViewSplit */
+vnotex--ViewSplit QTabBar::tab:selected {
+    color: @widgets#viewsplit#tabbar#tab#selected#fg;
+    background-color: @widgets#viewsplit#tabbar#tab#selected#bg;
+}
+
+vnotex--ViewSplit QTabBar[ViewSplitFlash="true"]::tab:selected {
+    background-color: @widgets#viewsplit#flash#bg;
+}
+
+vte--VTextEdit {
+    border: none;
+}

src/data/extra/themes/solarized-light/left.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="rotate(90 255.99999999999997,256.00000000000006) " id="svg_1">
+   <polygon points="128,192 256,320 384,192  " id="svg_2" fill="#9EA5B4"/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/left_disabled.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="rotate(90 255.99999999999997,256.00000000000006) " id="svg_1">
+   <polygon points="128,192 256,320 384,192  " id="svg_2" fill="#4D5765"/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/menu_checkbox.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <path stroke-opacity="0" id="svg_3" d="m126,243.24589l27.93756,-27.94743l76.53449,76.52461l127.58052,-127.54102l27.94743,27.92768l-155.52795,155.50821" stroke-width="5" fill="#9EA5B4" stroke="#000000"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/menu_radiobutton.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <circle fill="#9EA5B4" stroke="#000000" stroke-width="20" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" cx="257.00002" cy="256" r="83.2406" id="svg_11"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/palette.json

@@ -0,0 +1,653 @@
+{
+    "metadata" : {
+        "revision" : 0,
+        "//comment" : "If there is a file named 'editor-highlight.theme' under theme folder, this value will be ignored.",
+        "//comment" : "Otherwise, this value specify the theme name to use for syntax highlighting.",
+        "editor-highlight-theme" : "Solarized Light",
+        "//comment" : "If there is a file named 'markdown-editor-highlight.theme' under theme folder, this value will be ignored.",
+        "//comment" : "Otherwise, this value specify the theme name to use for syntax highlighting.",
+        "//comment" : "If empty, 'editor-highlight-theme' will be used.",
+        "markdown-editor-highlight-theme" : "Solarized Light",
+        "display_name" : "Solarized-light",
+        "//comment" : "Display name for different locales",
+        "display_name_zh_CN" : "Solarized-light",
+        "author": "nriver",
+    },
+    "palette" : {
+        "bg1_1" : "#FFFFF5",
+        "bg1_2" : "#fffdf1",
+        "bg1_3" : "#fefbec",
+        "bg1_4" : "#fef8e8",
+        "bg1_5" : "#FDF6E3",
+        "bg1_51" : "#efe8d6",
+        "bg1_6" : "#ECE4D3",
+        "bg1_7" : "#E4DECC",
+        "bg1_71" : "#E5DDCC",
+        "bg1_8" : "#E1DAC9",
+        "bg1_9" : "#DED6C6",
+        "fg1_1" : "#DAD3C2",
+        "fg1_2" : "#D7D0BF",
+        "fg1_3" : "#D3CCBC",
+        "fg1_4" : "#CFC9B9",
+        "fg1_5" : "#657B83",
+        "fg1_6" : "#C8C2B2",
+        "fg1_7" : "#C5BEAF",
+        "fg1_8" : "#657B83",
+        "fg1_9" : "#657B83",
+        "fg1_10" : "#c4bfaf",
+        "bg2_2" : "#3a4ba6",
+        "bg2_3" : "#3f52b4",
+        "bg2_4" : "#485bbf",
+        "bg2_5" : "#F7C399",
+        "bg2_6" : "#6675c9",
+        "bg2_7" : "#7482ce",
+        "bg2_8" : "#838fd3",
+        "bg2_9" : "#919cd8",
+        "fg10" : "#b71c1c",
+        "fg11" : "#ab5683",
+        "fg12" : "#5768c4",
+        "fg13" : "#b42b1f",
+        "fg15_3" : "#4f5666",
+        "fg15_4" : "#60697c",
+        "fg15_5" : "#9ea5b4",
+        "bg10_4" : "#FDF6E3",
+        "bg10_5" : "#EEE8D5",
+        "bg10_6" : "#3c414d",
+        "bg10_7" : "#444b58",
+        "bg10_8" : "#5a5f66",
+        "bg11" : "#EEE8D5"
+    },
+    "base" : {
+        "normal" : {
+            "fg" : "@palette#fg1_5",
+            "bg" : "@palette#bg1_5",
+            "border" : "@palette#bg1_6"
+        },
+        "master" : {
+            "fg" : "@palette#fg1_9",
+            "bg" : "@palette#bg2_5",
+            "alt" : "@palette#bg2_4"
+        },
+        "header" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "@base#normal#bg"
+        },
+        "footer" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "@base#normal#bg"
+        },
+        "title" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "@palette#bg1_51"
+        },
+        "content" : {
+            "fg" : "@palette#fg1_8",
+            "bg" : "@palette#bg10_5",
+            "border" : "@base#normal#border",
+            "disabled" : {
+                "fg" : "@base#disabled#fg",
+                "bg" : "@base#content#bg"
+            },
+            "pressed" : {
+                "fg" : "@base#pressed#fg",
+                "bg" : "@base#pressed#bg"
+            },
+            "focus" : {
+                "fg" : "@base#content#fg",
+                "bg" : "@base#focus#bg",
+                "border" : "@base#master#bg"
+            },
+            "hover" : {
+                "fg" : "@base#content#fg",
+                "bg" : "@base#hover#bg",
+                "border" : "@base#master#bg"
+            },
+            "selection" : {
+                "fg" : "@palette#fg1_10",
+                "bg" : "@palette#bg11"
+            },
+            "selected" : {
+                "fg" : "@base#content#fg",
+                "bg" : "@base#selected#bg",
+                "active" : {
+                    "fg" : "@base#content#selected#fg",
+                    "bg" : "@base#content#selected#bg"
+                },
+                "inactive" : {
+                    "fg" : "@base#content#selected#fg",
+                    "bg" : "@base#content#hover#bg"
+                }
+            }
+        },
+        "error" : {
+            "fg" : "@palette#fg10"
+        },
+        "warning" : {
+            "fg" : "@palette#fg11"
+        },
+        "info" : {
+            "fg" : "@palette#fg12"
+        },
+        "danger" : {
+            "fg": "@palette#fg1_10",
+            "bg": "@palette#fg13"
+        },
+        "disabled" : {
+            "fg" : "@palette#fg1_1",
+            "bg" : "@base#normal#bg"
+        },
+        "pressed" : {
+            "fg" : "@palette#fg1_3",
+            "bg" : "@palette#bg1_3"
+        },
+        "focus" : {
+            "fg" : "@palette#fg1_8",
+            "bg" : "@palette#bg1_6"
+        },
+        "hover" : {
+            "fg" : "@palette#fg1_8",
+            "bg" : "@palette#bg1_7"
+        },
+        "selected" : {
+            "fg" : "@palette#fg1_9",
+            "bg" : "@palette#bg1_8"
+        },
+        "icon" : {
+            "fg" : "@palette#fg15_5",
+            "inactive" : {
+                "fg" : "@palette#fg15_4"
+            },
+            "disabled" : {
+                "fg" : "@palette#fg15_3"
+            },
+            "warning" : {
+                "fg" : "@base#warning#fg"
+            },
+            "danger" : {
+                "fg": "@base#danger#fg"
+            },
+            "selected" : {
+                "fg" : "@base#master#bg"
+            }
+        }
+    },
+    "widgets" : {
+        "separator" : {
+            "bg" : "@base#normal#border"
+        },
+        "qwidget" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "@base#normal#bg",
+            "info" : {
+                "border" : "@base#info#fg"
+            },
+            "warning" : {
+                "border" : "@base#warning#fg"
+            },
+            "error" : {
+                "border" : "@base#error#fg"
+            },
+            "danger" : {
+                "fg" : "@base#danger#fg",
+                "bg" : "@base#danger#bg"
+            }
+        },
+        "toolbox" : {
+            "title" : {
+                "border" : "@widgets#toolbox#title#button#active#bg",
+                "button": {
+                    "fg" : "@base#normal#fg",
+                    "active" : {
+                        "fg" : "@base#master#fg",
+                        "bg" : "@base#master#bg"
+                    }
+                }
+            }
+        },
+        "titlebar" : {
+            "button" : {
+                "fg" : "@base#icon#fg"
+            },
+            "menu_icon" : {
+                "fg" : "@base#icon#fg",
+                "disabled" : {
+                    "fg" : "@base#icon#disabled#fg"
+                }
+            }
+        },
+        "toolbar" : {
+            "icon" : {
+                "fg" : "@base#icon#fg",
+                "disabled" : {
+                    "fg" : "@base#icon#disabled#fg"
+                },
+                "danger" : {
+                    "fg" : "@base#icon#danger#fg"
+                }
+            }
+        },
+        "notebookexplorer" : {
+            "node_icon" : {
+                "fg" : "@base#icon#fg",
+                "invalid" : {
+                    "fg" : "@base#icon#warning#fg"
+                }
+            },
+            "external_node_icon" : {
+                "fg" : "@base#icon#inactive#fg"
+            }
+        },
+        "locationlist" : {
+            "node_icon" : {
+                "fg" : "@base#icon#fg"
+            }
+        },
+        "viewsplit" : {
+            "action_button" : {
+                "fg" : "@base#icon#inactive#fg",
+                "active" : {
+                    "fg" : "@base#icon#fg"
+                }
+            },
+            "tabbar" : {
+                "tab" : {
+                    "selected" : {
+                        "fg" : "@base#content#fg",
+                        "bg" : "@base#content#bg"
+                    }
+                }
+            },
+            "flash" : {
+                "bg" : "@base#master#alt"
+            }
+        },
+        "qmainwindow" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "@base#normal#bg",
+            "separator" : {
+                "bg" : "@widgets#separator#bg"
+            }
+        },
+        "dragdropareaindicator" : {
+            "fg" : "@base#normal#fg",
+            "border" : "@widgets#dragdropareaindicator#fg"
+        },
+        "navigationlabel" : {
+            "fg" : "@widgets#toolbox#title#button#active#fg",
+            "bg" : "@widgets#toolbox#title#button#active#bg"
+        },
+        "qmenu" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "@base#normal#bg",
+            "border" : "@base#normal#border",
+            "item" : {
+                "selected" : {
+                    "fg" : "@base#selected#fg",
+                    "bg" : "@base#selected#bg"
+                },
+                "disabled" : {
+                    "fg" : "@base#disabled#fg"
+                }
+            },
+            "separator" : {
+                "bg" : "@widgets#separator#bg"
+            }
+        },
+        "qtooltip" : {
+            "fg" : "@base#master#fg",
+            "bg" : "@base#master#bg"
+        },
+        "qtoolbar" : {
+            "bg" : "@base#header#bg",
+            "separator" : {
+                "bg" : "@widgets#separator#bg"
+            },
+            "extension" : {
+                "bg" : "@base#normal#border",
+                "hover" : {
+                    "bg" : "@base#hover#bg"
+                }
+            }
+        },
+        "qtoolbutton" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "transparent",
+            "checked" : {
+                "fg" : "@base#selected#fg",
+                "bg" : "@base#selected#bg"
+            },
+            "hover" : {
+                "fg" : "@base#hover#fg",
+                "bg" : "@base#hover#bg"
+            },
+            "pressed" : {
+                "fg" : "@base#pressed#fg",
+                "bg" : "@base#pressed#bg"
+            }
+        },
+        "qdockwidget" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "@base#normal#bg",
+            "title" : {
+                "bg" : "@base#title#bg",
+                "button" : {
+                    "hover" : {
+                        "bg" : "@base#hover#bg"
+                    }
+                }
+            }
+        },
+        "qpushbutton" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "transparent",
+            "border" : "@base#normal#border",
+            "default" : {
+                "border" : "@base#master#bg"
+            },
+            "focus" : {
+                "fg" : "@base#focus#fg",
+                "bg" : "@base#focus#bg"
+            },
+            "checked" : {
+                "fg" : "@base#selected#fg",
+                "bg" : "@base#selected#bg"
+            },
+            "hover" : {
+                "fg" : "@base#hover#fg",
+                "bg" : "@base#hover#bg"
+            },
+            "pressed" : {
+                "fg" : "@base#pressed#fg",
+                "bg" : "@base#pressed#bg"
+            },
+            "disabled" : {
+                "fg" : "@base#disabled#fg",
+                "bg" : "@widgets#qpushbutton#bg"
+            }
+        },
+        "qdialog" : {
+            "fg" : "@base#normal#fg",
+            "bg" : "@base#normal#bg"
+        },
+        "qcombobox" : {
+            "fg" : "@base#content#fg",
+            "bg" : "@base#content#bg",
+            "border" : "@base#content#border",
+            "focus" : {
+                "bg" : "@base#content#focus#bg",
+                "border" : "@base#content#focus#border"
+            },
+            "hover" : {
+                "bg" : "@base#content#hover#bg",
+                "border" : "@base#content#hover#border"
+            },
+            "disabled" : {
+                "fg" : "@base#content#disabled#fg"
+            },
+            "view" : {
+                "border" : "@base#content#border",
+                "bg" : "@widgets#qcombobox#bg",
+                "selection" : {
+                    "fg" : "@base#content#selection#fg",
+                    "bg" : "@base#content#selection#bg"
+                }
+            },
+            "item" : {
+                "hover" : {
+                    "fg" : "@base#content#hover#fg",
+                    "bg" : "@base#content#hover#bg"
+                }
+            }
+        },
+        "qlabel" : {
+            "fg" : "@base#normal#fg"
+        },
+        "qlineedit" : {
+            "border" : "@base#content#border",
+            "fg" : "@base#content#fg",
+            "bg" : "@base#content#bg",
+            "selection" : {
+                "fg" : "@base#content#selection#fg",
+                "bg" : "@base#content#selection#bg"
+            },
+            "focus" : {
+                "bg" : "@base#content#focus#bg",
+                "border" : "@base#content#focus#border"
+            },
+            "hover" : {
+                "bg" : "@base#content#hover#bg",
+                "border" : "@base#content#hover#border"
+            },
+            "disabled" : {
+                "fg" : "@base#content#disabled#fg"
+            }
+        },
+        "qtabbar" : {
+            "tab" : {
+                "fg" : "@base#normal#fg",
+                "bg" : "@base#normal#bg",
+                "border" : "@base#normal#border",
+                "hover" : {
+                    "fg" : "@base#hover#fg",
+                    "bg" : "@base#hover#bg"
+                },
+                "selected" : {
+                    "fg" : "@base#content#fg",
+                    "bg" : "@base#content#bg",
+                    "border" : "@base#master#bg"
+                }
+            }
+        },
+        "qtreeview" : {
+            "fg" : "@base#content#fg",
+            "bg" : "@base#content#bg",
+            "item" : {
+                "hover" : {
+                    "fg" : "@base#content#hover#fg",
+                    "bg" : "@base#content#hover#bg"
+                },
+                "selected" : {
+                    "fg" : "@base#content#selected#fg",
+                    "bg" : "@base#content#selected#bg",
+                    "active" : {
+                        "fg" : "@base#content#selected#active#fg",
+                        "bg" : "@base#content#selected#active#bg"
+                    },
+                    "inactive" : {
+                        "fg" : "@base#content#selected#inactive#fg",
+                        "bg" : "@base#content#selected#inactive#bg"
+                    }
+                }
+            }
+        },
+        "qlistview" : {
+            "fg" : "@base#content#fg",
+            "bg" : "@base#content#bg",
+            "item" : {
+                "hover" : {
+                    "fg" : "@base#content#hover#fg",
+                    "bg" : "@base#content#hover#bg"
+                },
+                "selected" : {
+                    "fg" : "@base#content#selected#fg",
+                    "bg" : "@base#content#selected#bg",
+                    "active" : {
+                        "fg" : "@base#content#selected#active#fg",
+                        "bg" : "@base#content#selected#active#bg"
+                    },
+                    "inactive" : {
+                        "fg" : "@base#content#selected#inactive#fg",
+                        "bg" : "@base#content#selected#inactive#bg"
+                    }
+                }
+            }
+        },
+        "qsplitter" : {
+            "handle" : {
+                "bg" : "@base#normal#border",
+                "pressed" : {
+                    "bg" : "@base#pressed#bg"
+                }
+            }
+        },
+        "qstatusbar" : {
+            "fg" : "@base#footer#fg",
+            "bg" : "@base#footer#bg"
+        },
+        "qscrollbar" : {
+            "bg" : "@base#normal#bg",
+            "addpage" : {
+                "bg" : "transparent"
+            },
+            "handle" : {
+                "bg" : "@palette#bg1_6",
+                "hover" : {
+                    "bg" : "@palette#bg1_71"
+                },
+                "pressed" : {
+                    "bg" : "@palette#bg1_7"
+                }
+            }
+        },
+        "qcheckbox" : {
+            "disabled" : {
+                "fg" : "@base#disabled#fg"
+            },
+            "indicator" : {
+                "focus" : {
+                    "bg" : "@base#focus#bg"
+                },
+                "hover" : {
+                    "bg" : "@base#hover#bg"
+                },
+                "pressed" : {
+                    "bg" : "@base#pressed#bg"
+                }
+            }
+        },
+        "qradiobutton" : {
+            "disabled" : {
+                "fg" : "@base#disabled#fg"
+            },
+            "indicator" : {
+                "focus" : {
+                    "bg" : "@base#focus#bg"
+                },
+                "hover" : {
+                    "bg" : "@base#hover#bg"
+                },
+                "pressed" : {
+                    "bg" : "@base#pressed#bg"
+                }
+            }
+        },
+        "qspinbox" : {
+            "border" : "@base#content#border",
+            "fg" : "@base#content#fg",
+            "bg" : "@base#content#bg",
+            "disabled" : {
+                "fg" : "@base#content#disabled#fg",
+                "bg" : "@base#content#disabled#bg"
+            },
+            "selection" : {
+                "fg" : "@base#content#selection#fg",
+                "bg" : "@base#content#selection#bg"
+            },
+            "focus" : {
+                "bg" : "@base#content#focus#bg",
+                "border" : "@base#content#focus#border"
+            },
+            "hover" : {
+                "bg" : "@base#content#hover#bg",
+                "border" : "@base#content#hover#border"
+            },
+            "button" : {
+                "hover" : {
+                    "bg" : "@base#content#hover#bg"
+                },
+                "pressed" : {
+                    "bg" : "@base#content#pressed#bg"
+                }
+            }
+        },
+        "qheaderview" : {
+            "section" : {
+                "fg" : "@base#content#fg",
+                "bg" : "@base#content#bg",
+                "border" : "@base#content#border",
+                "checked" : {
+                    "fg" : "@base#content#selected#fg",
+                    "bg" : "@base#content#selected#bg"
+                }
+            }
+        },
+        "qprogressbar" : {
+            "bg" : "@base#content#bg",
+            "border" : "@base#content#border",
+            "chunk" : {
+                "bg" : "@base#master#alt"
+            }
+        },
+        "qgroupbox" : {
+            "border" : "@base#normal#border",
+            "title" : {
+                "fg" : "@base#normal#fg"
+            }
+        },
+        "qabstractscrollarea" : {
+            "border" : "@base#normal#border",
+            "corner" : {
+                "bg" : "@widgets#qscrollbar#bg"
+            }
+        },
+        "qslider" : {
+            "groove" : {
+                "bg" : "@base#content#bg",
+                "border" : "@base#content#border"
+            },
+            "handle" : {
+                "border" : "@base#content#border",
+                "bg" : "@base#master#bg"
+            },
+            "subpage" : {
+                "border" : "@widgets#qslider#handle#border",
+                "bg" : "@base#master#alt"
+            }
+        },
+        "viewwindow" : {
+            "toolbar" : {
+                "bg" : "@base#content#bg"
+            }
+        },
+        "quickselector" : {
+            "item_icon" : {
+                "fg" : "@palette#bg2_9",
+                "border" : "@palette#bg2_9"
+            }
+        },
+        "styleditemdelegate" : {
+            "separator" : {
+                "fg" : "@base#normal#fg",
+                "bg" : "@widgets#separator#bg"
+            },
+            "highlight" : {
+                "fg" : "@base#master#fg",
+                "bg" : "@base#master#bg"
+            }
+        },
+        "mainwindow" : {
+            "dockwidget_tabbar" : {
+                "icon" : {
+                    "fg" : "@base#icon#fg",
+                    "selected" : {
+                        "fg" : "@base#icon#selected#fg"
+                    }
+                }
+            },
+            "tips_label" : {
+                "fg" : "@base#master#fg",
+                "bg" : "@base#master#bg"
+            }
+        }
+    }
+}

src/data/extra/themes/solarized-light/radiobutton_checked.svg

@@ -0,0 +1,7 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <circle fill="#000000" stroke-width="30" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" cx="256.00001" cy="256.00001" r="142.96561" id="svg_9" stroke="#9EA5B4"/>
+  <circle fill="#9EA5B4" stroke="#000000" stroke-width="20" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" cx="256.00002" cy="256" r="83.2406" id="svg_11"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/radiobutton_checked_disabled.svg

@@ -0,0 +1,7 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <circle fill="#000000" stroke-width="30" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" cx="256.00001" cy="256.00001" r="142.96561" id="svg_9" stroke="#4D5765"/>
+  <circle fill="#4D5765" stroke="#000000" stroke-width="20" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" cx="256.00002" cy="256" r="83.2406" id="svg_11"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/radiobutton_unchecked.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <circle fill="#000000" stroke-width="30" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" cx="256.00001" cy="256.00001" r="142.96561" id="svg_9" stroke="#9EA5B4"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/radiobutton_unchecked_disabled.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <circle fill="#000000" stroke-width="30" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" cx="256.00001" cy="256.00001" r="142.96561" id="svg_9" stroke="#4D5765"/>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/right.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="rotate(-90 256.00000000000006,256) " id="svg_1">
+   <polygon fill="#9EA5B4" id="svg_2" points="128,192 256,320 384,192  "/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/right_disabled.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="rotate(-90 256.00000000000006,256) " id="svg_1">
+   <polygon fill="#4D5765" id="svg_2" points="128,192 256,320 384,192  "/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/sizegrip.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1609394859499" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3664" width="512" height="512" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M938.666667 938.666667 853.333333 938.666667 853.333333 853.333333 938.666667 853.333333 938.666667 938.666667M938.666667 768 853.333333 768 853.333333 682.666667 938.666667 682.666667 938.666667 768M768 938.666667 682.666667 938.666667 682.666667 853.333333 768 853.333333 768 938.666667M768 768 682.666667 768 682.666667 682.666667 768 682.666667 768 768M597.333333 938.666667 512 938.666667 512 853.333333 597.333333 853.333333 597.333333 938.666667M938.666667 597.333333 853.333333 597.333333 853.333333 512 938.666667 512 938.666667 597.333333Z" p-id="3665" fill="#9EA5B4"></path></svg>

src/data/extra/themes/solarized-light/text-editor.theme

@@ -0,0 +1,202 @@
+{
+    "metadata" : {
+        "revision" : 0,
+        "name" : "Solarized-dark",
+        "type" : "vtextedit"
+    },
+    "editor-styles" : {
+        "Text" : {
+            "//comment" : "Support a list of fonts separated by ,",
+            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New",
+            "font-size" : 12,
+            "text-color" : "#657B83",
+            "background-color" : "#FDF6E3",
+            "selected-text-color" : "#657B83",
+            "selected-background-color" : "#b0bec5"
+        },
+        "CursorLine" : {
+            "background-color" : "#e4decc"
+        },
+        "TrailingSpace" : {
+            "background-color" : "#959eae"
+        },
+        "Tab" : {
+            "background-color" : "#a0a8b7"
+        },
+        "SelectedText" : {
+            "//comment" : "Selected text highlight",
+            "text-color" : "#222222",
+            "background-color" : "#dfdf00"
+        },
+        "IndicatorsBorder" : {
+            "text-color" : "#8a93a6",
+            "background-color" : "#EEE8D5"
+        },
+        "CurrentLineNumber" : {
+            "text-color" : "#657B83"
+        },
+        "Folding" : {
+            "text-color" : "#838fd3"
+        },
+        "FoldedFolding" : {
+            "text-color" : "#919cd8"
+        },
+        "FoldingHighlight" : {
+            "text-color" : "#4c5562"
+        },
+        "FoldedFoldingRangeLine" : {
+            "background-color" : "#3a4ba6"
+        },
+        "IncrementalSearch" : {
+            "//comment" : "Incremental search highlight",
+            "text-color" : "#222222",
+            "background-color" : "#ce93d8"
+        },
+        "Search" : {
+            "//comment" : "Search highlight",
+            "text-color" : "#222222",
+            "background-color" : "#4db6ac"
+        },
+        "SearchUnderCursor" : {
+            "//comment" : "Search highlight under cursor",
+            "text-color" : "#222222",
+            "background-color" : "#66bb6a"
+        }
+    },
+    "//comment" : "Override the Text style in editor-styles",
+    "markdown-editor-styles" : {
+        "Text" : {
+            "//comment" : "Support a list of fonts separated by ,",
+            "font-family" : "YaHei Consolas Hybrid, 冬青黑体, Microsoft YaHei, 微软雅黑, Microsoft YaHei UI, WenQuanYi Micro Hei, 文泉驿雅黑, Dengxian, 等线体, STXihei, 华文细黑, Liberation Sans, Droid Sans, NSimSun, 新宋体, SimSun, 宋体, Verdana, Helvetica, Tahoma, Arial, Geneva, Georgia, Times New Roman",
+            "font-size" : 12,
+            "text-color" : "#657B83",
+            "background-color" : "#FDF6E3",
+            "selected-text-color" : "#657B83",
+            "selected-background-color" : "#b0bec5"
+        },
+        "Preview" : {
+            "background-color" : "#b0bec5"
+        }
+    },
+    "markdown-syntax-styles" : {
+        "H1" : {
+            "text-color" : "#CA8465",
+            "bold" : true,
+            "font-size" : 17
+        },
+        "H2" : {
+            "text-color" : "#CA8465",
+            "bold" : true,
+            "font-size" : 16
+        },
+        "H3" : {
+            "text-color" : "#CA8465",
+            "bold" : true,
+            "font-size" : 15
+        },
+        "H4" : {
+            "text-color" : "#CA8465",
+            "bold" : true,
+            "font-size" : 14
+        },
+        "H5" : {
+            "text-color" : "#CA8465",
+            "bold" : true,
+            "font-size" : 13
+        },
+        "H6" : {
+            "text-color" : "#CA8465",
+            "bold" : true,
+            "font-size" : 12
+        },
+        "HRULE" : {
+            "text-color" : "#abb2bf",
+            "background-color" : "#864046"
+        },
+        "LIST_BULLET" : {
+            "text-color" : "#CA8465",
+            "bold" : true
+        },
+        "LIST_ENUMERATOR" : {
+            "text-color" : "#CA8465"
+        },
+        "LINK" : {
+            "text-color" : "#2AA198"
+        },
+        "AUTO_LINK_URL" : {
+            "text-color" : "#2AA198"
+        },
+        "AUTO_LINK_EMAIL" : {
+            "text-color" : "#2AA198"
+        },
+        "IMAGE" : {
+            "text-color" : "#4883b3"
+        },
+        "REFERENCE" : {
+            "text-color" : "#56b6c2"
+        },
+        "CODE" : {
+            "text-color" : "#98c379",
+            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
+        },
+        "EMPH" : {
+            "italic" : true
+        },
+        "STRONG" : {
+            "bold" : true
+        },
+        "HTML_ENTITY" : {
+            "text-color" : "#c07855"
+        },
+        "HTML" : {
+            "text-color" : "#c07855"
+        },
+        "HTMLBLOCK" : {
+            "text-color" : "#c07855"
+        },
+        "COMMENT" : {
+            "text-color" : "#7e899d"
+        },
+        "VERBATIM" : {
+            "text-color" : "#98c379",
+            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
+        },
+        "//comment" : "Please modify the syntax highlight theme as well if you change this",
+        "FENCEDCODEBLOCK" : {
+            "text-color" : "#98c379",
+            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
+        },
+        "BLOCKQUOTE" : {
+            "text-color" : "#7482ce"
+        },
+        "NOTE" : {
+            "text-color" : "#9575cd"
+        },
+        "STRIKE" : {
+            "text-color" : "#e57373",
+            "strike-through" : true
+        },
+        "FRONTMATTER" : {
+            "text-color" : "#6e7686"
+        },
+        "INLINEEQUATION" : {
+            "text-color" : "#4db6ac",
+            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
+        },
+        "DISPLAYFORMULA" : {
+            "text-color" : "#4db6ac",
+            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
+        },
+        "MARK" : {
+            "text-color" : "#d7dae0",
+            "background-color" : "#898900"
+        },
+        "TABLE" : {
+            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
+        },
+        "TABLEBORDER" : {
+            "text-color" : "#CA8465",
+            "background-color" : "#E4DECC"
+        }
+   }
+}

src/data/extra/themes/solarized-light/up.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="rotate(180 255.99999999999997,256) " id="svg_1">
+   <polygon points="128,192 256,320 384,192  " id="svg_2" fill="#9EA5B4"/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/up_disabled.svg

@@ -0,0 +1,8 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <g transform="rotate(180 255.99999999999997,256) " id="svg_1">
+   <polygon points="128,192 256,320 384,192  " id="svg_2" fill="#4D5765"/>
+  </g>
+ </g>
+</svg>

src/data/extra/themes/solarized-light/web.css

@@ -0,0 +1,302 @@
+/* 
+    https://github.com/Nriver/vnote-solarized-theme
+    made by Nriver
+*/
+
+body {
+    margin: 0 auto;
+    font-family: "YaHei Consolas Hybrid", "Noto Sans", "Helvetica Neue", "Segoe UI", Helvetica, Tahoma, Arial, Geneva, Georgia, Palatino, "Times New Roman", "冬青黑体", "Microsoft YaHei", "微软雅黑", "Microsoft YaHei UI", "WenQuanYi Micro Hei", "文泉驿雅黑", Dengxian, "等线体", STXihei, "华文细黑", "Liberation Sans", "Droid Sans", NSimSun, "新宋体", SimSun, "宋体", "Apple Color Emoji", "Segoe UI Emoji";
+    color: #657B83;
+    line-height: 1.5;
+    padding: 16px;
+    background-color: #EEE8D5;
+    font-size: 16px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: #CA8465;
+    font-weight: bold;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    padding: 0;
+}
+
+p {
+    padding: 0;
+    margin-bottom: 16px;
+}
+
+h1 {
+    font-size: 26px;
+}
+
+h2 {
+    font-size: 24px;
+}
+
+h3 {
+    font-size: 22px;
+}
+
+h4 {
+    font-size: 20px;
+}
+
+h5 {
+    font-size: 19px;
+}
+
+h6 {
+    font-size: 18px;
+}
+
+a {
+    color: #2AA198;
+    margin: 0;
+    padding: 0;
+    vertical-align: baseline;
+    text-decoration: none;
+    word-break: break-word;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+a:visited {
+    color: #ba68c8;
+}
+
+ul, ol {
+    padding: 0;
+    padding-left: 24px;
+}
+
+li {
+    line-height: 24px;
+}
+
+li ul, li ol {
+    margin-left: 16px;
+}
+
+p, ul, ol {
+    font-size: 16px;
+    line-height: 24px;
+}
+
+mark {
+    color: #000000;
+    background-color: #c4c400;
+}
+
+pre {
+    display: block;
+    overflow-y: hidden;
+    overflow-x: auto;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+}
+
+code {
+    font-family: "YaHei Consolas Hybrid", Consolas, Monaco, "Andale Mono", Monospace, "Courier New";
+    color: #D7BA7D;
+    word-break: break-word;
+}
+
+pre code {
+    display: block;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    color: #D7BA7D;
+    background-color: #FDF6E3;
+    line-height: 1.5;
+    font-family: "YaHei Consolas Hybrid", Consolas, Monaco, "Andale Mono", Monospace, "Courier New";
+    white-space: pre;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+}
+
+aside {
+    display: block;
+    float: right;
+    width: 390px;
+}
+
+blockquote {
+    color: #abb2bf;
+    border-left: .5em solid #abb2bf;
+    padding: 0 1em;
+    margin-left: 0;
+}
+
+blockquote p {
+    color: #abb2bf;
+}
+
+hr {
+    display: block;
+    text-align: left;
+    margin: 1em 0;
+    border: none;
+    height: 2px;
+    background-color: #4c5562;
+}
+
+table {
+   padding: 0;
+   margin: 1rem 0.5rem;
+   border-collapse: collapse;
+}
+
+table tr {
+   border-top: 1px solid #4c5562;
+   background-color: #efe8d6;
+   margin: 0;
+   padding: 0;
+}
+
+table tr:hover {
+   background-color: #FDF6E3;
+}
+
+table tr th {
+   font-weight: bold;
+   border: 1px solid #4c5562;
+   margin: 0;
+   padding: 6px 13px;
+}
+
+table tr td {
+   border: 1px solid #4c5562;
+   margin: 0;
+   padding: 6px 13px;
+}
+
+table tr th :first-child, table tr td :first-child {
+   margin-top: 0;
+}
+
+table tr th :last-child, table tr td :last-child {
+   margin-bottom: 0;
+}
+
+div.vx-mermaid-graph {
+    margin: 16px 0px 16px 0px;
+    overflow-y: hidden;
+    background: #B0BEC5;
+    color: #6C6C6C;
+}
+
+div.vx-flowchartjs-graph {
+    padding: 0px 5px 0px 5px;
+    margin: 16px 0px 16px 0px;
+    width: fit-content;
+    overflow: hidden;
+    background: #B0BEC5;
+    color: #6C6C6C;
+}
+
+div.vx-wavedrom-graph {
+    padding: 0px 5px 0px 5px;
+    margin: 16px 0px 16px 0px;
+    width: fit-content;
+    overflow: hidden;
+    background: #B0BEC5;
+    color: #6C6C6C;
+}
+
+div.vx-plantuml-graph {
+    padding: 5px 5px 0px 5px;
+    margin: 16px 0px 16px 0px;
+    width: fit-content;
+    overflow: hidden;
+    background: #B0BEC5;
+    color: #6C6C6C;
+}
+
+::selection {
+  background-color: #0c7bff;
+  color: #e3e5e9;
+}
+
+::-webkit-scrollbar {
+    background-color: #FDF6E3;
+    width: 14px;
+    height: 14px;
+    border: none;
+}
+
+::-webkit-scrollbar-corner {
+    background-color: #FDF6E3;
+}
+
+::-webkit-scrollbar-button {
+    /* This selector affects the styling of both the up & down and left & right buttons of a scrollbar */
+    height: 14px;
+    width: 14px;
+    background-color: #FDF6E3;
+}
+
+::-webkit-scrollbar-button:hover {
+    background-color: #918F8A;
+}
+
+::-webkit-scrollbar-button:active {
+    background-color: #65625B;
+}
+
+::-webkit-scrollbar-track {
+    /* This selector affects the styling of the area in the scrollbar between the two buttons */
+    background-color: #FDF6E3;
+}
+
+::-webkit-scrollbar-thumb {
+    /* This selector affects the styling of draggable element of the scollbar */
+    border: none;
+    background-color: #C0BCB0;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #918F8A;
+}
+
+::-webkit-scrollbar-thumb:active {
+    background-color: #65625B;
+}
+
+::-webkit-scrollbar-button:horizontal:increment {
+    background-image: url(right.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+::-webkit-scrollbar-button:horizontal:decrement {
+    background-image: url(left.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+::-webkit-scrollbar-button:vertical:increment {
+    background-image: url(down.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+::-webkit-scrollbar-button:vertical:decrement {
+    background-image: url(up.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+#vx-content span.vx-search-match {
+    color: #222222;
+    background-color: #4db6ac;
+}
+
+#vx-content span.vx-current-search-match {
+    color: #222222;
+    background-color: #66bb6a;
+}