commit 068815d36b870ba44ab00fbbcdb28779445ecc5b
author Kasper Nilsson <kaspern@google.com> Wed Aug 01 12:52:24 2018 -0700
committer Kasper Nilsson <kaspern@google.com> Wed Aug 01 23:28:54 2018 +0000
tree eee5f43d8361081b86f90bd3dbbc4d6f117564e0
parent b7fe47bbad9bb66b7a9125b91f74ccfd34d74be6

Respect theme colors in image-diff plugin

Change-Id: Ief121ca9172975cbac8ef2559ee6af79fd117e3b

gr-image-diff-tool/gr-image-diff-tool.html

diff --git a/gr-image-diff-tool/gr-image-diff-tool.html b/gr-image-diff-tool/gr-image-diff-tool.html
index ff65062..18c34f1 100644
--- a/gr-image-diff-tool/gr-image-diff-tool.html
+++ b/gr-image-diff-tool/gr-image-diff-tool.html
@@ -21,7 +21,7 @@
   <template>
     <style>
       :host {
-        background-color: #fafafa;
+        background-color: var(--table-header-background-color, #fafafa);
         display: block;
         font-family: var(--font-family);
       }
@@ -37,8 +37,10 @@
         padding: 0 .5em;
       }
       #dropdown {
+        background-color: var(--view-background-color);
         border: 1px solid var(--border-color);
         border-radius: 2px;
+        color: var(--primary-text-color);
         font-size: var(--font-size-normal);
         height: 2em;
         margin-left: 1em;

gr-resemble-diff-mode/gr-resemble-diff-mode.html

diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode.html b/gr-resemble-diff-mode/gr-resemble-diff-mode.html
index ec14597..056e979 100644
--- a/gr-resemble-diff-mode/gr-resemble-diff-mode.html
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode.html
@@ -34,17 +34,8 @@
       .toggle {
         padding: .5em;
       }
-      #color {
-        background-color: #f5f5f5;
-        border-radius: 2px;
-        outline: none;
-      }
-      #color:hover {
-        background-color: #eeeeee;
-      }
       #controlsContainer {
         align-items: center;
-        background-color: #f5f5f5;
         border-top: 1px solid var(--border-color, #ddd);
         display: flex;
         justify-content: space-between;
@@ -56,14 +47,24 @@
         display: block;
         width: 100%;
       }
-      #fullscreen {
-        background-color: #f5f5f5;
+      #color {
+        border: 1px solid var(--border-color, #ddd);
         border-radius: 2px;
-        outline: none;
+      }
+      #fullscreen {
+        border: 1px solid var(--border-color, #ddd);
+        border-radius: 2px;
+        color: var(--primary-text-color, #000);
         padding: .5em;
       }
+      #controlsContainer,
+      #color,
+      #fullscreen {
+        background-color: var(--table-header-background-color, #fafafa);
+      }
+      #color:hover,
       #fullscreen:hover {
-        background-color: #eeeeee;
+        background-color: var(--header-background-color, #eeeeee);
       }
       #imageDiff {
         display: block;
@@ -114,4 +115,4 @@
     </div>
   </template>
   <script src="gr-resemble-diff-mode.js"></script>
-</dom-module>
\ No newline at end of file
+</dom-module>