refine themes

src/core/theme.cpp

@@ -5,6 +5,7 @@
 #include <QSettings>
 #include <QFileInfo>
 #include <QJsonDocument>
+#include <QApplication>
 
 #include "exception.h"
 #include <utils/fileutils.h>
@@ -71,7 +72,7 @@ Theme *Theme::fromFolder(const QString &p_folder)
     Q_ASSERT(!p_folder.isEmpty());
     auto obj = readPaletteFile(p_folder);
     auto metadata = readMetadata(obj);
-    auto paletteObj = translatePalette(obj);
+    auto paletteObj = translatePalette(obj, metadata.m_backfillSystemPalette);
     return new Theme(p_folder,
                      metadata,
                      paletteObj);
@@ -86,11 +87,68 @@ Theme::Metadata Theme::readMetadata(const Palette &p_obj)
     data.m_revision = metaObj[QStringLiteral("revision")].toInt();
     data.m_editorHighlightTheme = metaObj[QStringLiteral("editor-highlight-theme")].toString();
     data.m_markdownEditorHighlightTheme = metaObj[QStringLiteral("markdown-editor-highlight-theme")].toString();
+    data.m_backfillSystemPalette = metaObj[QStringLiteral("backfill-system-palette")].toBool(false);
 
     return data;
 }
 
-Theme::Palette Theme::translatePalette(const QJsonObject &p_obj)
+QJsonObject Theme::backfillSystemPalette(QJsonObject p_obj)
+{
+    const auto qpalette = QApplication::palette();
+    // Active.
+    {
+        QJsonObject obj;
+        obj["window"] = qpalette.color(QPalette::Active, QPalette::Window).name();
+        obj["window_text"] = qpalette.color(QPalette::Active, QPalette::WindowText).name();
+        obj["base"] = qpalette.color(QPalette::Active, QPalette::Base).name();
+        obj["alternate_base"] = qpalette.color(QPalette::Active, QPalette::AlternateBase).name();
+        obj["text"] = qpalette.color(QPalette::Active, QPalette::Text).name();
+        obj["button"] = qpalette.color(QPalette::Active, QPalette::Button).name();
+        obj["button_text"] = qpalette.color(QPalette::Active, QPalette::ButtonText).name();
+        obj["bright_text"] = qpalette.color(QPalette::Active, QPalette::BrightText).name();
+        obj["light"] = qpalette.color(QPalette::Active, QPalette::Light).name();
+        obj["midlight"] = qpalette.color(QPalette::Active, QPalette::Midlight).name();
+        obj["dark"] = qpalette.color(QPalette::Active, QPalette::Dark).name();
+        obj["highlight"] = qpalette.color(QPalette::Active, QPalette::Highlight).name();
+        obj["highlighted_text"] = qpalette.color(QPalette::Active, QPalette::HighlightedText).name();
+        obj["link"] = qpalette.color(QPalette::Active, QPalette::Link).name();
+        obj["link_visited"] = qpalette.color(QPalette::Active, QPalette::LinkVisited).name();
+
+        p_obj["active"] = obj;
+    }
+
+    // Inactive.
+    {
+        QJsonObject obj;
+        p_obj["inactive"] = obj;
+    }
+
+    // Disabled.
+    {
+        QJsonObject obj;
+        obj["window"] = qpalette.color(QPalette::Disabled, QPalette::Window).name();
+        obj["window_text"] = qpalette.color(QPalette::Disabled, QPalette::WindowText).name();
+        obj["base"] = qpalette.color(QPalette::Disabled, QPalette::Base).name();
+        obj["alternate_base"] = qpalette.color(QPalette::Disabled, QPalette::AlternateBase).name();
+        obj["text"] = qpalette.color(QPalette::Disabled, QPalette::Text).name();
+        obj["button"] = qpalette.color(QPalette::Disabled, QPalette::Button).name();
+        obj["button_text"] = qpalette.color(QPalette::Disabled, QPalette::ButtonText).name();
+        obj["bright_text"] = qpalette.color(QPalette::Disabled, QPalette::BrightText).name();
+        obj["light"] = qpalette.color(QPalette::Disabled, QPalette::Light).name();
+        obj["midlight"] = qpalette.color(QPalette::Disabled, QPalette::Midlight).name();
+        obj["dark"] = qpalette.color(QPalette::Disabled, QPalette::Dark).name();
+        obj["highlight"] = qpalette.color(QPalette::Disabled, QPalette::Highlight).name();
+        obj["highlighted_text"] = qpalette.color(QPalette::Disabled, QPalette::HighlightedText).name();
+        obj["link"] = qpalette.color(QPalette::Disabled, QPalette::Link).name();
+        obj["link_visited"] = qpalette.color(QPalette::Disabled, QPalette::LinkVisited).name();
+
+        p_obj["disabled"] = obj;
+    }
+
+    return p_obj;
+}
+
+Theme::Palette Theme::translatePalette(const QJsonObject &p_obj, bool p_backfillSystemPalette)
 {
     const QString paletteSection("palette");
     const QString baseSection("base");
@@ -99,7 +157,12 @@ Theme::Palette Theme::translatePalette(const QJsonObject &p_obj)
     // @p_palette may contain referenced definitons: derived=@base#sub#sub2.
     Palette palette;
 
-    palette[paletteSection] = p_obj[paletteSection];
+    if (p_backfillSystemPalette) {
+        palette[paletteSection] = backfillSystemPalette(p_obj[paletteSection].toObject());
+    } else {
+        palette[paletteSection] = p_obj[paletteSection];
+    }
+
     palette[baseSection] = p_obj[baseSection];
     palette[widgetsSection] = p_obj[widgetsSection];
 
@@ -162,8 +225,9 @@ QPair<bool, int> Theme::translatePaletteObjectOnce(const Palette &p_palette,
                 }
 
                 Q_ASSERT_X(refVal.isString(), "translatePaletteObjectOnce", val.toString().toStdString().c_str());
-                it.value() = refVal.toString();
-                if (isRef(refVal.toString())) {
+                const auto refValStr = refVal.toString();
+                it.value() = refValStr;
+                if (isRef(refValStr)) {
                     // It is another ref again.
                     ++unresolvedRefs;
                 }

src/core/theme.h

@@ -70,6 +70,9 @@ namespace vnotex
             // If not specified, will use m_editorHighlightTheme.
             // Valid only when KSyntaxCodeBlockHighlighter is used.
             QString m_markdownEditorHighlightTheme;
+
+            // Whether this theme needs to backfill current standard palette to the theme palette.
+            bool m_backfillSystemPalette = false;
         };
 
         typedef QJsonObject Palette;
@@ -86,7 +89,9 @@ namespace vnotex
 
         static Metadata readMetadata(const QJsonObject &p_obj);
 
-        static Theme::Palette translatePalette(const QJsonObject &p_obj);
+        static Theme::Palette translatePalette(const QJsonObject &p_obj, bool p_backfillSystemPalette);
+
+        static QJsonObject backfillSystemPalette(QJsonObject p_obj);
 
         static void translatePaletteObject(const Palette &p_palette,
                                            QJsonObject &p_obj,

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

@@ -280,7 +280,7 @@ QMenu::icon {
 }
 
 QMenu::item {
-    padding: 5px 30px 5px 30px;
+    padding: 5px 22px 5px 22px;
     border: 1px solid transparent;
 }
 

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

@@ -10,7 +10,6 @@ code[class*="language-"],
 pre[class*="language-"] {
     color: black;
     background: none;
-    text-shadow: 0 1px white;
     font-size: 1em;
     text-align: left;
     white-space: pre;
@@ -32,15 +31,15 @@ pre[class*="language-"] {
 pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
     text-shadow: none;
-    background-color: #1976D2;
-    color: white;
+    background-color: #1976d2;
+    color: #ffffff;
 }
 
 pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 code[class*="language-"]::selection, code[class*="language-"] ::selection {
     text-shadow: none;
-    background-color: #1976D2;
-    color: white;
+    background-color: #1976d2;
+    color: #ffffff;
 }
 
 @media print {
@@ -59,7 +58,7 @@ pre[class*="language-"] {
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-    background: #f5f2f0;
+    background: #ede8e4;
 }
 
 /* Inline code */
@@ -109,8 +108,6 @@ pre[class*="language-"] {
 .language-css .token.string,
 .style .token.string {
     color: #9a6e3a;
-    /* This background color was intended by the author of this theme. */
-    background: hsla(0, 0%, 100%, .5);
 }
 
 .token.atrule,

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

@@ -27,7 +27,7 @@ QWidget[HitSettingWidget="true"] {
 
 /* ToolBox */
 vnotex--ToolBox QWidget[ToolBoxTitle="true"] {
-    border-bottom: 2px solid @widgets#toolbox#title#border;
+    border-bottom: 2px solid;
     margin: 0px;
     padding: 0px;
 }
@@ -40,9 +40,6 @@ vnotex--ToolBox QToolButton[ToolBoxTitleButton="true"] {
 
 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 */
@@ -69,7 +66,6 @@ QMainWindow::separator {
     width: 1px;
     /* For horizontal */
     height: 1px;
-    background-color: @widgets#qmainwindow#separator#bg;
 }
 
 /* NotebookExplorer */
@@ -114,7 +110,6 @@ vnotex--DragDropAreaIndicator {
 }
 
 vnotex--DragDropAreaIndicator QLabel {
-    color: @widgets#dragdropareaindicator#fg;
     font-size: 12pt;
     font-weight: bold;
 }
@@ -131,3 +126,20 @@ vnotex--ViewSplit QTabBar[ViewSplitFlash="true"]::tab:selected {
 vnotex--EntryPopup {
     border: 1px solid @widgets#unitedentry#popup#border;
 }
+
+/* QWidgetAction item */
+vnotex--LabelWithButtonsWidget {
+    background-color: @widgets#qmenu#bg;
+}
+
+vnotex--LabelWithButtonsWidget:hover {
+    background-color: @widgets#qmenu#item#selected#bg;
+}
+
+vnotex--LabelWithButtonsWidget QLabel {
+    color: @widgets#qmenu#fg;
+}
+
+vnotex--LabelWithButtonsWidget QLabel:hover {
+    color: @widgets#qmenu#item#selected#fg;
+}

src/data/extra/themes/native/palette.json

@@ -1,6 +1,6 @@
 {
     "metadata" : {
-        "revision" : 0,
+        "revision" : 1,
         "//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" : "Default",
@@ -10,33 +10,39 @@
         "markdown-editor-highlight-theme" : "Markdown Default",
         "display_name" : "Native",
         "//comment" : "Display name for different locales",
-        "display_name_zh_CN" : "原素"
+        "display_name_zh_CN" : "原素",
+        "backfill-system-palette": true
+    },
+    "palette" : {
+        "//comment" : "VNote will backfill the standard system palette."
     },
     "base" : {
         "normal" : {
-            "fg" : "#31373c",
-            "border" : "@base#lighter#fg"
+            "fg" : "@palette#active#window_text",
+            "border" : "@palette#active#dark",
+            "bg" : "@palette#active#window"
         },
-        "lighter" : {
-            "fg" : "#babdc1"
+        "selected" : {
+            "fg" : "@palette#active#highlighted_text",
+            "bg" : "@palette#active#highlight"
         },
         "error" : {
             "fg" : "#b71c1c"
         },
         "warning" : {
-            "fg" : "#880e4f"
+            "fg" : "#fc766a"
         },
         "info" : {
-            "fg" : "#283593"
+            "fg" : "#00a4cc"
         },
         "danger" : {
             "fg": "#f5f5f5",
-            "bg": "#c9302c"
+            "bg": "#ed2b33"
         },
         "icon" : {
-            "fg" : "#434b52",
+            "fg" : "@palette#active#text",
             "disabled" : {
-                "fg" : "@base#lighter#fg"
+                "fg" : "@palette#disabled#text"
             },
             "warning" : {
                 "fg" : "@base#warning#fg"
@@ -49,8 +55,8 @@
             }
         },
         "master" : {
-            "fg" : "#fbffff",
-            "bg" : "#535c65"
+            "fg" : "#fcf6f5",
+            "bg" : "#89abe3"
         }
     },
     "widgets" : {
@@ -106,28 +112,33 @@
         },
         "viewsplit" : {
             "action_button" : {
-                "fg" : "#808080",
+                "fg" : "@palette#active#dark",
                 "active" : {
                     "fg" : "@base#icon#fg"
                 }
             },
             "flash" : {
-                "bg" : "@base#lighter#fg"
-            }
-        },
-        "qmainwindow" : {
-            "separator" : {
-                "bg" : "@base#normal#border"
+                "bg" : "@base#info#fg"
             }
         },
         "dragdropareaindicator" : {
-            "fg" : "@base#normal#fg",
-            "border" : "@widgets#dragdropareaindicator#fg"
+            "border" : "@base#normal#border"
         },
         "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"
+                }
+            }
+        },
         "quickselector" : {
             "item_icon" : {
                 "fg" : "@base#master#bg",

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

@@ -1,14 +1,16 @@
 {
     "metadata" : {
         "revision" : 0,
-        "name" : "Default",
+        "name" : "Native",
         "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
+            "font-size" : 12,
+            "text-color" : "#222222",
+            "background-color" : "#ffffff"
         },
         "CursorLine" : {
             "background-color" : "#c5cae9"
@@ -26,7 +28,7 @@
         },
         "IndicatorsBorder" : {
             "text-color" : "#aaaaaa",
-            "background-color" : "#eeeeee"
+            "background-color" : "#fafafa"
         },
         "CurrentLineNumber" : {
             "text-color" : "#222222"
@@ -64,7 +66,9 @@
         "Text" : {
             "//comment" : "Support a list of fonts separated by ,",
             "font-family" : "YaHei Consolas Hybrid, 冬青黑体, Microsoft YaHei, 微软雅黑, Microsoft YaHei UI, WenQuanYi Micro Hei, 文泉驿雅黑, Dengxian, 等线体, STXihei, 华文细黑, Liberation Sans, Droid Sans, NSimSun, 新宋体, SimSun, 宋体, Verdana, Helvetica, Tahoma, Arial, Geneva, Georgia, Times New Roman",
-            "font-size" : 12
+            "font-size" : 12,
+            "text-color" : "#222222",
+            "background-color" : "#ffffff"
         }
     },
     "markdown-syntax-styles" : {

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

@@ -4,6 +4,7 @@ body {
     color: #222222;
     line-height: 1.5;
     padding: 16px;
+    background-color: #ffffff;
     font-size: 16px;
 }
 
@@ -55,11 +56,10 @@ a {
 
 a:hover {
     text-decoration: underline;
-    color: #ff6600;
 }
 
 a:visited {
-    color: purple;
+    color: #800080;
 }
 
 ul, ol {
@@ -91,7 +91,7 @@ pre {
 
 code {
     font-family: "YaHei Consolas Hybrid", Consolas, Monaco, "Andale Mono", Monospace, "Courier New";
-    color: #8E24AA;
+    color: #8e24aa;
     word-break: break-word;
 }
 
@@ -100,7 +100,7 @@ pre code {
     padding-left: 0.5em;
     padding-right: 0.5em;
     color: #222222;
-    background-color: #E0E0E0;
+    background-color: #e0e0e0;
     line-height: 1.5;
     font-family: "YaHei Consolas Hybrid", Consolas, Monaco, "Andale Mono", Monospace, "Courier New";
     white-space: pre;
@@ -116,14 +116,14 @@ aside {
 }
 
 blockquote {
-    color: #666;
-    border-left: .5em solid #7A7A7A;
+    color: #666666;
+    border-left: .5em solid #7a7a7a;
     padding: 0 1em;
     margin-left: 0;
 }
 
 blockquote p {
-    color: #666;
+    color: #666666;
 }
 
 hr {
@@ -132,7 +132,7 @@ hr {
     margin: 1em 0;
     border: none;
     height: 2px;
-    background-color: #999;
+    background-color: #999999;
 }
 
 table {
@@ -143,13 +143,13 @@ table {
 
 table tr {
    border-top: 1px solid #cccccc;
-   background-color: white;
+   background-color: #ffffff;
    margin: 0;
    padding: 0;
 }
 
 table tr:hover {
-   background-color: #f8f8f8;
+   background-color: #dadada;
 }
 
 table tr th {
@@ -173,9 +173,35 @@ 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;
+}
+
+div.vx-flowchartjs-graph {
+    padding: 0px 5px 0px 5px;
+    margin: 16px 0px 16px 0px;
+    width: fit-content;
+    overflow: hidden;
+}
+
+div.vx-wavedrom-graph {
+    padding: 0px 5px 0px 5px;
+    margin: 16px 0px 16px 0px;
+    width: fit-content;
+    overflow: hidden;
+}
+
+div.vx-plantuml-graph {
+    padding: 5px 5px 0px 5px;
+    margin: 16px 0px 16px 0px;
+    width: fit-content;
+    overflow: hidden;
+}
+
 ::selection {
-  background-color: #1976D2;
-  color: white;
+  background-color: #1976d2;
+  color: #ffffff;
 }
 
 #vx-content span.vx-search-match {

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

@@ -299,7 +299,7 @@ QMenu::icon {
 }
 
 QMenu::item {
-    padding: 5px 30px 5px 30px;
+    padding: 5px 22px 5px 22px;
     border: 1px solid transparent;
 }
 

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

@@ -1,7 +1,7 @@
 {
     "metadata" : {
         "revision" : 0,
-        "name" : "Moonlight",
+        "name" : "Pure",
         "type" : "vtextedit"
     },
     "editor-styles" : {

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

@@ -16,33 +16,36 @@ h1, h2, h3, h4, h5, h6 {
     padding: 0;
 }
 
+p, blockquote, ul, ol, dl, table {
+    margin: 0.4em 0;
+}
+
 p {
     padding: 0;
-    margin-bottom: 16px;
 }
 
 h1 {
-    font-size: 26px;
+    font-size: 2rem;
 }
 
 h2 {
-    font-size: 24px;
+    font-size: 1.75rem;
 }
 
 h3 {
-    font-size: 22px;
+    font-size: 1.4rem;
 }
 
 h4 {
-    font-size: 20px;
+    font-size: 1.2rem;
 }
 
 h5 {
-    font-size: 19px;
+    font-size: 1rem;
 }
 
 h6 {
-    font-size: 18px;
+    font-size: 1rem;
 }
 
 a {
@@ -59,7 +62,7 @@ a:hover {
 }
 
 a:visited {
-    color: #800080;
+    color: purple;
 }
 
 ul, ol {
@@ -119,7 +122,6 @@ blockquote {
     color: #666666;
     border-left: .5em solid #7a7a7a;
     padding: 0 1em;
-    margin-left: 0;
 }
 
 blockquote p {
@@ -282,3 +284,84 @@ div.vx-plantuml-graph {
     color: #222222;
     background-color: #66bb6a;
 }
+
+.vx-alert{
+    background-color: #E2EDF3 !important;
+    padding: 12px 24px 12px 30px !important;
+    border-radius:0 !important;
+    border:none !important;
+    border-left: 4px solid #498BA7 !important;
+    color: inherit !important;
+}
+
+.vx-alert::before
+{
+    background-color: #498BA7;
+    border-radius: 100%;
+    color: #fff;
+    content: '!';
+    font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+    font-size: 14px;
+    font-weight: bold;
+    left: -12px;
+    line-height: 20px;
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    text-align: center;
+    top: 14px;
+}
+
+.alert-success,.alert-s{
+    border-color: #42B983 !important;
+    background-color: #D4EDDA !important;
+}
+
+.alert-success::before,.alert-s::before{
+    background-color: #42B983;
+}
+
+.alert-warning,.alert-w{
+    border-color: #ffa502 !important;
+    background-color: #fff3cd !important;
+}
+
+.alert-warning:before,.alert-w::before{
+    background-color: #ffa502;
+}
+
+.alert-info,.alert-i{
+    border-color: #70a1ff !important;
+    background-color: #CCE5FF !important;
+}
+
+.alert-info:before,.alert-i::before{
+    background-color: #70a1ff;
+}
+
+.alert-danger,.alert-d{
+    border-color: #ff4757 !important;
+    background-color: #F8D7DA !important;
+}
+
+.alert-danger:before,.alert-d::before{
+    background-color: #ff4757;
+}
+
+.alert-light{
+    border-color: #C1C1C1 !important;
+    background-color: #f8f8f8 !important;
+}
+
+.alert-light:before{
+    background-color: #C1C1C1;
+}
+
+.alert-dark{
+    border-color: #484848 !important;
+    background-color: #F0F0F0 !important;
+}
+
+.alert-dark:before{
+    background-color: #484848;
+}

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

@@ -276,7 +276,7 @@ QMenu::icon {
 }
 
 QMenu::item {
-    padding: 5px 30px 5px 30px;
+    padding: 5px 22px 5px 22px;
     border: 1px solid transparent;
 }
 

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

@@ -276,7 +276,7 @@ QMenu::icon {
 }
 
 QMenu::item {
-    padding: 5px 30px 5px 30px;
+    padding: 5px 22px 5px 22px;
     border: 1px solid transparent;
 }
 

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

@@ -276,7 +276,7 @@ QMenu::icon {
 }
 
 QMenu::item {
-    padding: 5px 30px 5px 30px;
+    padding: 5px 22px 5px 22px;
     border: 1px solid transparent;
 }
 

src/widgets/mainwindow.cpp

@@ -21,7 +21,6 @@
 #include <QProgressDialog>
 #include <QHotkey>
 
-#include "toolbox.h"
 #include "notebookexplorer.h"
 #include "vnotex.h"
 #include "notebookmgr.h"

src/widgets/mainwindow.h

@@ -17,7 +17,6 @@ class QTextEdit;
 
 namespace vnotex
 {
-    class ToolBox;
     class NotebookExplorer;
     class TagExplorer;
     class ViewArea;
@@ -163,8 +162,6 @@ namespace vnotex
 
         DockWidgetHelper m_dockWidgetHelper;
 
-        ToolBox *m_navigationToolBox = nullptr;
-
         NotebookExplorer *m_notebookExplorer = nullptr;
 
         TagExplorer *m_tagExplorer = nullptr;