Added dark mode for vomnibar, hud, blank page, help dialog, popup and…

… options pages. Update dark mode to be compatible with darkreader/darkreader and to mimic Chrome's color scheme (leosolid) Add dark mode CSS to help dialog Fix compatibility with dark reader's filter and static modes
smblott-github · Jun 14, 2020 · a7dc212 · a7dc212
1 parent f1a5825
commit a7dc212
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 3 deletions.
diff --git a/CREDITS b/CREDITS
@@ -50,5 +50,7 @@ Contributors:
   tobimensch
   Ramiro Araujo <[email protected]> (github: ramiroaraujo)
   Daniel Skogly <[email protected]> (github: poacher2k)
+  Matt Wanchap <[email protected]> (github: mwanchap)
+  Leo Solidum <[email protected]> (github: leosolid)
 
 Feel free to add real names in addition to GitHub usernames.
diff --git a/content_scripts/ui_component.js b/content_scripts/ui_component.js
@@ -37,6 +37,7 @@ class UIComponent {
 
       this.shadowDOM.appendChild(styleSheet);
       this.shadowDOM.appendChild(this.iframeElement);
+      this.handleDarkReaderFilter();
       this.toggleIframeElementClasses("vimiumUIComponentVisible", "vimiumUIComponentHidden");
 
       // Open a port and pass it to the iframe via window.postMessage.  We use an AsyncDataFetcher to handle
@@ -98,6 +99,28 @@ class UIComponent {
     });
   }
 
+  handleDarkReaderFilter() {
+    const reverseFilterClass = "reverseDarkReaderFilter";
+
+    const reverseFilterIfExists = (() => {
+      const darkReaderElement = document.getElementById("dark-reader-style");
+      if (darkReaderElement && darkReaderElement.innerHTML.includes("filter")) {
+       if (!this.iframeElement.classList.contains(reverseFilterClass)) {
+          this.iframeElement.classList.add(reverseFilterClass);
+          console.log('added');
+       }
+      } else {
+        this.iframeElement.classList.remove(reverseFilterClass);
+          console.log('removed');
+      }
+    }).bind(this);
+
+    reverseFilterIfExists();
+
+    const observer = new MutationObserver(reverseFilterIfExists);
+    observer.observe(document.head, { characterData: true, subtree: true, childList: true });
+  };
+
   toggleIframeElementClasses(removeClass, addClass) {
     this.iframeElement.classList.remove(removeClass);
     this.iframeElement.classList.add(addClass);

diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css
@@ -434,3 +434,80 @@ iframe.vimiumUIComponentReactivated {
 iframe.vimiumNonClickable {
   pointer-events: none;
 }
+
+@media (prefers-color-scheme: dark) {
+  /* This cancels out the filter on <html>, applied by Dark Reader's Filter and Filter+ modes */
+  iframe.reverseDarkReaderFilter {
+    -webkit-filter: invert(100%) hue-rotate(180deg) !important;
+    filter: invert(100%) hue-rotate(180deg) !important;
+  }
+
+  /* Dark mode CSS for options page and exclusions */
+
+  body.vimiumBody {
+    background-color: #292a2d;
+    color: white;
+  }
+
+  body.vimiumBody a,
+  body.vimiumBody a:visited {
+    color: #8ab4f8;
+  }
+
+  body.vimiumBody textarea,
+  body.vimiumBody input {
+    background-color: #1d1d1f;
+    border-color: #1d1d1f;
+    color: #e8eaed;
+  }
+
+  body.vimiumBody div.example {
+    color: #9aa0a6;
+  }
+
+  body.vimiumBody div#state,
+  body.vimiumBody div#footer {
+    background-color: #202124;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  /* Dark Mode CSS for Help Dialog */
+
+  div#vimiumHelpDialogContainer {
+    border-color: rgba(255, 255, 255, 0.1);
+    background-color: #202124;
+  }
+
+  div#vimiumHelpDialog {
+    background-color: #292a2d;
+    color: white;
+  }
+
+  div#vimiumHelpDialog td.vimiumHelpDescription {
+    color: #c9cccf;
+  }
+
+  span#vimiumTitle,
+  div#vimiumHelpDialog td.vimiumHelpSectionTitle {
+    color: white;
+  }
+
+  #vimiumTitle > span:first-child {
+    color: #8ab4f8 !important;
+  }
+
+  div#vimiumHelpDialog a {
+    color: #8ab4f8;
+  }
+
+  div#vimiumHelpDialog div.vimiumDivider {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  span.vimiumHelpDialogKey {
+    background-color: #1d1d1f;
+    border: solid 1px black;
+    box-shadow: none;
+    color: white;
+  }
+}
diff --git a/pages/blank.html b/pages/blank.html
@@ -24,6 +24,6 @@
     <link rel="stylesheet" type="text/css" href="../content_scripts/vimium.css" />
 
   </head>
-  <body>
+  <body class="vimiumBody">
   </body>
 </html>
diff --git a/pages/options.html b/pages/options.html
@@ -27,7 +27,7 @@
     <script type="text/javascript" src="options.js"></script>
   </head>
 
-  <body>
+  <body class="vimiumBody">
     <div id="wrapper">
       <header>Vimium Options</header>
       <table id="options">

diff --git a/pages/popup.html b/pages/popup.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" type="text/css" href="options.css">
+    <link rel="stylesheet" type="text/css" href="../content_scripts/vimium.css">
     <style>
       * {
         margin: 0px;
@@ -52,7 +53,7 @@
     <script src="../lib/settings.js"></script>
     <script src="options.js"></script>
   </head>
-  <body>
+  <body class="vimiumBody">
     <div id="state"></div>
 
     <div id="exclusionScrollBox">

diff --git a/pages/vomnibar.css b/pages/vomnibar.css
@@ -148,3 +148,59 @@
 .vomnibarNoInsertText {
   visibility: hidden;
 }
+
+/* Dark Vomnibar */
+
+
+@media (prefers-color-scheme: dark) {
+  #vomnibar {
+    border: 1px solid rgba(0, 0, 0, 0.7);
+    border-radius: 6px;
+  }
+
+  #vomnibar .vomnibarSearchArea, #vomnibar {
+    background-color: #35363a;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  #vomnibar input {
+    background-color: #202124;
+    color: white;
+    border: none;
+  }
+
+  #vomnibar ul { 
+    background-color: #202124;
+  }
+
+  #vomnibar li {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  #vomnibar li.vomnibarSelected {
+    background-color: #37383a;
+  }
+
+  #vomnibar li .vomnibarUrl {
+    white-space: nowrap;
+    color: #5ca1f7;
+  }
+
+  #vomnibar li em,
+  #vomnibar li .vomnibarTitle {
+    color: white;
+  }
+
+  #vomnibar li .vomnibarSource {
+    color: #9aa0a6;
+  }
+
+  #vomnibar li .vomnibarMatch {
+    color: white;
+  }
+
+  #vomnibar li em .vomnibarMatch,
+  #vomnibar li .vomnibarTitle .vomnibarMatch {
+    color: white;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,6 @@ @@
         <link rel="stylesheet" type="text/css" href="../content_scripts/vimium.css" />
       </head>
-      <body>
+      <body class="vimiumBody">
       </body>
     </html>