fix #42

Author: eidng8

src/App.vue

@@ -20,7 +20,7 @@
     </div>
     <div>
       <button @click="populate()">populate tree</button>
-      <ul class="g8-tree-view g8-tree__highlight_hover">
+      <ul class="g8-tree-view g8-tree__dark g8-tree__highlight_hover">
         <g8-tree-view
           checker="1"
           :item="item"
@@ -43,12 +43,12 @@
           "
         >
           <template #default="{ item }">
-            <span :class="{ blue: !item.color }">
+            <span :class="{ tint: !item.color }">
               {{ item.name }} (default slot)
             </span>
           </template>
           <template #tag="{ tag }">
-            <span :class="{ blue: !tag.color }">
+            <span :class="{ tint: !tag.color }">
               {{ tag.label }} (tag slot)
             </span>
           </template>
@@ -129,11 +129,18 @@ body {
   height: 100%;
 }
 
+html,
+body,
+button,
+#app {
+  color: #888888;
+  background: #333333;
+}
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
   display: flex;
   height: 100%;
   flex-direction: column;
@@ -151,7 +158,7 @@ span[id] {
   display: inline-block;
 }
 
-.blue {
-  color: blue;
+.tint {
+  color: lightseagreen;
 }
 </style>

src/components/tree-view.scss

@@ -27,7 +27,7 @@ $g8-tree-fg: #333 !default;
 
 .g8-tree__node {
   list-style: none;
-  padding: .1rem 0 .1rem 1rem;
+  padding: 0.1rem 0 0.1rem 1rem;
 }
 
 .g8-tree__node_label {
@@ -41,7 +41,7 @@ $g8-tree-fg: #333 !default;
 
 .g8-tree__toggle,
 .g8-tree__checker {
-  font-size: .8rem;
+  font-size: 0.8rem;
   width: 1rem;
   text-align: center;
 }
@@ -99,7 +99,7 @@ $g8-tree-fg: #333 !default;
   font-weight: bold;
 
   .g8-tree__toggle:before {
-    padding-right: .5rem;
+    padding-right: 0.5rem;
     content: '\25ba';
   }
 }
@@ -110,12 +110,12 @@ $g8-tree-fg: #333 !default;
 }
 
 .g8-tree__node_tag {
-  margin-left: .5rem;
-  padding: 0 .2rem;
-  font-size: .6rem;
+  margin-left: 0.5rem;
+  padding: 0 0.2rem;
+  font-size: 0.6rem;
   font-weight: normal;
   max-width: 6rem;
-  border-radius: .2rem;
+  border-radius: 0.2rem;
   background: $g8-tree-bg;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -169,8 +169,8 @@ $g8-tree-fg: #333 !default;
     }
   }
 
-  .g8-tree__highlight_hover .g8-tree__node_label:hover,
-  .g8-tree__highlight_hover .g8-tree__node_label:focus {
-    background: $g8-tree-fg;
+  &.g8-tree__highlight_hover .g8-tree__node_label:hover,
+  &.g8-tree__highlight_hover .g8-tree__node_label:focus {
+    background: lighten($g8-tree-fg, 10%);
   }
 }