add theme moonlight (#1636)

libs/vtextedit

@@ -1 +1 @@
-Subproject commit 96f56ccd3ca6c5037183690cb36b41f716fc0367
+Subproject commit f06b36a457ec89e85c372905e5b388e30610e803

src/core/theme.cpp

@@ -92,15 +92,19 @@ Theme::Metadata Theme::readMetadata(const Palette &p_obj)
 
 Theme::Palette Theme::translatePalette(const QJsonObject &p_obj)
 {
+    const QString paletteSection("palette");
     const QString baseSection("base");
     const QString widgetsSection("widgets");
 
     // @p_palette may contain referenced definitons: derived=@base#sub#sub2.
     Palette palette;
 
+    palette[paletteSection] = p_obj[paletteSection];
     palette[baseSection] = p_obj[baseSection];
     palette[widgetsSection] = p_obj[widgetsSection];
 
+    // Skip paletteSection since it will not contain any reference.
+
     translatePaletteObject(palette, palette, baseSection);
 
     translatePaletteObject(palette, palette, widgetsSection);
@@ -157,7 +161,7 @@ QPair<bool, int> Theme::translatePaletteObjectOnce(const Palette &p_palette,
                     break;
                 }
 
-                Q_ASSERT(refVal.isString());
+                Q_ASSERT_X(refVal.isString(), "translatePaletteObjectOnce", val.toString().toStdString().c_str());
                 it.value() = refVal.toString();
                 if (isRef(refVal.toString())) {
                     // It is another ref again.

src/core/thememgr.cpp

@@ -86,6 +86,7 @@ void ThemeMgr::loadCurrentTheme(const QString &p_themeName)
     if (themeFolder.isNull()) {
         qWarning() << "failed to locate theme" << p_themeName;
     } else {
+        qInfo() << "using theme" << p_themeName;
         m_currentTheme.reset(loadTheme(themeFolder));
     }
 

src/data/core/icons/save_editor.svg

@@ -1 +1 @@
-<svg t="1600004071240" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11989" width="512" height="512"><path d="M896 0 0 0l0 1024 1024 0L1024 128 896 0zM512 128l128 0 0 256-128 0L512 128zM896 896 128 896 128 128l64 0 0 320 576 0L768 128l74.976 0L896 181.024 896 896z" p-id="11990" fill="#000000"></path></svg>
+<?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="1609209772514" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3065" width="512" height="512" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M819.2 104.96H168.96c-45.1712 0-81.92 36.7488-81.92 81.92v650.24c0 45.1712 36.7488 81.92 81.92 81.92h650.24c45.1712 0 81.92-36.7488 81.92-81.92V186.88c0-45.1712-36.7488-81.92-81.92-81.92zM488.96 207.36v79.36c0 25.44896 20.63104 46.08 46.08 46.08s46.08-20.63104 46.08-46.08V207.36h43.52v176.64H366.08V207.36h122.88z m309.76 609.28H189.44V207.36h74.24v197.12c0 45.1712 36.7488 81.92 81.92 81.92h299.52c45.1712 0 81.92-36.7488 81.92-81.92V207.36h71.68v609.28z" p-id="3066" fill="#000000"></path></svg>

src/data/core/icons/saved.svg

@@ -1 +1 @@
-<svg t="1600004071240" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11989" width="512" height="512"><path d="M896 0 0 0l0 1024 1024 0L1024 128 896 0zM512 128l128 0 0 256-128 0L512 128zM896 896 128 896 128 128l64 0 0 320 576 0L768 128l74.976 0L896 181.024 896 896z" p-id="11990" fill="#000000"></path></svg>
+<?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="1609209772514" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3065" width="512" height="512" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M819.2 104.96H168.96c-45.1712 0-81.92 36.7488-81.92 81.92v650.24c0 45.1712 36.7488 81.92 81.92 81.92h650.24c45.1712 0 81.92-36.7488 81.92-81.92V186.88c0-45.1712-36.7488-81.92-81.92-81.92zM488.96 207.36v79.36c0 25.44896 20.63104 46.08 46.08 46.08s46.08-20.63104 46.08-46.08V207.36h43.52v176.64H366.08V207.36h122.88z m309.76 609.28H189.44V207.36h74.24v197.12c0 45.1712 36.7488 81.92 81.92 81.92h299.52c45.1712 0 81.92-36.7488 81.92-81.92V207.36h71.68v609.28z" p-id="3066" fill="#000000"></path></svg>

src/data/extra/extra.qrc

@@ -1,11 +1,5 @@
 <RCC>
     <qresource prefix="/vnotex/data/extra">
-        <file>themes/native/text-editor.theme</file>
-        <file>themes/native/highlight.css</file>
-        <file>themes/native/interface.qss</file>
-        <file>themes/native/web.css</file>
-        <file>themes/native/palette.json</file>
-        <file>themes/native/cover.png</file>
         <file>docs/en/get_started.txt</file>
         <file>docs/en/about_vnotex.txt</file>
         <file>docs/en/shortcuts.md</file>
@@ -72,7 +66,46 @@
         <file>web/js/turndown.js</file>
         <file>web/js/mark.js/mark.min.js</file>
         <file>web/js/markjs.js</file>
+        <file>themes/native/text-editor.theme</file>
+        <file>themes/native/highlight.css</file>
+        <file>themes/native/interface.qss</file>
+        <file>themes/native/web.css</file>
+        <file>themes/native/palette.json</file>
+        <file>themes/native/cover.png</file>
+        <file>themes/moonlight/arrow_dropdown.svg</file>
+        <file>themes/moonlight/arrow_dropdown_disabled.svg</file>
+        <file>themes/moonlight/branch_closed.svg</file>
+        <file>themes/moonlight/branch_open.svg</file>
+        <file>themes/moonlight/checkbox_checked.svg</file>
+        <file>themes/moonlight/checkbox_checked_disabled.svg</file>
+        <file>themes/moonlight/checkbox_unchecked.svg</file>
+        <file>themes/moonlight/checkbox_unchecked_disabled.svg</file>
+        <file>themes/moonlight/close.svg</file>
+        <file>themes/moonlight/close_grey.svg</file>
+        <file>themes/moonlight/cover.png</file>
+        <file>themes/moonlight/down.svg</file>
+        <file>themes/moonlight/down_disabled.svg</file>
+        <file>themes/moonlight/float.svg</file>
+        <file>themes/moonlight/highlight.css</file>
+        <file>themes/moonlight/interface.qss</file>
+        <file>themes/moonlight/left.svg</file>
+        <file>themes/moonlight/left_disabled.svg</file>
+        <file>themes/moonlight/menu_checkbox.svg</file>
+        <file>themes/moonlight/menu_radiobutton.svg</file>
+        <file>themes/moonlight/palette.json</file>
+        <file>themes/moonlight/radiobutton_checked.svg</file>
+        <file>themes/moonlight/radiobutton_checked_disabled.svg</file>
+        <file>themes/moonlight/radiobutton_unchecked.svg</file>
+        <file>themes/moonlight/radiobutton_unchecked_disabled.svg</file>
+        <file>themes/moonlight/right.svg</file>
+        <file>themes/moonlight/right_disabled.svg</file>
+        <file>themes/moonlight/sizegrip.svg</file>
+        <file>themes/moonlight/text-editor.theme</file>
+        <file>themes/moonlight/up.svg</file>
+        <file>themes/moonlight/up_disabled.svg</file>
+        <file>themes/moonlight/web.css</file>
         <file>syntax-highlighting/themes/markdown-default.theme</file>
+        <file>syntax-highlighting/themes/markdown-breeze-dark.theme</file>
         <file>syntax-highlighting/themes/default.theme</file>
         <file>syntax-highlighting/themes/breeze-dark.theme</file>
         <file>syntax-highlighting/themes/printing.theme</file>

src/data/extra/syntax-highlighting/themes/markdown-breeze-dark.theme

@@ -0,0 +1,174 @@
+{
+    "metadata" : {
+        "revision" : 2,
+        "name" : "Markdown Breeze Dark"
+    },
+    "text-styles": {
+        "Normal" : {
+            "text-color" : "#98c379",
+            "selected-text-color" : "#cfcfc2",
+            "bold" : false,
+            "italic" : false,
+            "underline" : false,
+            "strike-through" : false
+        },
+        "Keyword" : {
+            "text-color" : "#cfcfc2",
+            "selected-text-color" : "#cfcfc2",
+            "bold" : true
+        },
+        "Function" : {
+            "text-color" : "#8e44ad",
+            "selected-text-color" : "#af81ff"
+        },
+        "Variable" : {
+            "text-color" : "#27aeae",
+            "selected-text-color" : "#27aeae"
+        },
+        "ControlFlow" : {
+            "text-color" : "#fdbc4b",
+            "selected-text-color" : "#fdbc4b",
+            "bold" : true
+        },
+        "Operator" : {
+            "text-color" : "#cfcfc2",
+            "selected-text-color" : "#cfcfc2"
+        },
+        "BuiltIn" : {
+            "text-color" : "#7f8c8d",
+            "selected-text-color" : "#bdc3c7"
+        },
+        "Extension" : {
+            "text-color" : "#0099ff",
+            "selected-text-color" : "#bdc3c7",
+            "bold" : true
+        },
+        "Preprocessor" : {
+            "text-color" : "#27ae60",
+            "selected-text-color" : "#27ae60"
+        },
+        "Attribute" : {
+            "text-color" : "#2980b9",
+            "selected-text-color" : "#fdbc4b"
+        },
+        "Char" : {
+            "text-color" : "#3daee9",
+            "selected-text-color" : "#3daee9"
+        },
+        "SpecialChar" : {
+            "text-color" : "#3daee9",
+            "selected-text-color" : "#3daee9"
+        },
+        "String" : {
+            "text-color" : "#f44f4f",
+            "selected-text-color" : "#f44f4f"
+        },
+        "VerbatimString" : {
+            "text-color" : "#da4453",
+            "selected-text-color" : "#da4453"
+        },
+        "SpecialString" : {
+            "text-color" : "#da4453",
+            "selected-text-color" : "#da4453"
+        },
+        "Import" : {
+            "text-color" : "#27ae60",
+            "selected-text-color" : "#27ae60"
+        },
+        "DataType" : {
+            "text-color" : "#2980b9",
+            "selected-text-color" : "#fdbc4b"
+        },
+        "DecVal" : {
+            "text-color" : "#f67400",
+            "selected-text-color" : "#f67400"
+        },
+        "BaseN" : {
+            "text-color" : "#f67400",
+            "selected-text-color" : "#f67400"
+        },
+        "Float" : {
+            "text-color" : "#f67400",
+            "selected-text-color" : "#f67400"
+        },
+        "Constant" : {
+            "text-color" : "#27aeae",
+            "selected-text-color" : "#27aeae",
+            "bold" : true
+        },
+        "Comment" : {
+            "text-color" : "#7a7c7d",
+            "selected-text-color" : "#808080"
+        },
+        "Documentation" : {
+            "text-color" : "#a43340",
+            "selected-text-color" : "#da4453"
+        },
+        "Annotation" : {
+            "text-color" : "#3f8058",
+            "selected-text-color" : "#54aa75"
+        },
+        "CommentVar" : {
+            "text-color" : "#7f8c8d",
+            "selected-text-color" : "#94a3a4"
+        },
+        "RegionMarker" : {
+            "text-color" : "#2980b9",
+            "selected-text-color" : "#3daee9",
+            "background-color" : "#153042"
+        },
+        "Information" : {
+            "text-color" : "#c45b00",
+            "selected-text-color" : "#e46700"
+        },
+        "Warning" : {
+            "text-color" : "#da4453",
+            "selected-text-color" : "#da4453"
+        },
+        "Alert" : {
+            "text-color" : "#95da4c",
+            "selected-text-color" : "#95da4c",
+            "background-color" : "#4d1f24",
+            "bold" : true
+        },
+        "Error" : {
+            "text-color" : "#da4453",
+            "selected-text-color" : "#da4453",
+            "underline" : true
+        },
+        "Others" : {
+            "text-color" : "#27ae60",
+            "selected-text-color" : "#27ae60"
+        }
+   },
+    "editor-colors": {
+        "background-color" : "#232629",
+        "code-folding" : "#224e65",
+        "bracket-matching" : "#8e44ad",
+        "current-line" : "#2A2E32",
+        "icon-border" : "#31363b",
+        "indentation-line" : "#3a3f44",
+        "line-numbers" : "#7a7c7d",
+        "current-line-number" : "#a5a6a8",
+        "mark-bookmark" : "#0404bf",
+        "mark-breakpoint-active" : "#8b0607",
+        "mark-breakpoint-reached" : "#6d6e07",
+        "mark-breakpoint-disabled" : "#820683",
+        "mark-execution" : "#4d4e50",
+        "mark-warning" : "#f67400",
+        "mark-error" : "#da4453",
+        "modified-lines" : "#c04900",
+        "replace-highlight" : "#808021",
+        "saved-lines" : "#1c8042",
+        "search-highlight" : "#218058",
+        "selection" : "#2d5c76",
+        "separator" : "#7a7c7d",
+        "spell-checking" : "#c0392b",
+        "tab-marker" : "#4d4d4d",
+        "template-background" : "#31363b",
+        "template-placeholder" : "#123723",
+        "template-focused-placeholder" : "#123723",
+        "template-read-only-placeholder" : "#4d1f24",
+        "word-wrap-marker" : "#3a3f44"
+    }
+}

src/data/extra/themes/moonlight/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/moonlight/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/moonlight/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/moonlight/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/moonlight/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/moonlight/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/moonlight/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/moonlight/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/moonlight/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/moonlight/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/moonlight/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/moonlight/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/moonlight/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/moonlight/highlight.css

@@ -0,0 +1,231 @@
+/* PrismJS 1.22.0
+https://prismjs.com/download.html#themes=prism-tomorrow&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 */
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #ccc;
+	background: none;
+	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;
+
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #3c414d;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #999;
+}
+
+.token.punctuation {
+	color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+	color: #e2777a;
+}
+
+.token.function-name {
+	color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+	color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+	color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+	color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+	color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+	color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.inserted {
+	color: green;
+}
+
+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;
+	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 a {
+	cursor: pointer;
+}
+
+div.code-toolbar > .toolbar 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 a,
+div.code-toolbar > .toolbar button,
+div.code-toolbar > .toolbar 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 a:hover,
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:focus {
+	color: inherit;
+	text-decoration: none;
+}
+

src/data/extra/themes/moonlight/interface.qss

@@ -0,0 +1,1076 @@
+/* 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: 2px solid @widgets#qwidget#info#border;
+}
+
+*[State="warning"] {
+    border: 2px solid @widgets#qwidget#warning#border;
+}
+
+*[State="error"] {
+    border: 2px solid @widgets#qwidget#error#border;
+}
+
+/* QAbstractScrollArea */
+QAbstractScrollArea {
+    border: 1px solid @widgets#qabstractscrollarea#border;
+}
+
+QAbstractScrollArea::corner {
+    background-color: @widgets#qabstractscrollarea#corner#bg;
+    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 {
+    background-color: @widgets#qtoolbar#extension#bg;
+}
+
+/* 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);
+}
+/* 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;
+}
+
+/* QLineEdit */
+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;
+}
+
+/* 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;
+}
+
+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: 5px;
+    padding-bottom: 5px;
+}
+
+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: 5px;
+    padding-bottom: 5px;
+}
+
+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: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;
+}

src/data/extra/themes/moonlight/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/moonlight/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/moonlight/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/moonlight/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/moonlight/palette.json

@@ -0,0 +1,585 @@
+{
+    "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" : "Breeze 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" : "Markdown Breeze Dark",
+        "display_name" : "Moonlight",
+        "//comment" : "Display name for different locales",
+        "display_name_zh_CN" : "月夜"
+    },
+    "palette" : {
+        "bg1_1" : "#07080d",
+        "bg1_2" : "#101215",
+        "bg1_3" : "#181b20",
+        "bg1_4" : "#21252b",
+        "bg1_5" : "#2a2f36",
+        "bg1_51" : "#313740",
+        "bg1_6" : "#3b424c",
+        "bg1_7" : "#4c5562",
+        "bg1_71" : "#535d6c",
+        "bg1_8" : "#576071",
+        "bg1_9" : "#657184",
+        "fg1_1" : "#7e899d",
+        "fg1_2" : "#8a93a6",
+        "fg1_3" : "#959eae",
+        "fg1_4" : "#a0a8b7",
+        "fg1_5" : "#abb2bf",
+        "fg1_6" : "#b6bcc7",
+        "fg1_7" : "#c1c6d0",
+        "fg1_8" : "#ccd1d8",
+        "fg1_9" : "#d7dae0",
+        "fg1_10" : "#e3e5e9",
+        "bg2_2" : "#3a4ba6",
+        "bg2_3" : "#3f52b4",
+        "bg2_4" : "#485bbf",
+        "bg2_5" : "#5768c4",
+        "bg2_6" : "#6675c9",
+        "bg2_7" : "#7482ce",
+        "bg2_8" : "#838fd3",
+        "bg2_9" : "#919cd8",
+        "fg10" : "#b71c1c",
+        "fg11" : "#ab5683",
+        "fg12" : "#283593",
+        "fg13" : "#b42b1f",
+        "fg15_3" : "#4f5666",
+        "fg15_4" : "#60697c",
+        "fg15_5" : "#9ea5b4",
+        "bg10_4" : "#2d323b",
+        "bg10_5" : "#333842",
+        "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_9",
+            "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"
+            }
+        }
+    },
+    "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"
+            }
+        },
+        "viewsplit" : {
+            "action_button" : {
+                "fg" : "@base#icon#inactive#fg",
+                "active" : {
+                    "fg" : "@base#icon#fg"
+                }
+            }
+        },
+        "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#fg"
+            }
+        },
+        "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#selected#fg",
+                    "bg" : "@base#selected#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",
+            "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"
+            }
+        }
+    }
+}

src/data/extra/themes/moonlight/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/moonlight/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/moonlight/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/moonlight/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/moonlight/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/moonlight/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/moonlight/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/moonlight/text-editor.theme

@@ -0,0 +1,199 @@
+{
+    "metadata" : {
+        "revision" : 0,
+        "name" : "Moonlight",
+        "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" : "#d7dae0",
+            "background-color" : "#333842",
+            "selected-text-color" : "#e3e5e9",
+            "selected-background-color" : "#0c7bff"
+        },
+        "CursorLine" : {
+            "background-color" : "#444b58"
+        },
+        "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" : "#2d323b"
+        },
+        "CurrentLineNumber" : {
+            "text-color" : "#d7dae0"
+        },
+        "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, sans-serif, Tahoma, Arial, Geneva, Georgia, Times New Roman",
+            "font-size" : 12,
+            "text-color" : "#d7dae0",
+            "background-color" : "#333842",
+            "selected-text-color" : "#e3e5e9",
+            "selected-background-color" : "#0c7bff"
+        }
+    },
+    "markdown-syntax-styles" : {
+        "H1" : {
+            "text-color" : "#e06c75",
+            "bold" : true,
+            "font-size" : 17
+        },
+        "H2" : {
+            "text-color" : "#e06c75",
+            "bold" : true,
+            "font-size" : 16
+        },
+        "H3" : {
+            "text-color" : "#e06c75",
+            "bold" : true,
+            "font-size" : 15
+        },
+        "H4" : {
+            "text-color" : "#e06c75",
+            "bold" : true,
+            "font-size" : 14
+        },
+        "H5" : {
+            "text-color" : "#e06c75",
+            "bold" : true,
+            "font-size" : 13
+        },
+        "H6" : {
+            "text-color" : "#e06c75",
+            "bold" : true,
+            "font-size" : 12
+        },
+        "HRULE" : {
+            "text-color" : "#abb2bf",
+            "background-color" : "#493134"
+        },
+        "LIST_BULLET" : {
+            "text-color" : "#e06c75",
+            "bold" : true
+        },
+        "LIST_ENUMERATOR" : {
+            "text-color" : "#e06c75"
+        },
+        "LINK" : {
+            "text-color" : "#61afef"
+        },
+        "AUTO_LINK_URL" : {
+            "text-color" : "#61afef"
+        },
+        "AUTO_LINK_EMAIL" : {
+            "text-color" : "#61afef"
+        },
+        "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" : "#551560"
+        },
+        "TABLE" : {
+            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
+        },
+        "TABLEBORDER" : {
+            "text-color" : "#e06c75",
+            "background-color" : "#444b58"
+        }
+   }
+}

src/data/extra/themes/moonlight/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/moonlight/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/moonlight/web.css

@@ -0,0 +1,298 @@
+body {
+    margin: 0 auto;
+    font-family: "Segoe UI", Helvetica, sans-serif, Tahoma, Arial, Geneva, Georgia, Palatino, "Times New Roman", "冬青黑体", "YaHei Consolas Hybrid", "Microsoft YaHei", "微软雅黑", "Microsoft YaHei UI", "WenQuanYi Micro Hei", "文泉驿雅黑", Dengxian, "等线体", STXihei, "华文细黑", "Liberation Sans", "Droid Sans", NSimSun, "新宋体", SimSun, "宋体";
+    color: #d7dae0;
+    line-height: 1.5;
+    padding: 15px;
+    background-color: #333842;
+    font-size: 16px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: #e06c75;
+    font-weight: bold;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    padding: 0;
+}
+
+p {
+    padding: 0;
+    margin-top: 16px;
+    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: #61afef;
+    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, Monospace, Courier;
+    color: #98c379;
+    word-break: break-word;
+}
+
+pre code {
+    display: block;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    color: #98c379;
+    background-color: #3c414d;
+    line-height: 1.5;
+    font-family: "YaHei Consolas Hybrid", Consolas, Monaco, Monospace, Courier;
+    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: #313740;
+   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: #2a2f36;
+    width: 14px;
+    height: 14px;
+    border: none;
+}
+
+::-webkit-scrollbar-corner {
+    background-color: #2a2f36;
+}
+
+::-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: #2a2f36;
+}
+
+::-webkit-scrollbar-button:hover {
+    background-color: #535d6c;
+}
+
+::-webkit-scrollbar-button:active {
+    background-color: #313740;
+}
+
+::-webkit-scrollbar-track {
+    /* This selector affects the styling of the area in the scrollbar between the two buttons */
+    background-color: #2a2f36;
+}
+
+::-webkit-scrollbar-thumb {
+    /* This selector affects the styling of draggable element of the scollbar */
+    border: none;
+    background-color: #4c5562;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #576071;
+}
+
+::-webkit-scrollbar-thumb:active {
+    background-color: #535d6c;
+}
+
+::-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/native/interface.qss

@@ -1,11 +1,26 @@
 /* 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.
  */
 
+/* All widgets */
+*[State="info"] {
+    border: 2px solid @base#info#fg;
+}
+
+*[State="warning"] {
+    border: 2px solid @base#warning#fg;
+}
+
+*[State="error"] {
+    border: 2px solid @base#error#fg;
+}
+
 /* ToolBox */
 vnotex--ToolBox QWidget[ToolBoxTitle="true"] {
     border-bottom: 2px solid @widgets#toolbox#title#border;
@@ -103,16 +118,3 @@ vnotex--DragDropAreaIndicator QLabel {
     font-size: 12pt;
     font-weight: bold;
 }
-
-/* All widgets */
-*[State="info"] {
-    border: 2px solid @base#info#fg;
-}
-
-*[State="warning"] {
-    border: 2px solid @base#warning#fg;
-}
-
-*[State="error"] {
-    border: 2px solid @base#error#fg;
-}

src/data/extra/themes/native/text-editor.theme

@@ -38,7 +38,10 @@
             "text-color" : "#4169e1"
         },
         "FoldingHighlight" : {
-            "text-color" : "#ffa9c4f5"
+            "text-color" : "#a9c4f5"
+        },
+        "FoldedFoldingRangeLine" : {
+            "background-color" : "#befbdd"
         },
         "IncrementalSearch" : {
             "//comment" : "Incremental search highlight",

src/data/extra/themes/native/web.css

@@ -110,10 +110,6 @@ pre code {
     tab-size: 4;
 }
 
-pre code.markdown-metadata {
-    border-left: .5em solid #00897B;
-}
-
 aside {
     display: block;
     float: right;
@@ -137,7 +133,7 @@ hr {
     margin: 1em 0;
     border: none;
     height: 2px;
-    background: #999;
+    background-color: #999;
 }
 
 table {
@@ -178,119 +174,11 @@ table tr th :last-child, table tr td :last-child {
    margin-bottom: 0;
 }
 
-div.mermaid-diagram {
-    margin: 16px 0px 16px 0px;
-    overflow-y: hidden;
-}
-
-div.flowchart-diagram {
-    padding: 0px 5px 0px 5px;
-    margin: 16px 0px 16px 0px;
-    width: fit-content;
-    overflow: hidden;
-}
-
-div.wavedrom-diagram {
-    padding: 0px 5px 0px 5px;
-    margin: 16px 0px 16px 0px;
-    width: fit-content;
-    overflow: hidden;
-}
-
-div.plantuml-diagram {
-    padding: 5px 5px 0px 5px;
-    margin: 16px 0px 16px 0px;
-    width: fit-content;
-    overflow: hidden;
-}
-
-.img-package {
-    text-align: center;
-}
-
-img.img-center {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-span.img-caption {
-    min-width: 20%;
-    max-width: 80%;
-    display: inline-block;
-    padding: 10px;
-    margin: 0 auto;
-    border-bottom: 1px solid #c0c0c0;
-    color: #6c6c6c;
-    text-align: center;
-    line-height: 1.5;
-}
-
-.emoji_zero,.emoji_one,.emoji_two,.emoji_three,.emoji_four,.emoji_five,.emoji_six,.emoji_seven,.emoji_eight,.emoji_nine {
-    margin-left: 5px;
-    margin-right: 8px;
-}
-
-div.preview-hint {
-    opacity: 0.5;
-    margin-top: 30%;
-    margin-bottom: 30%;
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-/* For Highlight.js Line Number */
-table.hljs-ln tr {
-    border: none;
-    background-color: transparent;
-}
-
-table.hljs-ln tr td {
-    border: none;
-    background-color: transparent;
-}
-
-table.hljs-ln tr td.hljs-ln-numbers {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-
-    text-align: center;
-    color: #AAA;
-    border-right: 1px solid #CCC;
-    vertical-align: top;
-    padding-right: 5px;
-    white-space: nowrap;
-}
-
-table.hljs-ln tr td.hljs-ln-code {
-    padding-left: 10px;
-}
-
 ::selection {
-  background: #1976D2;
+  background-color: #1976D2;
   color: white;
 }
 
-.modal-box {
-    background-color: rgb(245, 245, 245);
-    background-color: rgba(245, 245, 245, 0.95);
-}
-
-span.modal-close {
-    color: #666666;
-}
-
-span.modal-close:hover,
-span.modal-close:focus {
-    color: #222222;
-}
-
 #vx-content span.vx-search-match {
     color: #222222;
     background-color: #4db6ac;

src/data/extra/web/css/imageviewer.css

@@ -12,8 +12,7 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
-    background-color: rgb(68, 68, 68);
-    background-color: rgba(68, 68, 68, 0.95);
+    background-color: rgba(51, 56, 66, 0.85);
 }
 
 .vx-modal-content {
@@ -48,7 +47,7 @@ span.vx-modal-close {
     z-index: 1000;
     top: 15px;
     right: 35px;
-    color: #DADADA;
+    color: #abb2bf;
     font-size: 40px;
     font-weight: bold;
     transition: 0.3s;
@@ -56,7 +55,7 @@ span.vx-modal-close {
 
 span.vx-modal-close:hover,
 span.vx-modal-close:focus {
-    color: #EEEEEE;
+    color: #d7dae0;
     text-decoration: none;
     cursor: pointer;
 }

src/data/extra/web/js/graphpreviewer.js

@@ -12,6 +12,10 @@ class GraphPreviewer {
         // Used to decide the width with 100% relative value.
         this.windowWidth = 800;
 
+        this.firstPreview = true;
+
+        this.currentColor = null;
+
         window.addEventListener(
             'resize',
             () => {
@@ -28,6 +32,14 @@ class GraphPreviewer {
             return;
         }
 
+        if (this.firstPreview) {
+            this.firstPreview = false;
+
+            let contentStyle = window.getComputedStyle(this.vnotex.contentContainer);
+            this.currentColor = contentStyle.getPropertyValue('color');
+            console.log('currentColor', this.currentColor);
+        }
+
         if (p_lang === 'flow' || p_lang === 'flowchart') {
             this.vnotex.getWorker('flowchartjs').renderText(this.container,
                 p_text,
@@ -86,6 +98,7 @@ class GraphPreviewer {
             let id = p_id;
             let timeStamp = p_timeStamp;
             return function(p_svgNode) {
+                previewer.fixSvgCurrentColor(p_svgNode);
                 previewer.fixSvgRelativeWidth(p_svgNode);
                 previewer.processSvgAsPng(id, timeStamp, p_svgNode, p_dataSetter);
             };
@@ -167,6 +180,23 @@ class GraphPreviewer {
         }
     }
 
+    // Fix SVG with stroke="currentColor" and fill="currentColor".
+    fixSvgCurrentColor(p_svgNode) {
+        let currentColor = this.currentColor;
+        if (currentColor) {
+            let nodes = p_svgNode.querySelectorAll("g[fill='currentColor']");
+            for (let i = 0; i < nodes.length; ++i) {
+                let node = nodes[i];
+                if (node.getAttribute('stroke') === 'currentColor') {
+                    node.setAttribute('stroke', currentColor);
+                }
+                if (node.getAttribute('fill') === 'currentColor') {
+                    node.setAttribute('fill', currentColor);
+                }
+            }
+        }
+    }
+
     scaleSvg(p_svgNode) {
         let scaleFactor = window.devicePixelRatio;
         if (scaleFactor == 1) {

src/utils/widgetutils.cpp

@@ -29,6 +29,11 @@ void WidgetUtils::setPropertyDynamically(QWidget *p_widget,
                                          const QVariant &p_val)
 {
     p_widget->setProperty(p_prop, p_val);
+    updateStyle(p_widget);
+}
+
+void WidgetUtils::updateStyle(QWidget *p_widget)
+{
     p_widget->style()->unpolish(p_widget);
     p_widget->style()->polish(p_widget);
     p_widget->update();

src/utils/widgetutils.h

@@ -29,6 +29,8 @@ namespace vnotex
                                            const char *p_prop,
                                            const QVariant &p_val = QVariant());
 
+        static void updateStyle(QWidget *p_widget);
+
         static qreal calculateScaleFactor(bool p_update = false);
 
         static bool isScrollBarVisible(QAbstractScrollArea *p_widget, bool p_horizontal);

src/widgets/biaction.cpp

@@ -4,6 +4,8 @@
 #include <QDebug>
 #include <QToolButton>
 
+#include <utils/widgetutils.h>
+
 using namespace vnotex;
 
 BiAction::BiAction(const QIcon &p_icon,
@@ -95,5 +97,6 @@ void BiAction::updateToolButtonPopupMode()
     if (m_toolBtn) {
         m_toolBtn->setPopupMode(menu() ? QToolButton::MenuButtonPopup
                                        : QToolButton::DelayedPopup);
+        WidgetUtils::updateStyle(m_toolBtn);
     }
 }

src/widgets/dialogs/dialog.cpp

@@ -25,6 +25,7 @@ void Dialog::setCentralWidget(QWidget *p_widget)
 {
     Q_ASSERT(!m_centralWidget && p_widget);
     m_centralWidget = p_widget;
+    m_centralWidget->setProperty(PropertyDefs::s_dialogCentralWidget, true);
     m_layout->addWidget(m_centralWidget);
 }
 

src/widgets/dialogs/scrolldialog.cpp

@@ -13,6 +13,8 @@
 
 #include <utils/widgetutils.h>
 
+#include <widgets/propertydefs.h>
+
 using namespace vnotex;
 
 ScrollDialog::ScrollDialog(QWidget *p_parent, Qt::WindowFlags p_flags)
@@ -27,6 +29,7 @@ void ScrollDialog::setCentralWidget(QWidget *p_widget)
 {
     Q_ASSERT(!m_centralWidget && p_widget);
     m_centralWidget = p_widget;
+    m_centralWidget->setProperty(PropertyDefs::s_dialogCentralWidget, true);
     m_scrollArea->setWidget(p_widget);
 }
 

src/widgets/editors/markdownvieweradapter.cpp

@@ -118,7 +118,12 @@ void MarkdownViewerAdapter::scrollToLine(int p_lineNumber)
     if (p_lineNumber == -1) {
         return;
     }
-    Q_ASSERT(m_viewerReady);
+
+    if (!m_viewerReady) {
+        qWarning() << "Markdown viewer is not ready";
+        return;
+    }
+
     m_topLineNumber = -1;
     emit editLineNumberUpdated(p_lineNumber);
 }

src/widgets/mainwindow.cpp

@@ -156,6 +156,14 @@ void MainWindow::setupDocks()
         tabifyDockWidget(m_docks[i - 1], m_docks[i]);
     }
 
+    for (auto dock : m_docks) {
+        connect(dock, &QDockWidget::visibilityChanged,
+                this, [this]() {
+                    updateTabBarStyle();
+                    emit layoutChanged();
+                });
+    }
+
     // Activate the first dock.
     activateDock(m_docks[0]);
 }
@@ -163,7 +171,7 @@ void MainWindow::setupDocks()
 void MainWindow::activateDock(QDockWidget *p_dock)
 {
     p_dock->show();
-    Q_FOREACH(QTabBar* tabBar, this->findChildren<QTabBar*>()) {
+    Q_FOREACH(QTabBar* tabBar, this->findChildren<QTabBar*>(QString(), Qt::FindDirectChildrenOnly)) {
         bool found = false;
         for (int i = 0; i < tabBar->count(); ++i) {
             if (p_dock == reinterpret_cast<QWidget *>(tabBar->tabData(i).toULongLong())) {
@@ -192,9 +200,6 @@ void MainWindow::setupNavigationDock()
     dock->setWidget(m_navigationToolBox);
     dock->setFocusProxy(m_navigationToolBox);
     addDockWidget(Qt::LeftDockWidgetArea, dock);
-
-    connect(dock, &QDockWidget::visibilityChanged,
-            this, &MainWindow::layoutChanged);
 }
 
 void MainWindow::setupOutlineDock()
@@ -209,9 +214,6 @@ void MainWindow::setupOutlineDock()
     dock->setWidget(m_outlineViewer);
     dock->setFocusProxy(m_outlineViewer);
     addDockWidget(Qt::LeftDockWidgetArea, dock);
-
-    connect(dock, &QDockWidget::visibilityChanged,
-            this, &MainWindow::layoutChanged);
 }
 
 void MainWindow::setupNavigationToolBox()
@@ -573,3 +575,10 @@ void MainWindow::quitApp()
     m_requestQuit = 0;
     close();
 }
+
+void MainWindow::updateTabBarStyle()
+{
+    Q_FOREACH(QTabBar* tabBar, this->findChildren<QTabBar*>(QString(), Qt::FindDirectChildrenOnly)) {
+        tabBar->setDrawBase(false);
+    }
+}

src/widgets/mainwindow.h

@@ -70,6 +70,8 @@ namespace vnotex
     private slots:
         void closeOnQuit();
 
+        void updateTabBarStyle();
+
     private:
         // Index in m_docks.
         enum DockIndex

src/widgets/propertydefs.cpp

@@ -8,4 +8,8 @@ const char *PropertyDefs::s_toolButtonWithoutMenuIndicator = "NoMenuIndicator";
 
 const char *PropertyDefs::s_dangerButton = "DangerButton";
 
+const char *PropertyDefs::s_dialogCentralWidget = "DialogCentralWidget";
+
+const char *PropertyDefs::s_viewSplitCornerWidget = "ViewSplitCornerWidget";
+
 const char *PropertyDefs::s_state = "State";

src/widgets/propertydefs.h

@@ -15,6 +15,10 @@ namespace vnotex
 
         static const char *s_dangerButton;
 
+        static const char *s_dialogCentralWidget;
+
+        static const char *s_viewSplitCornerWidget;
+
         // Values: info/warning/error.
         static const char *s_state;
     };

src/widgets/viewsplit.cpp

@@ -109,6 +109,7 @@ void ViewSplit::setupCornerWidget()
 
     // Container.
     auto widget = new QWidget(this);
+    widget->setProperty(PropertyDefs::s_viewSplitCornerWidget, true);
     auto layout = new QHBoxLayout(widget);
     layout->setContentsMargins(0, 0, 0, 0);
 
@@ -187,6 +188,8 @@ bool ViewSplit::eventFilter(QObject *p_object, QEvent *p_event)
 void ViewSplit::setupTabBar()
 {
     auto bar = tabBar();
+    // If DrawBase is true, there is a border that we could not control the style.
+    bar->setDrawBase(false);
     bar->setContextMenuPolicy(Qt::CustomContextMenu);
 
     // Middle click to close tab.