What causes "ThemeColorsContext not found" in remotion-dev/remotion?

Wrap the component tree in from @remotion/brand before calling useThemeColors.

ThemeColorsContext not found

Error message

ThemeColorsContext not found

What it means

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.

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.

Example fix

// before
const colors = useThemeColors();
// after
<ThemeProvider>
  <MyComponent /> // inside MyComponent: const colors = useThemeColors();
</ThemeProvider>

Defensive patterns

Strategy: try-catch

Validate before calling

// Ensure provider exists in test setup
render(<ThemeProvider><MyComponent /></ThemeProvider>);

Try / catch

try {
  const colors = useThemeColors();
} catch {
  // fallback: hook used outside provider
  const colors = defaultThemeColors;
}

Prevention

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.

When it happens

Trigger: 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.

Common situations: 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.

Understand the failure class

Background: "missing required argument" and "the following required arguments were not provided": what required-argument errors mean and how to fix them — this error's family across 20 libraries.

Related errors

AI-assisted analysis of remotion-dev/remotion@46a3a6bf13 (2026-09-18). Data as JSON: /api/errors/24c1cb848da260ae. Report an issue: GitHub.

Appendix: source

Thrown at packages/brand/src/announcements/whats-new-in-remotion/calculate-metadata/theme.tsx:11

import type {getThemeColors} from '@code-hike/lighter';
import React from 'react';

export type ThemeColors = Awaited<ReturnType<typeof getThemeColors>>;

export const ThemeColorsContext = React.createContext<ThemeColors | null>(null);

export const useThemeColors = () => {
	const themeColors = React.useContext(ThemeColorsContext);
	if (!themeColors) {
		throw new Error('ThemeColorsContext not found');
	}

	return themeColors;
};

export const ThemeProvider = ({
	children,
	themeColors,
}: {
	readonly children: React.ReactNode;
	readonly themeColors: ThemeColors;
}) => {
	return (
		<ThemeColorsContext.Provider value={themeColors}>
			{children}
		</ThemeColorsContext.Provider>
	);
};

View on GitHub (pinned to 46a3a6bf13)