Respect theme colors in image-diff plugin Change-Id: Ief121ca9172975cbac8ef2559ee6af79fd117e3b
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;
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>