Should resolvedTheme obey forcedTheme?

[shekharkhedekar]

We currently have enableSystem=true and use resolvedTheme all over our app. We also have a feature flag that turns theming on and off. But, if we set forcedTheme="light" and the system theme is dark, resolvedTheme still resolves to dark.

Unless I'm misunderstanding, it seems like resolvedTheme should be the same as forcedTheme if it is set.

Expected:

System Theme	Theme	Forced Theme	Resolved Theme
light	system	undefined	light
dark	system	undefined	dark
light	light	undefined	light
dark	light	undefined	light
light	system	light	light
dark	system	light	light
light	system	dark	dark
dark	system	dark	dark
light	custom-theme	dark	dark
dark	custom-theme	dark	dark

[shekharkhedekar]

cc @zachalbert

[shekharkhedekar]

Here's what we are doing in the meantime:

import { useTheme as nextUseTheme } from "next-themes";

export const useTheme = () => {
	const nextTheme = nextUseTheme();

	const resolvedTheme = useMemo(
		() =>
			nextTheme.forcedTheme !== undefined ? nextTheme.forcedTheme : nextTheme.resolvedTheme,
		[nextTheme.forcedTheme, nextTheme.resolvedTheme]
	);

	return {
		...nextTheme,
		resolvedTheme,
	};
};

[trm217]

This behaviour will be in v1