feat: Default color mode to user's current system theme

src/App.test.tsx

@@ -40,6 +40,7 @@ vi.mock('services/navigation', async () => {
     useLocationParams: vi.fn(),
   }
 })
+window.matchMedia = vi.fn().mockResolvedValue({ matches: false })
 
 const mockedUseLocationParams = useLocationParams as Mock
 
@@ -163,6 +164,7 @@ beforeEach(() => {
 })
 
 afterAll(() => {
+  vi.clearAllMocks()
   server.close()
 })
 

src/globals.css

@@ -253,6 +253,8 @@
     --color-code-operator: 219 178, 89;
   }
 
+  /* Also used for prefers-color-scheme: light */
+  /* explicitly define it below if we want to change behavior */
   body {
     @apply lightMode;
   }
@@ -261,7 +263,7 @@
     @apply darkMode;
   }
 
-  /* new body theme can be applied here
+  /* new body theme can be applied here */
 
   @media (prefers-color-scheme: dark) {
     body {
@@ -271,9 +273,7 @@
     body.light {
       @apply lightMode;
     }
-
-     new body theme added above should be applied here as well to cover specificity
-  } */
+  }
 }
 
 #sentry-feedback {

src/layouts/Header/components/GuestHeader/GuestHeader.test.tsx

@@ -10,6 +10,7 @@ import { ThemeContextProvider } from 'shared/ThemeContext'
 import GuestHeader from './GuestHeader'
 
 vi.mock('config')
+window.matchMedia = vi.fn().mockResolvedValue({ matches: false })
 
 // silence console errors
 console.error = () => {}
@@ -31,6 +32,7 @@ const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
 )
 
 afterEach(() => {
+  vi.clearAllMocks()
   queryClient.clear()
 })
 

src/layouts/Header/components/HelpDropdown/HelpDropdown.test.tsx

@@ -59,6 +59,8 @@ vi.mock('@sentry/react', async () => {
   }
 })
 
+window.matchMedia = vi.fn().mockResolvedValue({ matches: false })
+
 afterEach(() => {
   cleanup()
   vi.clearAllMocks()

src/layouts/LoginLayout/LoginLayout.test.tsx

@@ -19,6 +19,7 @@ vi.mock('react-router-dom', async () => {
     useLocation: mocks.useLocation,
   }
 })
+window.matchMedia = vi.fn().mockResolvedValue({ matches: false })
 
 const server = setupServer()
 const queryClient = new QueryClient()

src/pages/CodecovAIPage/CodecovAIPage.test.tsx

@@ -19,6 +19,7 @@ vi.mock('shared/featureFlags', async () => {
     useFlags: mocks.useFlags,
   }
 })
+window.matchMedia = vi.fn().mockResolvedValue({ matches: false })
 
 const queryClient = new QueryClient({
   defaultOptions: {

src/pages/EnterpriseLandingPage/EnterpriseLandingPage.test.tsx

@@ -9,6 +9,7 @@ import { ThemeContextProvider } from 'shared/ThemeContext'
 import EnterpriseLandingPage from './EnterpriseLandingPage'
 
 vi.mock('config')
+window.matchMedia = vi.fn().mockResolvedValue({ matches: false })
 
 const server = setupServer()
 const queryClient = new QueryClient()
@@ -47,6 +48,7 @@ afterEach(() => {
 })
 
 afterAll(() => {
+  vi.clearAllMocks()
   server.close()
 })
 

src/pages/EnterpriseLandingPage/ProviderCard/ProviderCard.test.tsx

@@ -6,6 +6,8 @@ import { LoginProvidersEnum } from 'shared/utils/loginProviders'
 
 import ProviderCard, { InternalProviderButton } from './ProviderCard'
 
+window.matchMedia = vi.fn().mockResolvedValue({ matches: false })
+
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <ThemeContextProvider>
     <MemoryRouter initialEntries={['/']}>
@@ -15,6 +17,9 @@ const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
 )
 
 describe('ProviderCard', () => {
+  afterAll(() => {
+    vi.clearAllMocks()
+  })
   describe('Bitbucket', () => {
     describe('when system is configured with Bitbucket', () => {
       it('renders external login button', () => {

src/pages/LoginPage/LoginButton.test.jsx

@@ -5,6 +5,8 @@ import { ThemeContextProvider } from 'shared/ThemeContext'
 
 import LoginButton from './LoginButton'
 
+window.matchMedia = vi.fn().mockResolvedValue({ matches: false })
+
 const wrapper =
   ({ initialEntries, path }) =>
   ({ children }) => (
@@ -18,6 +20,9 @@ const wrapper =
   )
 
 describe('LoginButton', () => {
+  afterAll(() => {
+    vi.clearAllMocks()
+  })
   describe('bitbucket', () => {
     it('renders bitbucket login button', () => {
       render(<LoginButton provider="bb" />, {

src/pages/LoginPage/LoginPage.test.jsx

@@ -22,6 +22,7 @@ describe('LoginPage', () => {
   function setup() {
     const mockSetItem = vi.spyOn(window.localStorage.__proto__, 'setItem')
     const mockGetItem = vi.spyOn(window.localStorage.__proto__, 'getItem')
+    window.matchMedia = vi.fn().mockResolvedValue({ matches: false })
 
     return { mockSetItem, mockGetItem }
   }

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.test.tsx

@@ -19,6 +19,8 @@ vi.mock('services/account/useUpdateBillingAddress', async () => {
   }
 })
 
+window.matchMedia = vi.fn().mockResolvedValue({ matches: false })
+
 const subscriptionDetail = {
   defaultPaymentMethod: {
     card: {
@@ -74,6 +76,9 @@ vi.mock('@stripe/react-stripe-js', () => {
 })
 
 describe('AddressCard', () => {
+  afterAll(() => {
+    vi.clearAllMocks()
+  })
   function setup() {
     const user = userEvent.setup()
 

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx

@@ -16,6 +16,7 @@ vi.mock('services/account', async () => {
     useUpdateCard: mocks.useUpdateCard,
   }
 })
+window.matchMedia = vi.fn().mockResolvedValue({ matches: false })
 
 const subscriptionDetail = {
   defaultPaymentMethod: {
@@ -55,6 +56,9 @@ vi.mock('@stripe/react-stripe-js', () => {
 })
 
 describe('PaymentCard', () => {
+  afterAll(() => {
+    vi.clearAllMocks()
+  })
   function setup() {
     const user = userEvent.setup()
 

src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.test.tsx

@@ -22,8 +22,13 @@ const wrapper: (initialEntries?: string) => React.FC<PropsWithChildren> =
 vi.mock('../FrameworkTabsCard', () => ({
   FrameworkTabsCard: () => 'FrameworkTabsCard',
 }))
+window.matchMedia = vi.fn().mockResolvedValue({ matches: false })
 
 describe('CodecovCLI', () => {
+  afterAll(() => {
+    vi.clearAllMocks()
+  })
+
   function setup() {
     const user = userEvent.setup()
     return { user }

src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.test.tsx

@@ -10,6 +10,7 @@ import GitHubActions from './GitHubActions'
 vi.mock('../FrameworkTabsCard', () => ({
   FrameworkTabsCard: () => 'FrameworkTabsCard',
 }))
+window.matchMedia = vi.fn().mockResolvedValue({ matches: false })
 
 const wrapper: (initialEntries?: string) => React.FC<PropsWithChildren> =
   (initialEntries = '/gh/codecov/cool-repo/tests') =>
@@ -22,6 +23,9 @@ const wrapper: (initialEntries?: string) => React.FC<PropsWithChildren> =
   )
 
 describe('GitHubActions', () => {
+  afterAll(() => {
+    vi.clearAllMocks()
+  })
   function setup() {
     const user = userEvent.setup()
     return { user }

src/shared/ThemeContext/ThemeContext.test.tsx

@@ -27,6 +27,7 @@ describe('Theme context', () => {
   function setup() {
     window.localStorage.__proto__.setItem = vi.fn()
     window.localStorage.__proto__.getItem = vi.fn()
+    window.matchMedia = vi.fn().mockResolvedValue({ matches: false })
 
     const user = userEvent.setup()
 

src/shared/ThemeContext/ThemeContext.tsx

@@ -29,8 +29,15 @@ interface ThemeContextProviderProps {
 export const ThemeContextProvider: FC<ThemeContextProviderProps> = ({
   children,
 }) => {
-  const currentTheme = (localStorage.getItem('theme') as Theme) || Theme.LIGHT
-  const [theme, setTheme] = useState<Theme>(currentTheme)
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+
+  let systemTheme = Theme.LIGHT
+  if (prefersDark) {
+    systemTheme = Theme.DARK
+  }
+
+  const currentTheme = localStorage.getItem('theme') as Theme
+  const [theme, setTheme] = useState<Theme>(currentTheme ?? systemTheme)
   const initialRender = useRef(true)
 
   if (initialRender.current) {