release: v2.0.0

liriliri · Jan 3, 2020 · 9366054 · 9366054
1 parent 94dec3f
commit 9366054
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## v2.0.0 (3 Jan 2019)
+
+* feat: theme support
+
 ## v1.1.0 (11 Oct 2019)
 
 * feat: in sync with elements panel [#1](https://github.com/liriliri/eruda-dom/issues/1)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eruda-dom",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "main": "eruda-dom.js",
   "description": "Eruda plugin for navigating dom tree",
   "scripts": {
@@ -34,7 +34,7 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
     "css-loader": "^0.28.7",
-    "eruda": "^1.7.1",
+    "eruda": "^2.0.0",
     "eslint": "^5.4.0",
     "eslint-config-standard": "^12.0.0",
     "eslint-plugin-import": "^2.14.0",

diff --git a/src/style.scss b/src/style.scss
@@ -7,9 +7,6 @@
   -webkit-overflow-scrolling: touch;
 }
 
-$blue: #2196f3;
-$blue-dark: #1565c0;
-
 .dom {
   padding-bottom: 40px;
   .dom-tree {
@@ -45,54 +42,46 @@ $blue-dark: #1565c0;
         top: 0;
         bottom: 0;
         z-index: -1;
-        background: #2196f3;
+        background: var(--contrast);
       }
       &.selected {
-        color: #fff !important;
-        span {
-          color: #fff !important;
-        }
-        &.expandable:before {
-          border-left-color: #fff;
-        }
         &.expandable.expanded:before {
-          border-top-color: #fff;
           border-left-color: transparent;
         }
         .selection {
           display: block;
         }
       }
       .html-tag {
-        color: rgb(168, 148, 166);
+        color: var(--tag-name-color);
         .tag-name {
-          color: rgb(136, 18, 128);
+          color: var(--tag-name-color);
         }
         .attribute-name {
-          color: rgb(153, 69, 0);
+          color: var(--attribute-name-color);
         }
         .attribute-value {
-          color: rgb(26, 26, 166);
+          color: var(--string-color);
           &.attribute-underline {
             text-decoration: underline;
           }
         }
       }
       .html-comment {
-        color: rgb(35, 110, 37);
+        color: var(--comment-color);
       }
       &.expandable:before {
         content: '';
         width: 0;
         height: 0;
         border: 4px solid transparent;
         position: absolute;
-        border-left-color: #707d8b;
+        border-left-color: var(--foreground);
         left: -10px;
         top: 4px;
       }
       &.expandable.expanded:before {
-        border-top-color: #707d8b;
+        border-top-color: var(--foreground);
         border-left-color: transparent;
         left: -12px;
         top: 6px;
@@ -106,9 +95,10 @@ $blue-dark: #1565c0;
     position: absolute;
     left: 0;
     bottom: 0;
-    color: #fff;
+    color: var(--foreground);
+    border-top: 1px solid var(--border);
     width: 100%;
-    background: $blue;
+    background: var(--darker-background);
     display: block;
     height: 40px;
     line-height: 40px;
@@ -117,7 +107,7 @@ $blue-dark: #1565c0;
     margin-top: 10px;
     transition: background 0.3s;
     &:active {
-      background: $blue-dark;
+      color: var(--select-foreground);
     }
   }
 }