{"record":{"id":"24c1cb848da260ae","repo":"remotion-dev/remotion","slug":"themecolorscontext-not-found","errorCode":null,"errorMessage":"ThemeColorsContext not found","messagePattern":"ThemeColorsContext not found","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/brand/src/announcements/whats-new-in-remotion/calculate-metadata/theme.tsx","lineNumber":11,"sourceCode":"import type {getThemeColors} from '@code-hike/lighter';\nimport React from 'react';\n\nexport type ThemeColors = Awaited<ReturnType<typeof getThemeColors>>;\n\nexport const ThemeColorsContext = React.createContext<ThemeColors | null>(null);\n\nexport const useThemeColors = () => {\n\tconst themeColors = React.useContext(ThemeColorsContext);\n\tif (!themeColors) {\n\t\tthrow new Error('ThemeColorsContext not found');\n\t}\n\n\treturn themeColors;\n};\n\nexport const ThemeProvider = ({\n\tchildren,\n\tthemeColors,\n}: {\n\treadonly children: React.ReactNode;\n\treadonly themeColors: ThemeColors;\n}) => {\n\treturn (\n\t\t<ThemeColorsContext.Provider value={themeColors}>\n\t\t\t{children}\n\t\t</ThemeColorsContext.Provider>\n\t);\n};","sourceCodeStart":1,"sourceCodeEnd":29,"githubUrl":"https://github.com/remotion-dev/remotion/blob/46a3a6bf13ca367376ff18bbb06dae2e87e0d068/packages/brand/src/announcements/whats-new-in-remotion/calculate-metadata/theme.tsx#L1-L29","documentation":"useThemeColors reads theme colors from a React context that must be provided by ThemeProvider. If no provider is mounted above the component, the context is null and this error is thrown to fail fast instead of silently returning null colors. It indicates the hook is being used outside the Remotion theme context.","triggerScenarios":"Calling useThemeColors() in a component not wrapped by ThemeProvider; importing the hook into a package or test that renders the component without the provider; rendering a component that consumes theme colors during SSR or a story without mounting ThemeProvider.","commonSituations":"Custom Studio UI plugins or announcements pages using theme colors without the provider; unit tests that shallow-render a component using the hook; moving a component to a different app that doesn't mount ThemeProvider.","solutions":["Wrap the component tree in <ThemeProvider> from @remotion/brand before calling useThemeColors.","In tests, render with a helper that includes ThemeProvider (e.g. custom render wrapper).","If colors are only needed optionally, read ThemeColorsContext directly with React.useContext and handle null instead of throwing."],"exampleFix":"// before\nconst colors = useThemeColors();\n// after\n<ThemeProvider>\n  <MyComponent /> // inside MyComponent: const colors = useThemeColors();\n</ThemeProvider>","handlingStrategy":"try-catch","validationCode":"// Ensure provider exists in test setup\nrender(<ThemeProvider><MyComponent /></ThemeProvider>);","typeGuard":null,"tryCatchPattern":"try {\n  const colors = useThemeColors();\n} catch {\n  // fallback: hook used outside provider\n  const colors = defaultThemeColors;\n}","preventionTips":["Always mount ThemeProvider at the app/story root.","Use a test render wrapper that includes ThemeProvider.","Prefer reading ThemeColorsContext with useContext and a default value for optional contexts."],"tags":["react","context","missing-provider"],"backgroundTag":"missing-required-argument","analyzedSha":"46a3a6bf13ca367376ff18bbb06dae2e87e0d068","analyzedAt":"2026-09-18T00:12:20.256Z","contentChangedAt":"2026-09-18T00:12:20.256Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}