diff --git a/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedButton.ts b/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedButton.ts index b1de7f14..60b8789f 100644 --- a/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedButton.ts +++ b/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedButton.ts @@ -5,7 +5,7 @@ import { createHtmlElement } from "../../../utils/createHtmlElement"; export const InviteToOpenSaucedButton = () => { const inviteToOpenSaucedButton = createHtmlElement("a", { className: - "inline-block mt-4 text-white rounded-md p-2 text-sm font-semibold text-center select-none w-full border border-solid cursor-pointer bg-gh-gray hover:bg-red-500 hover:shadow-button hover:no-underline", + "inline-block mt-4 text-black bg-gh-white dark:bg-gh-gray dark:text-white rounded-md p-2 text-sm font-semibold text-center select-none w-full border hover:shadow-button hover:no-underline", innerHTML: `Email`, @@ -42,6 +44,8 @@ export const InviteToOpenSaucedModal = ( const twitterIcon = tweetHref ? createHtmlElement("a", { href: tweetHref, + target: "_blank", + rel: "noopener noreferrer", innerHTML: `Twitter`, @@ -50,6 +54,8 @@ export const InviteToOpenSaucedModal = ( const linkedInIcon = linkedinHref ? createHtmlElement("a", { href: linkedinHref, + target: "_blank", + rel: "noopener noreferrer", innerHTML: `LinkedIn`, @@ -62,7 +68,7 @@ export const InviteToOpenSaucedModal = ( const inviteToOpenSaucedModal = createHtmlElement("div", { className: - "fixed h-full w-full z-50 bg-gray-600 bg-opacity-50 overflow-y-auto inset-0", + "fixed h-full w-full z-50 bg-gray-600 bg-opacity-80 dark:bg-opacity-50 overflow-y-auto inset-0", style: { display: "none" }, id: "invite-modal", }); @@ -71,9 +77,9 @@ export const InviteToOpenSaucedModal = ( className: "mt-2 min-w-[33%] relative top-60 mx-auto p-4 border w-96 rounded-md shadow-button border-solid border-orange bg-slate-800", innerHTML: ` -

Invite ${username} to OpenSauced!

+

Invite ${username} to OpenSauced!

-

+

Use the links below to invite them.

diff --git a/src/content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton.ts b/src/content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton.ts index 15bd7b5e..648f51fd 100644 --- a/src/content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton.ts +++ b/src/content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton.ts @@ -6,7 +6,7 @@ export const ViewOnOpenSaucedButton = (username: string) => { const viewOnOpenSaucedButton = createHtmlElement("a", { href: `https://insights.opensauced.pizza/user/${username}/contributions`, className: - "inline-block mt-4 text-white rounded-md p-2 text-sm font-semibold text-center select-none w-full border border-solid cursor-pointer border-orange hover:shadow-button hover:no-underline", + "inline-block mt-4 text-black bg-gh-white dark:bg-gh-gray dark:text-white rounded-md p-2 text-sm font-semibold text-center select-none w-full border hover:shadow-button hover:no-underline", target: "_blank", rel: "noopener noreferrer", innerHTML: ` diff --git a/src/content-scripts/profileScreen.ts b/src/content-scripts/profileScreen.ts index 495f2a15..2727fb2c 100644 --- a/src/content-scripts/profileScreen.ts +++ b/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(); \ No newline at end of file +processProfilePage(); diff --git a/src/utils/colorPreference.ts b/src/utils/colorPreference.ts new file mode 100644 index 00000000..b0737863 --- /dev/null +++ b/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"; +}; diff --git a/src/utils/dom-utils/inviteToOpenSauced.ts b/src/utils/dom-utils/inviteToOpenSauced.ts index c5e16e63..0643b03b 100644 --- a/src/utils/dom-utils/inviteToOpenSauced.ts +++ b/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); }; diff --git a/src/utils/dom-utils/viewOnOpenSauced.ts b/src/utils/dom-utils/viewOnOpenSauced.ts index 186a87b2..857a9308 100644 --- a/src/utils/dom-utils/viewOnOpenSauced.ts +++ b/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); }; diff --git a/tailwind.config.js b/tailwind.config.js index a51ba6cf..b177619b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -13,6 +13,7 @@ module.exports = { }, backgroundColor: { "gh-gray": "#21262d", + "gh-white": "#f6f8fa" } }, }, @@ -56,4 +57,5 @@ module.exports = { }) ], important: true, + darkMode: "class" };