feat: use css var in plugins

Author: SSShooter

src/plugin/contextMenu.less

@@ -1,55 +1,52 @@
-.mind-elixir .context-menu {
-  // TODO use CSS variables
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 99;
-  .menu-list {
-    position: fixed;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    font: 300 15px 'Roboto', sans-serif;
-    color: #333;
-    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.2);
-    * {
-      transition: color 0.4s, background-color 0.4s;
-    }
-    li {
-      min-width: 150px;
-      overflow: hidden;
-      white-space: nowrap;
-      padding: 6px 10px;
-      background-color: #fff;
-      border-bottom: 1px solid #ecf0f1;
-      a {
-        color: #333;
-        text-decoration: none;
-      }
-      &.disabled {
-        color: rgb(94, 94, 94);
-        background-color: rgb(247, 247, 247);
-        &:hover {
-          cursor: default;
-          background-color: rgb(247, 247, 247);
-        }
-      }
-      &:hover {
-        cursor: pointer;
-        background-color: #ecf0f1;
-      }
-      &:first-child {
-        border-radius: 5px 5px 0 0;
-      }
-      &:last-child {
-        border-bottom: 0;
-        border-radius: 0 0 5px 5px;
-      }
-      span:last-child {
-        float: right;
-      }
-    }
-  }
-}
+.mind-elixir .context-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+  .menu-list {
+    position: fixed;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font: 300 15px 'Roboto', sans-serif;
+    color: var(--panel-color);
+    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.2);
+    li {
+      min-width: 200px;
+      overflow: hidden;
+      white-space: nowrap;
+      padding: 10px 14px;
+      background: var(--panel-bgcolor);
+      border-bottom: 1px solid var(--panel-border-color);
+      a {
+        color: #333;
+        text-decoration: none;
+      }
+      &.disabled {
+        display: none;
+        color: rgb(94, 94, 94);
+        background-color: rgb(247, 247, 247);
+        &:hover {
+          cursor: default;
+          background-color: rgb(247, 247, 247);
+        }
+      }
+      &:hover {
+        cursor: pointer;
+        filter: brightness(0.9);
+      }
+      &:first-child {
+        border-radius: 5px 5px 0 0;
+      }
+      &:last-child {
+        border-bottom: 0;
+        border-radius: 0 0 5px 5px;
+      }
+      span:last-child {
+        float: right;
+      }
+    }
+  }
+}

src/plugin/contextMenu.ts

@@ -76,12 +76,14 @@ export default function (mind: MindElixirInstance, option: any) {
         focus.className = 'disabled'
         up.className = 'disabled'
         down.className = 'disabled'
+        add_parent.className = 'disabled'
         add_sibling.className = 'disabled'
         remove_child.className = 'disabled'
       } else {
         focus.className = ''
         up.className = ''
         down.className = ''
+        add_parent.className = ''
         add_sibling.className = ''
         remove_child.className = ''
       }

src/plugin/toolBar.less

@@ -1,13 +1,8 @@
-@media (prefers-color-scheme: dark) {
-  .mind-elixir-toolbar {
-    background: #2d3748 !important;
-    color: #fff !important;
-  }
-}
 .mind-elixir-toolbar {
   font-family: iconfont;
   position: absolute;
-  background: #fff;
+  color: var(--panel-color);
+  background: var(--panel-bgcolor);
   padding: 10px;
   border-radius: 5px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);