Working dark theme (needs refresh)

css/base.css

@@ -8,12 +8,22 @@
 .survol-container {
     background-color: white;
     border-radius: 12px!important;
+    color: black;
     box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3), 0 0 1px 1px rgba(0, 0, 0, 0.05);
     z-index: 16777271!important;
     position: absolute!important;
     word-wrap: break-word;
 }
 
+.survol-container.dark-theme {
+    background-color: rgb(24, 26, 27);
+    color: white!important;
+}
+
+.survol-container.dark-theme a {
+    color: lightblue;
+}
+
 .survol-container h1 {
     line-height: 24px;
 }

css/popup/popup.css

@@ -1,6 +1,5 @@
 body {
     width: 300px;
-    height: 520px;
     text-align: center;
     margin: 0px;
     padding: 12px;

css/templates/reddit.css

@@ -2,7 +2,6 @@
     width: 320px;
     text-align: left;
     font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-    color: black;
 }
 
 .survol-reddit-image {
@@ -14,7 +13,6 @@
 }
 
 .survol-reddit-selftext {
-    color: black;
     padding: 16px;
     margin: 0px;
 }

css/templates/soundcloud.css

@@ -6,7 +6,6 @@
     background-position-x: 0%;
     background-position-y: 0%;
     background-size: auto;
-    color: rgb(0, 0, 0)!important;
     display: block;
     font-size: 14px;
     font-family: sans-serif;
@@ -40,12 +39,10 @@
 }
 
 .survol-soundcloud-text p {
-    color: #727171;
     font-size: 14px;
 }
 
 .survol-soundcloud-text p,
 .survol-soundcloud-text h1 {
     margin: 8px;
-    color: rgb(0, 0, 0)!important;
 }

css/templates/stackexchange.css

@@ -4,4 +4,9 @@
     padding: 8px;
     margin-top: 8px;
     margin-bottom: 8px;
+}
+
+.survol-container.dark-theme .survol-code-preview {
+    background-color: rgba(255, 255, 255, 0.9);
+    color: black;
 }

css/templates/twitter.css

@@ -1,6 +1,5 @@
 .survol-twitter-container {
     width: 559px;
-    color: black;
     font-size: 14px;
     line-height: 20px;
     font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

css/templates/wikipedia.css

@@ -6,7 +6,6 @@
     background-position-x: 0%;
     background-position-y: 0%;
     background-size: auto;
-    color: rgb(0, 0, 0)!important;
     display: block;
     font-size: 14px;
     font-family: sans-serif;
@@ -43,7 +42,6 @@
 .survol-wikipedia-text p,
 .survol-wikipedia-text h1 {
     margin: 8px;
-    color: rgb(0, 0, 0)!important;
     text-align: left!important;
     /* text-justify: auto!important;*/
 }

css/templates/youtube.css

@@ -6,7 +6,6 @@
     background-position-x: 0%;
     background-position-y: 0%;
     background-size: auto;
-    color: rgb(0, 0, 0)!important;
     display: block;
     font-size: 14px;
     font-family: sans-serif;
@@ -40,12 +39,10 @@
 }
 
 .survol-youtube-text p {
-    color: #727171;
     font-size: 14px;
 }
 
 .survol-youtube-text p,
 .survol-youtube-text h1 {
     margin: 8px;
-    color: rgb(0, 0, 0)!important;
 }

html/popup.html

@@ -22,5 +22,14 @@ <h2 class="subtitle" id="generalSettings">General settings</h2>
     <label class="switch">
         <input type="checkbox" id="previewMetadata" checked>
         <span class="slider round"></span>
-      </label>
+    </label>
+
+    <br/> <br/>
+
+    <p id="enableDarkTheme">Enable dark theme ?</p>
+
+    <label class="switch">
+        <input type="checkbox" id="darkThemeCheckbox" checked>
+        <span class="slider round"></span>
+    </label>
 </body>

js/core.js

@@ -13,6 +13,7 @@ document.addEventListener('DOMContentLoaded', () => {
      */
     var CURRENT_TAB = document.location.href;
     var previewMetadata = true;
+    var darkTheme = false;
     var container = document.createElement('div');
     var capturedNodes = [];
 
@@ -41,7 +42,7 @@ document.addEventListener('DOMContentLoaded', () => {
      */
     function insertSurvolDiv() {
         return new Promise((resolve) => {
-            container.className = 'survol-container hidden';
+            container.className = `survol-container ${darkTheme ? 'dark-theme' : ''} hidden`;
 
             //set the buffer (popup distance from mouse)
             const buffer = 20;
@@ -126,12 +127,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
             node.addEventListener('mouseenter', function () {
                 potentialHover.bindToContainer(node, domain, container);
-                container.className = 'survol-container';
+                container.className = `survol-container ${darkTheme ? 'dark-theme' : ''}`;
                 window.lastHovered = node;
             });
 
             node.addEventListener('mouseleave', function () {
-                container.className = 'survol-container hidden';
+                container.className = `survol-container ${darkTheme ? 'dark-theme' : ''} hidden`;
                 window.lastHovered = null;
                 container.innerHTML = ''; // Need to find a better way to do it later but I'm struggling with childNodes
             });
@@ -195,13 +196,17 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // If the script is part of the extension
     if (window.chrome && chrome.runtime && chrome.runtime.id) {
-        chrome.storage.local.get(['disabledDomains', 'previewMetadata'], function (res) {
+        chrome.storage.local.get(['disabledDomains', 'previewMetadata', 'darkThemeToggle'], function (res) {
             let disabledDomains = res.disabledDomains ? res.disabledDomains : ['survol.me'];
 
             if (res.previewMetadata === false) {
                 previewMetadata = false;
             }
 
+            if (res.darkThemeToggle === true) {
+                darkTheme = true;
+            }
+
             if (!disabledDomains.includes(getDomain(CURRENT_TAB).toLowerCase())) {
                 insertSurvolDiv()
                     .then(gatherHrefs)

js/popup/popup.js

@@ -8,18 +8,24 @@ document.addEventListener('DOMContentLoaded', () => {
         return link.replace('http://', '').replace('https://', '').split('/')[0].split('.').slice(subdomains - 2, subdomains).join('.');
     }
 
+    //'enableDarkTheme'
     ['pageSettings', 'generalSettings', 'allowMetadata', 'enableOnPage'].forEach(function (word) {
         document.getElementById(word).innerText = chrome.i18n.getMessage(word);
     });
 
-    chrome.storage.local.get(['disabledDomains', 'previewMetadata'], function (res) {
+    chrome.storage.local.get(['disabledDomains', 'previewMetadata', 'darkThemeToggle'], function (res) {
         let disabledDomains = res.disabledDomains ? res.disabledDomains : ['survol.me'];
         let previewMetadata = true;
+        let darkTheme = false;
 
         if (res.previewMetadata === false) {
             previewMetadata = false;
         }
 
+        if (res.darkThemeToggle === true) {
+            darkTheme = true;
+        }
+
         chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
             if (tabs[0]) { // Sanity check
                 let CURRENT_URL = getDomain(tabs[0].url);
@@ -35,6 +41,12 @@ document.addEventListener('DOMContentLoaded', () => {
                     chrome.storage.local.set({ previewMetadata: document.getElementById('previewMetadata').checked });
                 });
 
+                document.getElementById('darkThemeCheckbox').checked = darkTheme;
+
+                document.getElementById('darkThemeCheckbox').addEventListener('click', () => {
+                    chrome.storage.local.set({ darkThemeToggle: document.getElementById('darkThemeCheckbox').checked });
+                });
+
                 document.getElementById('previewOnThisPage').addEventListener('click', () => {
                     // if the box gets unchecked i.e domain disabled, and the domain is not already in the list add it
                     if (!document.getElementById('previewOnThisPage').checked && !disabledDomains.includes(CURRENT_URL.toLowerCase())) {