From 0264972c1069fe3c5c5c5cedb04aff6d0747c4f5 Mon Sep 17 00:00:00 2001 From: Kyle Taylor Date: Tue, 24 Sep 2019 16:31:50 -0500 Subject: [PATCH] Add theme support for dark mode - fixes #2776 --- src/drivers/webextension/css/popup.css | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/drivers/webextension/css/popup.css b/src/drivers/webextension/css/popup.css index bd5efa916..312421163 100644 --- a/src/drivers/webextension/css/popup.css +++ b/src/drivers/webextension/css/popup.css @@ -105,9 +105,10 @@ body { .detected__app-icon { display: inline-block; height: 16px; - margin-right: .5rem; + margin-right: .5rem; vertical-align: -.2rem; width: 16px; + filter: drop-shadow(5px 5px 5px #222); } .detected__app-name { @@ -200,3 +201,21 @@ body { .terms__privacy { margin-top: 1rem; } + +/* Add alternative color palette for Dark mode theme. */ +@media (prefers-color-scheme: dark) { + .container { + background: #333; + color: white; + } + .detected__category-link, .detected__app { + color: white; + } + .detected__app-icon { + -webkit-filter: drop-shadow(0px 0px 1px rgba(255,255,255,1)); + filter: drop-shadow(0px 0px 1px rgba(255,255,255,1)); + } + .detected__app-version, .detected__app-confidence { + background-color: #555; + } +}