v2.0-testing.1

code-charity · Jan 29, 2021 · 4ad013c · 4ad013c
1 parent e49437f
commit 4ad013c
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 43 deletions.
diff --git a/background.js b/background.js
@@ -45,11 +45,25 @@
 # MESSAGE LISTENER
 ---------------------------------------------------------------*/
 
-chrome.runtime.onMessage.addListener(function(message, sender) {
-    if (message === 'dark-mode') {
+chrome.runtime.onMessage.addListener(async function(message, sender) {
+    if (typeof message !== 'object') {
+        return false;
+    }
+
+    if (message.action === 'dark-mode--active') {
         chrome.browserAction.setIcon({
             path: 'assets/icons/48.png',
             tabId: sender.tab.id
         });
+    } else if (message.action === 'dark-mode--fetch') {
+        var response = await (await fetch(message.url, {
+            cache: 'force-cache',
+            credentials: 'omit'
+        })).text();
+
+        chrome.tabs.sendMessage(sender.tab.id, {
+            action: 'dark-mode--fetch-response',
+            response: response
+        });
     }
 });
diff --git a/content-scripts.js b/content-scripts.js
@@ -232,6 +232,7 @@ function update() {
 
 var settings = {},
     current_website,
+    variables = {},
     regex_rgb = /(#[A-Za-z0-9]+)|(rgba?\([^)]+\))|(\b[a-z]+)/g,
     regex_numbers = /[0-9.]+/g,
     color_keywords = {
@@ -549,10 +550,8 @@ function modifyBackgroundColor(value) {
         saturation = value[1],
         lightness = value[2];
 
-    if (lightness > .85) {
-        value = [hue, saturation, .125 + 1 - lightness];
-    } else if (saturation > .5 && lightness < .7 && lightness > .4) {
-        value[2] = .4;
+    if (lightness > .5) {
+        value[2] = .1 + 1 - lightness;
     }
 
     return hslToStyle(value);
@@ -591,8 +590,8 @@ function modifyBorderColor(value) {
         saturation = value[1],
         lightness = value[2];
 
-    if (saturation < .2 && lightness > .3) {
-        value = [0, 0, 1 - lightness];
+    if (lightness > .5) {
+        value[2] = .1 + 1 - lightness;
     }
 
     return hslToStyle(value);
@@ -621,19 +620,10 @@ function attributeStyle(node) {
 --------------------------------------------------------------*/
 
 async function elementLink(node) {
-    var response = await (await fetch(node.href, {
-        cache: 'force-cache',
-        credentials: 'omit'
-    })).text();
-
-    node.classList.add('dark-mode--stylesheet');
-
-    var element = createStyle(response),
-        rules = element.sheet.cssRules;
-
-    createStyle(parseRules(rules));
-
-    element.remove();
+    chrome.runtime.sendMessage({
+        action: 'dark-mode--fetch',
+        url: node.href
+    });
 }
 
 
@@ -790,6 +780,7 @@ function parseProperties(properties, is_inline) {
             property === 'border-right-color' ||
             property === 'border-bottom-color' ||
             property === 'border-left-color' ||
+            property === 'outline-color' ||
             property === 'box-shadow'
         ) {
             var value = properties.getPropertyValue(property);
@@ -827,6 +818,17 @@ function parseProperties(properties, is_inline) {
                     }
 
                     string += property + ':' + value + ' !important;';
+
+                    if (!variables[property]) {
+                        variables[property] = {
+                            parent: '',
+                            value: value
+                        };
+                    } else {
+                        variables[property].value = value;
+                    }
+
+                    variables[property]
                 }
             }
         } else if (is_inline) {
@@ -1044,4 +1046,22 @@ document.addEventListener('visibilitychange', function() {
     }
 });
 
-chrome.runtime.sendMessage('dark-mode');
+chrome.runtime.sendMessage({
+    action: 'dark-mode--active'
+});
+
+
+chrome.runtime.onMessage.addListener(async function(message, sender) {
+    if (typeof message !== 'object') {
+        return false;
+    }
+
+    if (message.action === 'dark-mode--fetch-response') {
+        var element = createStyle(message.response),
+            rules = element.sheet.cssRules;
+
+        createStyle(parseRules(rules));
+
+        element.remove();
+    }
+});
diff --git a/manifest.json b/manifest.json
@@ -2,6 +2,7 @@
     "manifest_version": 2,
     "name": "Dark Mode",
     "version": "2.0",
+    "version_name": "2.0-testing.1",
     "description": "Dark Mode, read at night. Bluelight filter for every website. Relax your eyes at night and day.",
 
     "default_locale": "en",

diff --git a/user-agent-stylesheet.css b/user-agent-stylesheet.css
@@ -11,8 +11,8 @@
 # DOCUMENT
 --------------------------------------------------------------*/
 
-body,
-html
+html.dark-mode body,
+html.dark-mode
 {
     color: #eee;
     background-color: #000;
@@ -27,19 +27,19 @@ html
 # SCROLLBAR
 --------------------------------------------------------------*/
 
-::-webkit-scrollbar
+html.dark-mode ::-webkit-scrollbar
 {
     background-color: #2b2b2b;
 }
 
-::-webkit-scrollbar-thumb
+html.dark-mode ::-webkit-scrollbar-thumb
 {
     border-right: 2px solid #2b2b2b;
     border-left: 2px solid #2b2b2b;
     background-color: #4d4d4d;
 }
 
-::-webkit-scrollbar-button
+html.dark-mode ::-webkit-scrollbar-button
 {
     background-color: #2b2b2b;
 }
@@ -49,7 +49,7 @@ html
 # LINK
 --------------------------------------------------------------*/
 
-a
+html.dark-mode a
 {
     color: #678fff;
 }
@@ -59,38 +59,43 @@ a
 # BACKGROUND
 --------------------------------------------------------------*/
 
-button,
-input,
-select,
-textarea
+html.dark-mode button,
+html.dark-mode input,
+html.dark-mode select,
+html.dark-mode textarea
 {
     color: #eee;
-    border: 2px solid #333;
-    background-color: #333;
+    border-color: #333;
+    background-color: #000;
 }
 
-button[disabled],
-input[disabled],
-select[disabled],
-textarea[disabled]
+html.dark-mode button[disabled],
+html.dark-mode input[disabled],
+html.dark-mode select[disabled],
+html.dark-mode textarea[disabled]
 {
     opacity: .5;
 }
 
+html.dark-mode input[type=text],
+html.dark-mode textarea
+{
+    background-color: transparent;
+}
+
 
 /*--------------------------------------------------------------
 # BORDER
 --------------------------------------------------------------*/
 
-fieldset,
-hr,
-iframe
+html.dark-mode fieldset,
+html.dark-mode hr,
+html.dark-mode iframe
 {
-    border-style: solid;
     border-color: #333;
 }
 
-table
+html.dark-mode table
 {
     border-color: #333;
 }