Fix detection of night mode when not logged in

iampueroo · Jun 26, 2020 · 32ce926 · 32ce926
1 parent 74e81e7
commit 32ce926
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 17 deletions.
diff --git a/source/UserContext.js b/source/UserContext.js
@@ -2,9 +2,9 @@ import { _request } from './Request.js';
 
 export async function get() {
 	const response = await getData();
-	const isLoggedIn = new Boolean(response && response.data && response.data.modhash);
+	const isLoggedIn = Boolean(response && response.data && response.data.modhash);
 	const modhash = isLoggedIn ? response.data.modhash : '';
-	const prefersNightmode = isLoggedIn ? response.data.pref_nightmode : '';
+	const prefersNightmode = isLoggedIn ? response.data.pref_nightmode : extractNightModeFromStyles();
 	const preferNewTab = prefersOpenLinksInNewTab(); 
 	return {
 		isLoggedIn,
@@ -25,3 +25,48 @@ function prefersOpenLinksInNewTab() {
 	}
 	return false;
 }
+
+function extractNightModeFromStyles() {
+	const body = document.querySelector('body');
+	const bodyStyle = window.getComputedStyle(body);
+	const colorValue = bodyStyle.getPropertyValue('--newCommunityTheme-body').trim();
+	if (!colorValue) {
+		// Warn
+		return false;
+	}
+	if (!colorValue.startsWith('#')) {
+		// Warn
+		return false;
+	}
+	return isDark(colorValue); 
+}
+
+function isDark(color) {
+
+    // Variables for red, green, blue values
+    let r, g, b, hsp;
+
+    // Check the format of the color, HEX or RGB?
+    if (color.match(/^rgb/)) {
+        // If RGB --> store the red, green, blue values in separate variables
+        color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
+        r = color[1];
+        g = color[2];
+        b = color[3];
+    } else {
+        // If hex --> Convert it to RGB: http://gist.github.com/983661
+        color = +("0x" + color.slice(1).replace( 
+        color.length < 5 && /./g, '$&$&'));
+        r = color >> 16;
+        g = color >> 8 & 255;
+        b = color & 255;
+    }
+    // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
+    hsp = Math.sqrt(
+	    0.299 * (r * r) +
+	    0.587 * (g * g) +
+	    0.114 * (b * b)
+    );
+    // > 127.5 is light, less than it is dark
+    return hsp <= 127.5;
+}
diff --git a/source/package.json b/source/package.json
@@ -11,7 +11,8 @@
     "build": "yarn run test && mkdir -p dist && cp -R static/* dist && yarn run build-js && yarn run build-css",
     "zip-chrome": "yarn run build && zip -r ../chrome-extension.zip dist",
     "zip-firefox": "yarn run build && cd dist && zip -r -FS ../firefox-extension.zip *",
-    "test": "eslint rComments.js"
+    "test": "eslint rComments.js",
+    "fix": "eslint rComments.js --fix"
   },
   "author": "Ignacio Ampuero",
   "license": "ISC",

diff --git a/source/rComments.js b/source/rComments.js
@@ -9,22 +9,11 @@ import { get } from './UserContext';
 	const NEXT_REPLY_TEXT = '&#8618 Next Reply';
 	const NEXT_COMMENT_TEXT = '&#8595 Next Comment';
 
-	let _isNightMode = false;
-
-	/**
-	 * Looks at the data-reactroot div, gets its background-color css property
-	 * and returns true if any of the rgb values is greater than 128.
-	 * If anything every goes wrong we return false.
-	 * @return {Boolean}
-	 */
-	function isNightMode() {
-		return isNewStyle() && _isNightMode;
-	}
-
 	const Comment = {
 
 		isLoggedIn: false,
 		openLinksInNewTab: false,
+		isNightMode: false,
 
 		getHtml(json, listing) {
 			if (!json || !json.id) return this.noReplyHtml();
@@ -234,7 +223,7 @@ import { get } from './UserContext';
 				});
 				this._popup = popup;
 			}
-			this._popup.classList.toggle('res-nightmode', isNightMode());
+			this._popup.classList.toggle('res-nightmode', isNewStyle() && Comment.isNightMode);
 			return this._popup;
 		},
 
@@ -469,8 +458,8 @@ import { get } from './UserContext';
 			get().then((userContextData) => {
 				Comment.isLoggedIn = userContextData.isLoggedIn;
 				Comment.openLinksInNewTab = userContextData.preferNewTab;
+				Comment.isNightMode = userContextData.prefersNightmode;
 				this.modhash = userContextData.modhash;
-				_isNightMode = userContextData.prefersNightmode;
 			});
 
 			let active = false;