feat: Toggle light mode based on GH preferences

src/content-scripts/profileScreen.ts

@@ -2,14 +2,16 @@ import { getGithubUsername } from "../utils/urlMatchers";
 import { isOpenSaucedUser } from "../utils/fetchOpenSaucedApiData";
 import injectViewOnOpenSauced from "../utils/dom-utils/viewOnOpenSauced";
 import injectInviteToOpenSauced from "../utils/dom-utils/inviteToOpenSauced";
+import { getGHColorScheme } from "../utils/colorPreference";
 
 const processProfilePage = async () => {
-const username = getGithubUsername(window.location.href);
-if (username != null) {
-  const user = await isOpenSaucedUser(username);
-  if (user) injectViewOnOpenSauced(username);
-  else injectInviteToOpenSauced(username);
-}
+  const username = getGithubUsername(window.location.href);
+  if (username != null) {
+    const colorScheme = getGHColorScheme(document.cookie);
+    const user = await isOpenSaucedUser(username);
+    if (user) injectViewOnOpenSauced(username, colorScheme);
+    else injectInviteToOpenSauced(username, colorScheme);
+  }
 };
 
 chrome.runtime.onMessage.addListener((request) => {
@@ -18,4 +20,4 @@ chrome.runtime.onMessage.addListener((request) => {
   }
 });
 
-processProfilePage();
+processProfilePage();

src/utils/colorPreference.ts

@@ -0,0 +1,15 @@
+export type ColorScheme = "auto" | "light" | "dark";
+
+export const getGHColorScheme = (cookieString: string) => {
+  const regex = /(?<=\bcolor_mode=)[^;]+/g;
+  const match = regex.exec(cookieString);
+  const cookie = match && JSON.parse(decodeURIComponent(match[0]));
+  return (cookie.color_mode as ColorScheme) || "auto";
+};
+
+export const prefersDarkMode = (colorScheme: ColorScheme): boolean => {
+  if (colorScheme === "auto") {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  return colorScheme === "dark";
+};

src/utils/dom-utils/inviteToOpenSauced.ts

@@ -2,8 +2,12 @@ import { GITHUB_PROFILE_MENU_SELECTOR } from "../../constants";
 import { InviteToOpenSaucedButton } from "../../content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedButton";
 import { InviteToOpenSaucedModal } from "../../content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedModal";
 import { getTwitterUsername, getLinkedInUsername } from "../urlMatchers";
+import { ColorScheme, prefersDarkMode } from "../colorPreference";
 
-const injectOpenSaucedInviteButton = (username: string) => {
+const injectOpenSaucedInviteButton = (
+  username: string,
+  colorScheme: ColorScheme
+) => {
   const emailAddress: string | undefined = (
     document.querySelector(`a[href^="mailto:"]`) as HTMLAnchorElement
   )?.href.substr(7);
@@ -18,14 +22,20 @@ const injectOpenSaucedInviteButton = (username: string) => {
   const twitterUsername = twitterUrl && getTwitterUsername(twitterUrl);
   const linkedInUsername = linkedInUrl && getLinkedInUsername(linkedInUrl);
   const inviteToOpenSaucedButton = InviteToOpenSaucedButton();
-  const inviteToOpenSaucedModal = InviteToOpenSaucedModal(username, {
-    emailAddress,
-    twitterUsername,
-    linkedInUsername,
-  }, inviteToOpenSaucedButton);
+  const inviteToOpenSaucedModal = InviteToOpenSaucedModal(
+    username,
+    {
+      emailAddress,
+      twitterUsername,
+      linkedInUsername,
+    },
+    inviteToOpenSaucedButton
+  );
 
+  const darkMode = prefersDarkMode(colorScheme);
   const userBio = document.querySelector(GITHUB_PROFILE_MENU_SELECTOR);
   if (!userBio || !userBio.parentNode) return;
+  if (darkMode) userBio.parentElement?.classList.add("dark");
   userBio.parentNode.replaceChild(inviteToOpenSaucedButton, userBio);
   document.body.appendChild(inviteToOpenSaucedModal);
 };

src/utils/dom-utils/viewOnOpenSauced.ts

@@ -1,13 +1,22 @@
-import { GITHUB_PROFILE_MENU_SELECTOR, GITHUB_PROFILE_EDIT_MENU_SELECTOR } from "../../constants";
+import {
+  GITHUB_PROFILE_MENU_SELECTOR,
+  GITHUB_PROFILE_EDIT_MENU_SELECTOR,
+} from "../../constants";
 import { ViewOnOpenSaucedButton } from "../../content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton";
+import { ColorScheme, prefersDarkMode } from "../colorPreference";
 
-const injectViewOnOpenSaucedButton = (username: string) => {
+const injectViewOnOpenSaucedButton = (
+  username: string,
+  colorScheme: ColorScheme
+) => {
   const viewOnOpenSaucedButton = ViewOnOpenSaucedButton(username);
 
+  const darkMode = prefersDarkMode(colorScheme);
   const userBio = document.querySelector(
     `${GITHUB_PROFILE_MENU_SELECTOR}, ${GITHUB_PROFILE_EDIT_MENU_SELECTOR}`
   );
   if (!userBio || !userBio.parentNode) return;
+  if (darkMode) userBio.parentElement?.classList.add("dark");
   userBio.parentNode.replaceChild(viewOnOpenSaucedButton, userBio);
 };
 

tailwind.config.js

@@ -57,4 +57,5 @@ module.exports = {
     })
   ],
   important: true,
+  darkMode: "class"
 };