Merge pull request #100 from Alokit-Innovations/akg/light_mode_handler

bug fix: fixed colors for light theme

manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "Vibinex Code Review",
-    "version": "1.1.6",
+    "version": "1.2.0",
     "manifest_version": 3,
     "description": "Personalization and context for pull requests on GitHub & Bitbucket",
     "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAsRm6EaBdHDBxVjt9o9WKeL9EDdz1X+knDAU5uoZaRsXTmWjslhJN9DhSd7/Ys4aJOSN+s+5/HnIHcKV63P4GYaUM5FhETHEWORHlwIgjcV/1h6wD6bNbvXi06gtiygE+yMrCzzD93/Z+41XrwMElYiW2U5owNpat2Yfq4p9FDX1uBJUKsRIMp6LbRQla4vAzH/HMUtHWmeuUsmPVzcq1b6uB1QmuJqIQ1GrntIHw3UBWUlqRZ5OtxI1DCP3knglvqz26WT5Pc4GBDNlcI9+3F0vhwqwHqrdyjZpIKZ7iaQzcrovOqUKuXs1J3hDtXq8WoJELIqfIisY7rhAvq6b8jQIDAQAB",

scripts/highlighting.js

@@ -5,18 +5,21 @@ const keyToLabel = Object.freeze({
 });
 
 // Background color for relevant GitHub items.
-const GH_RELEVANT_BG_COLOR = "rgb(86, 88, 0)";
+const GH_RELEVANT_BG_COLOR = (isDark) => (isDark) ? "rgb(86, 88, 0)" : 'rgb(246, 248, 85)';
+const GH_RELEVANT_PR_TAG_COLOR = (isDark) => (isDark) ? 'rgb(164, 167, 0)' : 'rgb(184, 187, 51)';
+const GH_RELEVANT_FILES_BG_COLOR = (isDark) => (isDark) ? "#7a7e00" : 'rgb(241, 245, 73)';
 
 /**
  * Highlights relevant pull requests on GitHub based on provided IDs.
  * 
  * @param {Object} highlightedPRIds - Object containing PR IDs to be highlighted.
+ * @param {boolean} isDark - Whether the GitHub page is in dark mode.
  */
-function highlightRelevantPRs(highlightedPRIds) {
+function highlightRelevantPRs(highlightedPRIds, isDark) {
 	if (highlightedPRIds) {
 		for (const priorityLevel in highlightedPRIds) {
 			for (const prNumber in highlightedPRIds[priorityLevel]) {
-				addingCssElementToGithub(prNumber, keyToLabel[priorityLevel], highlightedPRIds[priorityLevel][prNumber]);
+				addingCssElementToGithub(prNumber, keyToLabel[priorityLevel], highlightedPRIds[priorityLevel][prNumber], isDark);
 			}
 		}
 	}
@@ -29,9 +32,9 @@ function highlightRelevantPRs(highlightedPRIds) {
  * @param {string} status - The status (e.g., "Relevant" or "Important").
  * @param {Object} changeInfo - Information about the changes.
  */
-function addingCssElementToGithub(elementId, status, changeInfo) {
-	const backgroundColor = status == 'Important' ? 'rgb(61, 0, 0)' : GH_RELEVANT_BG_COLOR;
-	const tagBackgroundColor = status == 'Important' ? 'rgb(255,0,0)' : 'rgb(164, 167, 0)';
+function addingCssElementToGithub(elementId, status, changeInfo, isDark) {
+	const backgroundColor = status == 'Important' ? 'rgb(61, 0, 0)' : GH_RELEVANT_BG_COLOR(isDark);
+	const tagBackgroundColor = status == 'Important' ? 'rgb(255,0,0)' : GH_RELEVANT_PR_TAG_COLOR(isDark);
 	const rowElement = document.getElementById(`issue_${elementId}`);
 	if (rowElement && rowElement != null) {
 		rowElement.style.backgroundColor = backgroundColor;
@@ -96,8 +99,9 @@ function addCssElementToBitbucket(highlightedPRIds) {
  * Highlights important files in a GitHub pull request.
  * 
  * @param {Object} response - Response object containing relevant data.
+ * @param {boolean} isDark - Whether the GitHub page is in dark mode.
  */
-async function showImpFileInPr(response) {
+async function showImpFileInPr(response, isDark) {
 	if ("files" in response) {
 		const encryptedFileNames = new Set(response['files']);
 		const fileNav = document.querySelector('[aria-label="File Tree Navigation"]');
@@ -125,7 +129,7 @@ async function showImpFileInPr(response) {
 				}
 				const hashedFilename = await sha256(filename);
 				if (encryptedFileNames.has(hashedFilename)) {
-					item.style.backgroundColor = '#7a7e00';
+					item.style.backgroundColor = GH_RELEVANT_FILES_BG_COLOR(isDark);
 				}
 			}
 		}
@@ -181,8 +185,9 @@ async function FilesInPrBitbucket(response) {
  * Highlights specific hunks (sections) of code in a GitHub pull request.
  * 
  * @param {Array} apiResponses - Array of API responses containing hunk information.
+ * @param {boolean} isDark - Boolean value to determine if dark mode is enabled.
  */
-const githubHunkHighlight = async (apiResponses) => {
+const githubHunkHighlight = async (apiResponses, isDark) => {
 	// checking for diff view either unified or split
 	let isUnifiedDiffView = false;
 	const allInputTagsWithValueAttr = document.querySelectorAll('input[value]'); // for reducing DOM queries in foreach loop.
@@ -243,7 +248,7 @@ const githubHunkHighlight = async (apiResponses) => {
 			};
 			allRowsInFileDiff.forEach((rowInFileDiff) => {
 				if (isRelevantRow(rowInFileDiff)) {
-					rowInFileDiff.style.backgroundColor = GH_RELEVANT_BG_COLOR;
+					rowInFileDiff.style.backgroundColor = GH_RELEVANT_BG_COLOR(isDark);
 				}
 			});
 		} else { // for split view 
@@ -266,7 +271,7 @@ const githubHunkHighlight = async (apiResponses) => {
 				if (leftSideContentCell?.querySelector("span[data-code-marker='-']")) {
 					for (const hunk of relevantHunksInThisFile) {
 						if (parseInt(lineNumber) >= parseInt(hunk.line_start) && parseInt(lineNumber) <= parseInt(hunk.line_end)) {
-							leftSideContentCell.style.backgroundColor = GH_RELEVANT_BG_COLOR;
+							leftSideContentCell.style.backgroundColor = GH_RELEVANT_BG_COLOR(isDark);
 						}
 					}
 				}

scripts/orchestrator.js

@@ -31,7 +31,8 @@ const orchestrator = async (tabUrl, websiteUrl, userId) => {
 		console.warn(`[Vibinex] You are not logged in. Head to ${websiteUrl} to log in`);
 	}
 	if (urlObj[2] == 'github.com') {
-		addSignedOutIndicator(websiteUrl, 'github')
+		const isDark = getThemeColor().every((color) => color < 128);
+		addSignedOutIndicator(websiteUrl, 'github');
 		if (urlObj[3] && (urlObj[3] !== 'orgs') && urlObj[4]) {
 			// for showing fav button if org repo is not added, eg : https://github.com/mui/mui-toolpad
 			const ownerName = urlObj[3];
@@ -48,7 +49,7 @@ const orchestrator = async (tabUrl, websiteUrl, userId) => {
 				};
 				const query_params = { type: "review" };
 				const highlightedPRIds = await apiCallOnprem(url, body, query_params);
-				highlightRelevantPRs(highlightedPRIds);
+				highlightRelevantPRs(highlightedPRIds, isDark);
 			}
 			if (urlObj[5] === "pull" && urlObj[6] && urlObj[7] === "files") {
 				const prNumber = parseInt(urlObj[6]);
@@ -61,11 +62,11 @@ const orchestrator = async (tabUrl, websiteUrl, userId) => {
 				};
 				let query_params = { type: "file" };
 				const response = await apiCallOnprem(url, body, query_params);
-				showImpFileInPr(response);
+				showImpFileInPr(response, isDark);
 
 				query_params = { type: "hunk" };
 				const hunk_info_response = await apiCallOnprem(url, body, query_params);
-				githubHunkHighlight(hunk_info_response);
+				githubHunkHighlight(hunk_info_response, isDark);
 			}
 		}
 		// for showing all tracked repo in organisation page
@@ -87,7 +88,7 @@ const orchestrator = async (tabUrl, websiteUrl, userId) => {
 	}
 
 	if (urlObj[2] === 'bitbucket.org') {
-		addSignedOutIndicator(websiteUrl, 'bitbucket')
+		addSignedOutIndicator(websiteUrl, 'bitbucket');
 		// for showing tracked repo of a organization 
 		if (urlObj[4] === 'workspace' && urlObj[5] === 'repositories') {
 			const workspaceSlug = urlObj[3];
@@ -131,3 +132,24 @@ const orchestrator = async (tabUrl, websiteUrl, userId) => {
 		}
 	}
 };
+
+const getThemeColor = () => {
+	const bgColor = window.getComputedStyle(document.body).getPropertyValue('background-color');
+
+	// Extract R, G, B values 
+	const match = /rgb\((\d+), (\d+), (\d+)\)/.exec(bgColor);
+
+	if (!match) {
+		console.error(`Unexpected background color format: ${bgColor}`);
+		return [255, 255, 255]; // Default to white or any sensible default
+	}
+
+	// Convert to numbers
+	const r = parseInt(match[1]);
+	const g = parseInt(match[2]);
+	const b = parseInt(match[3]);
+
+	// Put in array
+	const bgRGB = [r, g, b];
+	return bgRGB;
+};