update themes.

WuErPing · Apr 8, 2020 · 735ffd1 · 735ffd1
1 parent c5e7126
commit 735ffd1
Show file tree

Hide file tree

Showing 33 changed files with 24,322 additions and 520 deletions.
diff --git a/app-ui/App.jsx b/app-ui/App.jsx
@@ -40,8 +40,11 @@ export default class App extends React.Component {
 
     Agent.pact('getPref')
       .then(pref => {
-        this.setState({theme: pref.theme || 'light'})
-        document.body.className += ' theme-' + pref.theme
+        let theme = pref.theme || 'light'
+        this.setState({theme})
+        document.body.className += ' theme-' + theme
+        document.querySelector(`link[data-theme=${theme}]`).disabled = false
+        document.body.style.visibility = 'visible'
 
         return pref.user_language || 'en'
       })

diff --git a/app-ui/App.less b/app-ui/App.less
@@ -1,17 +1,19 @@
 //@import "../node_modules/antd/dist/antd.less";
 @import "styles/cfg";
-@import "./styles/themes/light";
-@import "./styles/themes/dark";
 
 html, body {
   margin: 0;
   padding: 0;
   height: 100%;
   font-size: 12px;
   font-family: Arial, Helvetica, sans-serif;
-  color: @font_color;
   line-height: 20px;
-  background: #fff;
+  color: var(--swh-font-color);
+  background: var(--swh-bg-color);
+}
+
+body {
+  visibility: hidden;
 }
 
 a {

diff --git a/app-ui/Panel/Buttons.less b/app-ui/Panel/Buttons.less
@@ -7,9 +7,9 @@
   width: @panel-width - @m * 2;
   height: 30px;
   line-height: 30px;
-  background: @bg_left;
+  //background: @bg_left;
   margin: 0 @m;
-  border-top: 1px solid @bd_color * 1.1;
+  border-top: 1px solid var(--swh-border-color);
   -webkit-app-region: drag;
 }
 
@@ -22,11 +22,11 @@
   display: inline-block;
   text-align: center;
   width: 20px;
-  color: @font_color_left;
+  color: var(--swh-font-color);
   text-decoration: none;
 
   &:hover {
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--swh-bg-color-hover);
   }
 }
 
@@ -51,18 +51,7 @@
   .icon-search {
     padding: 0 8px;
     &.on {
-      background: @bg_left_search;
+      background: var(--swh-bg-color-hover);
     }
   }
 }
-
-:global(.theme-dark) {
-  .root {
-    background: @bg_left_dark;
-    border-top-color: @bd_color_dark;
-  }
-
-  .btn-add {
-    color: @font_color_left_dark;
-  }
-}
diff --git a/app-ui/Panel/List.less b/app-ui/Panel/List.less
@@ -35,7 +35,7 @@
 }
 
 .sort-bg {
-  background: @sorg-bg-color;
+  //background: @sorg-bg-color;
 }
 
 :global(.platform-darwin) {

diff --git a/app-ui/Panel/ListItem.less b/app-ui/Panel/ListItem.less
@@ -22,7 +22,7 @@
     display: block;
     width: 800px;
     height: 30px;
-    background: @bg_color_selected;
+    background: var(--swh-bg-color-selected);
     //opacity: 0.5;
     position: absolute;
     right: -5px;
@@ -86,7 +86,7 @@
 }
 
 .sort-bg {
-  background: @sorg-bg-color;
+  //background: @sorg-bg-color;
 }
 
 .sys-hosts {
@@ -105,25 +105,3 @@
     margin-top: 0;
   }
 }
-
-:global(.theme-dark) {
-  .list-item {
-    &.selected {
-      //background: @bg_left_dark * 1.1;
-
-      span {
-        color: #fff;
-      }
-
-      .item-icon {
-        color: #fff;
-      }
-
-      &:hover {
-        .icon-edit {
-          color: #fff;
-        }
-      }
-    }
-  }
-}
diff --git a/app-ui/Panel/Menu.less b/app-ui/Panel/Menu.less
@@ -17,8 +17,8 @@
 
 .items {
   min-height: 100px;
-  background: #fff;
-  border: 1px solid @bd_color;
+  background: var(--swh-bg-color);
+  border: 1px solid var(--swh-border-color);
   padding: 0 4px;
 }
 
@@ -28,14 +28,14 @@
   cursor: pointer;
 
   &:hover {
-    color: @font_color * 1.2;
+    color: var(--swh-font-color-hl);
   }
 }
 
 .sep {
   height: 1px;
   cursor: default;
-  background: @bd_color * 1.2;
+  background: var(--swh-border-color);
 }
 
 .item_icon {
@@ -50,9 +50,9 @@
 .handler {
   @w: @menu_handler_size + 6px;
   @h: @menu_handler_size - 4px;
-  background: #fff;
-  border: 1px solid @bd_color;
-  border-top-color: #fff;
+  background: var(--swh-bg-color);
+  border: 1px solid var(--swh-border-color);
+  border-top-color: var(--swh-bg-color);
   position: absolute;
   width: @w;
   height: @h;
@@ -66,26 +66,3 @@
     margin-left: 5px;
   }
 }
-
-:global(.theme-dark) {
-  .items,
-  .handler {
-    background-color: @editor_bg_dark;
-    border-color: @bd_color_dark;
-    color: @font_color_dark;
-  }
-
-  .item {
-    &:hover {
-      color: @font_color_dark * 1.2;
-    }
-  }
-
-  .sep {
-    background-color: @bd_color_dark * 0.8;
-  }
-
-  .handler {
-    border-top-color: @editor_bg_dark;
-  }
-}
diff --git a/app-ui/Panel/index.less b/app-ui/Panel/index.less
@@ -10,8 +10,8 @@
   z-index: 10;
   //height: 100%;
   overflow: hidden;
-  background: @bg_left;
-  color: @font_color_left;
+  //background: @bg_left;
+  //color: @font_color_left;
   user-select: none;
   -webkit-app-region: drag;
 
@@ -30,20 +30,3 @@
   height: 36px;
   -webkit-app-region: drag;
 }
-
-:global(.theme-dark) {
-  .root {
-    background: @bg_left_dark;
-    color: @font_color_left_dark;
-  }
-
-  :global {
-    .ant-tree {
-      color: @font_color_left_dark;
-
-      li .ant-tree-node-content-wrapper {
-        color: @font_color_left_dark;
-      }
-    }
-  }
-}
diff --git a/app-ui/about/About.less b/app-ui/about/About.less
@@ -40,7 +40,7 @@
 }
 
 .version {
-  color: #999;
+  color: var(--swh-font-color-weak);
   margin-bottom: 5px;
 }
 

diff --git a/app-ui/content/Content.less b/app-ui/content/Content.less
@@ -15,11 +15,11 @@
   top: 5px;
   right: 10px;
   opacity: 0.5;
-  background: #fff;
+  background: var(--swh-bg-color);
 
   span[role=img] {
     display: none;
-    color: #666;
+    color: var(--swh-font-color-weak);
     margin-left: 5px;
 
     &.show {
@@ -38,7 +38,7 @@
 }
 
 .loading {
-  color: #f00;
+  color: var(--swh-font-color);
   padding: 10px;
 }
 
@@ -51,7 +51,7 @@
   right: 0;
   padding: 4px 40px;
   text-align: center;
-  background: rgba(153, 0, 0, 0.5);
+  background: var(--swh-editor-error);
   color: #fff;
   transition: 0.5s;
 
@@ -65,7 +65,7 @@
   left: @panel-width;
   right: 0;
   bottom: 0;
-  background-color: #fff;
+  background-color: var(--swh-bg-color);
   z-index: 10;
 }
 
@@ -74,18 +74,3 @@
     right: 20px;
   }
 }
-
-:global(.theme-dark) {
-  .inform {
-    background: @editor_bg_dark;
-
-    span[role=img] {
-      color: #aaa;
-    }
-  }
-
-  .search-bar-wrapper {
-    background-color: @editor_bg_dark * 1.1;
-    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2);
-  }
-}
diff --git a/app-ui/content/Editor.jsx b/app-ui/content/Editor.jsx
@@ -13,7 +13,7 @@ import classnames from 'classnames'
 import m_kw from './kw'
 import Agent from '../Agent'
 import * as func from '../libs/search'
-import 'codemirror/lib/codemirror.css'
+//import 'codemirror/lib/codemirror.css'
 import styles from './Editor.less'
 
 import modeHosts from './cm_hl'

diff --git a/app-ui/content/Editor.less b/app-ui/content/Editor.less
@@ -5,13 +5,13 @@
   box-sizing: border-box;
   font-family: @font-editor;
   padding: 4px 4px 4px 0;
-  background: @bg_left;
+  background: var(--swh-bg-color);
   font-size: 13px;
   line-height: 1.6em;
 
   & > :global(.CodeMirror) {
     border-radius: 4px;
-    border: 1px solid @bd_color * 1.1;
+    border: 1px solid var(--swh-border-color);
     z-index: 4; // 修复代码行数的背景与左下角圆角冲突的问题
 
     :global {
@@ -82,22 +82,22 @@
   }
 
   .cm-s-default .cm-comment {
-    color: #090;
+    color: var(--swh-editor-comment);
   }
 
   .cm-s-default .cm-ip {
-    color: #00a;
+    color: var(--swh-editor-ip);
     font-weight: bold;
   }
 
   .cm-s-default .cm-hl {
-    background: #ff0;
+    background: var(--swh-editor-hl-bg);
   }
 
   .CodeMirror-gutters {
     border-right: none;
     padding-right: 6px;
-    background: #fafafa;
+    background: var(--swh-editor-gutter-bg);
     border-radius: 4px 0 0 4px;
   }
 
@@ -107,25 +107,3 @@
   }
 
 }
-
-:global(.theme-dark) {
-  .root {
-    background: @bg_left_dark;
-
-    & > :global(.CodeMirror) {
-      border: 1px solid #444;
-    }
-  }
-
-  .cm-s-default .cm-comment {
-    //color: #090;
-  }
-
-  .cm-s-default .cm-ip {
-    color: #096dd9;
-  }
-
-  .cm-s-default .cm-hl {
-    //background: #ff0;
-  }
-}
diff --git a/app-ui/content/SearchBar.less b/app-ui/content/SearchBar.less
@@ -1,6 +1,6 @@
 .root {
   padding: 6px 10px;
-  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 -2px 0 0 var(--swh-shadow-color);
 }
 
 .btn_close {