feat(reactotron-app): add auto light/dark mode switching (#1547 by @arkthur)

## Please verify the following:

- [x] `yarn build-and-test:local` passes
- [x] I have added tests for any new features, if relevant
- [x] `README.md` (or relevant documentation) has been updated with your
changes

## Describe your PR

Added a light theme and logic that switches themes according to system
preferences.

Author: arkthur

lib/reactotron-core-ui/src/components/ReactotronAppProvider/index.tsx

@@ -1,7 +1,8 @@
 import React from "react"
 import styled, { ThemeProvider } from "styled-components"
 
-import theme from "../../theme"
+import useColorScheme from "../../hooks/useColorScheme"
+import { themes } from "../../themes"
 
 const ReactotronContainer = styled.div`
   font-family: ${(props) => props.theme.fontFamily};
@@ -12,8 +13,10 @@ const ReactotronContainer = styled.div`
 `
 
 const ReactotronAppProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const colorScheme = useColorScheme()
+
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={themes[colorScheme]}>
       <ReactotronContainer>{children}</ReactotronContainer>
     </ThemeProvider>
   )

lib/reactotron-core-ui/src/components/Tooltip/index.tsx

@@ -16,6 +16,7 @@ function ToolTip(props: TooltipProps) {
       border
       borderColor={theme.highlight}
       textColor={theme.foreground}
+      backgroundColor={theme.backgroundSubtleLight}
       {...props}
     />
   )

lib/reactotron-core-ui/src/components/TreeView/index.tsx

@@ -2,7 +2,8 @@ import React from "react"
 import { JSONTree } from "react-json-tree"
 import styled from "styled-components"
 
-import baseTheme from "../../theme"
+import useColorScheme from "../../hooks/useColorScheme"
+import { ReactotronTheme, themes } from "../../themes"
 
 // TODO: Ripping this right from reactotron right now... should probably be better.
 const theme = {
@@ -30,11 +31,11 @@ const MutedContainer = styled.span`
   color: ${(props) => props.theme.highlight};
 `
 
-const treeTheme = {
+const getTreeTheme = (baseTheme: ReactotronTheme) => ({
   tree: { backgroundColor: "transparent", marginTop: -3 },
   ...theme,
   base0B: baseTheme.foreground,
-}
+})
 
 interface Props {
   // value: object
@@ -43,12 +44,14 @@ interface Props {
 }
 
 export default function TreeView({ value, level = 1 }: Props) {
+  const colorScheme = useColorScheme()
+
   return (
     <JSONTree
       data={value}
       hideRoot
       shouldExpandNodeInitially={(keyName, data, minLevel) => minLevel <= level}
-      theme={treeTheme}
+      theme={getTreeTheme(themes[colorScheme])}
       getItemString={(type, data, itemType, itemString) => {
         if (type === "Object") {
           return <MutedContainer>{itemType}</MutedContainer>

lib/reactotron-core-ui/src/hooks/useColorScheme.test.tsx

@@ -0,0 +1,90 @@
+import { renderHook, act } from "@testing-library/react"
+import useColorScheme from "./useColorScheme"
+
+describe("useColorScheme", () => {
+  const addEventListener = jest.fn()
+  const removeEventListener = jest.fn()
+
+  const mockMatchMedia = jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    addEventListener,
+    removeEventListener
+  }))
+  
+  const originalMatchMedia = window.matchMedia
+  
+  afterEach(() => {
+    jest.resetAllMocks()
+    window.matchMedia = originalMatchMedia
+  })
+
+  it("should return dark when window.matchMedia is undefined", () => {
+    window.matchMedia = undefined
+
+    const { result } = renderHook(() => useColorScheme())
+    expect(result.current).toBe("dark")
+  })
+
+  it("should return light when system preference is light", () => {
+    window.matchMedia = mockMatchMedia
+    mockMatchMedia.mockReturnValue({
+      matches: false,
+      addEventListener,
+      removeEventListener
+    })
+
+    const { result } = renderHook(() => useColorScheme())
+    expect(result.current).toBe("light")
+  })
+
+  it("should return dark when system preference is dark", () => {
+    window.matchMedia = mockMatchMedia
+    mockMatchMedia.mockReturnValue({
+      matches: true,
+      addEventListener,
+      removeEventListener
+    })
+
+    const { result } = renderHook(() => useColorScheme())
+    expect(result.current).toBe("dark")
+  })
+
+  it("should update when system preference changes", () => {
+    let colorSchemeChangeHandler: (e: { matches: boolean }) => void
+    const _addEventListener = jest.fn().mockImplementation((_, handler) => {
+      colorSchemeChangeHandler = handler
+    })
+
+    window.matchMedia = mockMatchMedia
+    mockMatchMedia.mockReturnValue({
+      matches: false,
+      addEventListener: _addEventListener,
+      removeEventListener,
+    })
+
+    const { result } = renderHook(() => useColorScheme())
+    expect(result.current).toBe("light")
+
+    act(() => {
+      colorSchemeChangeHandler({ matches: true })
+    })
+
+    expect(result.current).toBe("dark")
+  })
+
+  it("should clean up event listener on unmount", () => {
+    window.matchMedia = mockMatchMedia
+
+    mockMatchMedia.mockReturnValue({
+      matches: false,
+      addEventListener,
+      removeEventListener,
+    })
+
+    const { unmount } = renderHook(() => useColorScheme())
+    unmount()
+
+    expect(removeEventListener).toHaveBeenCalledWith("change", expect.any(Function))
+  })
+})

lib/reactotron-core-ui/src/hooks/useColorScheme.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { ColorScheme } from "../themes"
+
+function getColorScheme({ matches }: MediaQueryList | MediaQueryListEvent): ColorScheme {
+  return matches ? "dark" : "light"
+}
+
+function useColorScheme(): ColorScheme {
+  const mediaQueryRef = React.useRef<MediaQueryList | null>(window?.matchMedia?.("(prefers-color-scheme: dark)") || null)
+
+  const [colorScheme, setColorScheme] = React.useState<ColorScheme>(() => {
+    if (typeof window === "undefined" || !mediaQueryRef.current) return "dark"
+    return getColorScheme(mediaQueryRef.current)
+  })
+
+  React.useEffect(() => {
+    const mediaQuery = mediaQueryRef.current
+
+    if (!mediaQuery) return () => {}
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setColorScheme(getColorScheme(e))
+    }
+
+    mediaQuery.addEventListener("change", handleChange)
+    return () => mediaQuery.removeEventListener("change", handleChange)
+  }, [])
+
+  return colorScheme
+}
+
+export default useColorScheme

lib/reactotron-core-ui/src/index.ts

@@ -1,5 +1,5 @@
 // Styles
-import theme from "./theme"
+import { themes } from "./themes"
 
 // Components
 import ActionButton from "./components/ActionButton"
@@ -57,7 +57,7 @@ export {
   StateContext,
   StateProvider,
   SubscriptionAddModal,
-  theme,
+  themes,
   TimelineCommand,
   timelineCommandResolver,
   TimelineCommandTabButton,

lib/reactotron-core-ui/src/theme.ts

@@ -0,0 +1,99 @@
+interface ReactotronTheme {
+  fontFamily: string
+  background: string
+  backgroundDarker: string
+  backgroundHighlight: string
+  backgroundLight: string
+  backgroundLighter: string
+  backgroundSubtleDark: string
+  backgroundSubtleLight: string
+  bold: string
+  chrome: string
+  chromeLine: string
+  constant: string
+  foreground: string
+  foregroundDark: string
+  foregroundLight: string
+  glow: string
+  heading: string
+  highlight: string
+  keyword: string
+  line: string
+  modalOverlay: string
+  string: string
+  subtleLine: string
+  support: string
+  tag: string
+  tagComplement: string
+  warning: string
+}
+
+const colorSchemes = ["dark", "light"] as const
+
+type ColorScheme = (typeof colorSchemes)[number]
+
+const themes: Record<ColorScheme, ReactotronTheme> = {
+  dark: {
+    fontFamily:
+      '"Fira Code", "SF Mono", "Consolas", "Segoe UI", "Roboto", "-apple-system", "Helvetica Neue", sans-serif',
+    background: "#1e1e1e",
+    backgroundDarker: "hsl(0, 0%, 10.6%)",
+    backgroundHighlight: "#464b50",
+    backgroundLight: "#ffffff",
+    backgroundLighter: "#323537",
+    backgroundSubtleDark: "hsl(0, 0%, 8.2%)",
+    backgroundSubtleLight: "hsl(0, 0%, 12.4%)",
+    bold: "#f9ee98",
+    chrome: "hsl(0, 0%, 12.9%)",
+    chromeLine: "hsl(0, 0%, 14.7%)",
+    constant: "#cda869",
+    foreground: "#a7a7a7",
+    foregroundDark: "#838184",
+    foregroundLight: "#c3c3c3",
+    glow: "hsla(0, 0%, 9.4%, 0.8)",
+    heading: "#7587a6",
+    highlight: "hsl(290, 3.2%, 47.4%)",
+    keyword: "#9b859d",
+    line: "hsl(204, 4.8%, 18.5%)",
+    modalOverlay: "hsla(0, 0%, 7.1%, 0.95)",
+    string: "#8f9d6a",
+    subtleLine: "hsl(204, 4.8%, 16.5%)",
+    support: "#afc4db",
+    tag: "#cf6a4c",
+    tagComplement: "hsl(13.699999999999989, 57.7%, 91.6%)",
+    warning: "#9b703f",
+  },
+  light: {
+    fontFamily:
+      '"Fira Code", "SF Mono", "Consolas", "Segoe UI", "Roboto", "-apple-system", "Helvetica Neue", sans-serif',
+    background: "#ffffff",
+    backgroundDarker: "hsl(0, 0%, 90%)",
+    backgroundHighlight: "#f0f0f0",
+    backgroundLight: "#f9f9f9",
+    backgroundLighter: "#e6e6e6",
+    backgroundSubtleDark: "hsl(0, 0%, 95%)",
+    backgroundSubtleLight: "hsl(0, 0%, 97%)",
+    bold: "#222222",
+    chrome: "hsl(0, 0%, 90%)",
+    chromeLine: "hsl(0, 0%, 85%)",
+    constant: "#d17d00",
+    foreground: "#333333",
+    foregroundDark: "#555555",
+    foregroundLight: "#666666",
+    glow: "hsla(0, 0%, 90%, 0.8)",
+    heading: "#4b5f85",
+    highlight: "hsl(210, 10%, 70%)",
+    keyword: "#9b0000",
+    line: "hsl(204, 4.8%, 95%)",
+    modalOverlay: "hsla(0, 0%, 100%, 0.95)",
+    string: "#718c00",
+    subtleLine: "hsl(204, 4.8%, 90%)",
+    support: "#597ab8",
+    tag: "#d9484f",
+    tagComplement: "hsl(13.7, 57.7%, 45%)",
+    warning: "#b35900",
+  },
+}
+
+export { themes }
+export type { ColorScheme, ReactotronTheme }