fix: resolvedTheme from useTheme() now reflects forcedTheme

examples/example/pages/dark.js

@@ -1,7 +1,14 @@
+import { useTheme } from 'next-themes'
 import Link from 'next/link'
 
 const Page = () => {
-  return <Link href="/">Go back home</Link>
+  const { resolvedTheme } = useTheme()
+  return (
+    <div>
+      <Link href="/">Go back home</Link>
+      <span data-testid="resolved-theme">{resolvedTheme}</span>
+    </div>
+  )
 }
 
 Page.theme = 'dark'

examples/example/pages/light.js

@@ -1,7 +1,14 @@
+import { useTheme } from 'next-themes'
 import Link from 'next/link'
 
 const Page = () => {
-  return <Link href="/">Go back home</Link>
+  const { resolvedTheme } = useTheme()
+  return (
+    <div>
+      <Link href="/">Go back home</Link>
+      <span data-testid="resolved-theme">{resolvedTheme}</span>
+    </div>
+  )
 }
 
 Page.theme = 'light'

next-themes/src/index.tsx

@@ -155,7 +155,7 @@ const Theme = ({
       theme,
       setTheme,
       forcedTheme,
-      resolvedTheme: theme === 'system' ? resolvedTheme : theme,
+      resolvedTheme: forcedTheme ?? (theme === 'system' ? resolvedTheme : theme),
       themes: enableSystem ? [...themes, 'system'] : themes,
       systemTheme: (enableSystem ? resolvedTheme : undefined) as 'light' | 'dark' | undefined
     }),

test/forced-theme.test.ts

@@ -1,4 +1,4 @@
-import { test } from '@playwright/test'
+import { test, expect } from '@playwright/test'
 import { checkAppliedTheme, checkStoredTheme, makeBrowserContext } from './util'
 
 test.describe('forced theme test-suite', async () => {
@@ -21,4 +21,27 @@ test.describe('forced theme test-suite', async () => {
 
   makeForcedThemeTest('/light', 'dark', 'light')
   makeForcedThemeTest('/dark', 'light', 'dark')
+
+  function makeResolvedThemeTest(pageUrl: string, storedTheme: string, expectedResolvedTheme: string) {
+    test(`resolvedTheme should be "${expectedResolvedTheme}" on ${pageUrl} when stored theme is "${storedTheme}"`, async ({
+      browser,
+      baseURL
+    }) => {
+      const context = await makeBrowserContext(browser, {
+        baseURL,
+        localStorage: [{ name: 'theme', value: storedTheme }]
+      })
+      const page = await context.newPage()
+      await page.goto(pageUrl)
+
+      // resolvedTheme from useTheme() should reflect the forced theme,
+      // not the user's stored preference
+      const resolvedTheme = await page.locator('[data-testid="resolved-theme"]').textContent()
+      expect(resolvedTheme).toBe(expectedResolvedTheme)
+    })
+  }
+
+  // resolvedTheme in context must match the forcedTheme, not the stored preference
+  makeResolvedThemeTest('/light', 'dark', 'light')
+  makeResolvedThemeTest('/dark', 'light', 'dark')
 })