Follow the user's github theme instead of system (#444)

Fixes #443
KittyCAD · Nov 30, 2023 · b53062b · b53062b
1 parent e57e7e0
commit b53062b
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 2 deletions.
diff --git a/src/chrome/content.ts b/src/chrome/content.ts
@@ -9,6 +9,7 @@ import {
     createReactRoot,
     getGithubBlobUrlParams,
     getGithubCommitWithinPullUrlParams,
+    getGithubColorMode,
 } from './web'
 import gitHubInjection from 'github-injection'
 import { isFilenameSupported } from './diff'
@@ -24,12 +25,14 @@ async function injectDiff(
     document: Document
 ) {
     const map = mapInjectableDiffElements(document, files)
+    const colorMode = getGithubColorMode(document)
     const cadDiffPage = React.createElement(CadDiffPage, {
         owner,
         repo,
         sha,
         parentSha,
         map,
+        colorMode,
     })
     root.render(cadDiffPage)
 }
@@ -60,13 +63,15 @@ async function injectBlob(
     }
 
     element.classList.add('kittycad-injected-file')
+    const colorMode = getGithubColorMode(document)
     const cadBlobPage = React.createElement(CadBlobPage, {
         element,
         owner,
         repo,
         sha,
         filename,
         classicUi,
+        colorMode,
     })
     root.render(cadBlobPage)
 }

diff --git a/src/chrome/web.test.ts b/src/chrome/web.test.ts
@@ -9,6 +9,7 @@ import {
     createReactRoot,
     getGithubBlobUrlParams,
     getGithubCommitWithinPullUrlParams,
+    getGithubColorMode,
 } from './web'
 
 const githubPullHtmlSnippet = `
@@ -221,3 +222,36 @@ it('adds a div element, creates a react root inside, and can render', () => {
     expect(root).toBeDefined()
     expect(() => root.render(React.createElement('a'))).not.toThrow()
 })
+
+it('finds the right color mode from GitHub', () => {
+    const lightHtml = `
+    <html lang="en"
+          data-color-mode="light" data-light-theme="light" data-dark-theme="dark"
+          data-a11y-animated-images="system" data-a11y-link-underlines="true">
+    </html>
+    `
+    const lightDocument = parser.parseFromString(lightHtml, 'text/html')
+    expect(getGithubColorMode(lightDocument)).toEqual('light')
+
+    const darkHtml = `
+    <html lang="en"
+          data-color-mode="dark" data-light-theme="light" data-dark-theme="dark"
+          data-a11y-animated-images="system" data-a11y-link-underlines="true">
+    </html>
+    `
+    const darkDocument = parser.parseFromString(darkHtml, 'text/html')
+    expect(getGithubColorMode(darkDocument)).toEqual('dark')
+
+    const sysHtml = `
+    <html lang="en"
+          data-color-mode="auto" data-light-theme="light" data-dark-theme="dark"
+          data-a11y-animated-images="system" data-a11y-link-underlines="true">
+    </html>
+    `
+    const sysDocument = parser.parseFromString(sysHtml, 'text/html')
+    expect(getGithubColorMode(sysDocument)).toEqual('auto')
+
+    const irrelevantHtml = '<html></html>'
+    const irrDocument = parser.parseFromString(irrelevantHtml, 'text/html')
+    expect(getGithubColorMode(irrDocument)).toEqual('auto')
+})
diff --git a/src/chrome/web.ts b/src/chrome/web.ts
@@ -1,3 +1,4 @@
+import { ColorModeWithAuto } from '@primer/react/lib/ThemeProvider'
 import { createRoot, Root } from 'react-dom/client'
 import { isFilenameSupported, extensionToSrcFormat } from './diff'
 import { DiffEntry } from './types'
@@ -156,3 +157,13 @@ export function createReactRoot(
     document.body.appendChild(node)
     return createRoot(node)
 }
+
+export function getGithubColorMode(document: Document): ColorModeWithAuto {
+    const html = document.querySelector('html')
+    const attr = 'data-color-mode'
+    if (!html || !html.getAttribute(attr)) {
+        return 'auto'
+    }
+
+    return html.getAttribute(attr) as ColorModeWithAuto
+}
diff --git a/src/components/settings/Settings.tsx b/src/components/settings/Settings.tsx
@@ -127,6 +127,7 @@ export function Settings() {
     }, [])
 
     return (
+        // Setting colorMode to 'auto' as this popup is part of Chrome
         <ThemeProvider colorMode="auto">
             <Box backgroundColor="canvas.default" width={300} p={4}>
                 {firstInitDone ? (

diff --git a/src/components/viewer/CadBlobPage.tsx b/src/components/viewer/CadBlobPage.tsx
@@ -5,6 +5,7 @@ import { FileBlob, MessageIds } from '../../chrome/types'
 import { createPortal } from 'react-dom'
 import { Loading } from '../Loading'
 import { CadBlob } from './CadBlob'
+import { ColorModeWithAuto } from '@primer/react/lib/ThemeProvider'
 
 function CadBlobPortal({
     element,
@@ -148,6 +149,7 @@ export type CadBlobPageProps = {
     sha: string
     filename: string
     classicUi: boolean
+    colorMode: ColorModeWithAuto
 }
 
 export function CadBlobPage({
@@ -157,9 +159,10 @@ export function CadBlobPage({
     sha,
     filename,
     classicUi,
+    colorMode,
 }: CadBlobPageProps): React.ReactElement {
     return (
-        <ThemeProvider colorMode="auto">
+        <ThemeProvider colorMode={colorMode}>
             <CadBlobPortal
                 element={element}
                 owner={owner}

diff --git a/src/components/viewer/CadDiffPage.tsx b/src/components/viewer/CadDiffPage.tsx
@@ -6,6 +6,7 @@ import { createPortal } from 'react-dom'
 import { Loading } from '../Loading'
 import { CadDiff } from './CadDiff'
 import { SourceRichToggle } from './SourceRichToggle'
+import { ColorModeWithAuto } from '@primer/react/lib/ThemeProvider'
 
 function CadDiffPortal({
     element,
@@ -107,6 +108,7 @@ export type CadDiffPageProps = {
     repo: string
     sha: string
     parentSha: string
+    colorMode: ColorModeWithAuto
 }
 
 export function CadDiffPage({
@@ -115,9 +117,10 @@ export function CadDiffPage({
     repo,
     sha,
     parentSha,
+    colorMode,
 }: CadDiffPageProps): React.ReactElement {
     return (
-        <ThemeProvider colorMode="auto">
+        <ThemeProvider colorMode={colorMode}>
             {map.map(m => (
                 <CadDiffPortal
                     key={m.file.filename}