-
-
-
setSceneBackgroundColor(event.target.value)}
- className="h-8 w-12 cursor-pointer rounded border border-gray-200 bg-white p-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
- />
+ {/* Preset themes — one-click cohesive re-skin */}
+
+
{t("themePresets")}
+
+ {THEME_PRESETS.map((preset) => (
+
+ ))}
+
-
-
- setSceneAccentColor(event.target.value)}
- className="h-8 w-12 cursor-pointer rounded border border-gray-200 bg-white p-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
- />
-
+ {/* Manual 4-color tweak */}
+ {swatch("colors-bg", t("mainColor"), sceneBackgroundColor, setSceneBackgroundColor)}
+ {swatch("colors-accent", t("additionalColor"), sceneAccentColor, setSceneAccentColor)}
+ {swatch("colors-secondary", t("secondaryColor"), sceneSecondaryColor, setSceneSecondaryColor)}
+ {swatch("colors-text", t("textColor"), sceneTextColor, setSceneTextColor)}
);
diff --git a/src/lib/studio-scene-data.ts b/src/lib/studio-scene-data.ts
index 5deca1f..1774d61 100644
--- a/src/lib/studio-scene-data.ts
+++ b/src/lib/studio-scene-data.ts
@@ -172,6 +172,8 @@ export interface VideoPersistedSceneData {
audioVolume?: number;
sceneBackgroundColor?: string;
sceneAccentColor?: string;
+ sceneSecondaryColor?: string;
+ sceneTextColor?: string;
/** Project render mode (FIX / FLEXIBLE / MusicVisualizer / …). FIX/MusicVisualizer
* scenes come from AE layer names, so adding scenes is disabled. */
chooseMode?: string;
@@ -190,6 +192,8 @@ export function buildVideoSceneDataPayload(
audioVolume: input.audioVolume,
sceneBackgroundColor: input.sceneBackgroundColor,
sceneAccentColor: input.sceneAccentColor,
+ sceneSecondaryColor: input.sceneSecondaryColor,
+ sceneTextColor: input.sceneTextColor,
};
}
@@ -225,6 +229,14 @@ export function parseVideoSceneData(
typeof sceneData.sceneAccentColor === "string"
? sceneData.sceneAccentColor
: DEFAULT_SCENE_ACCENT_COLOR,
+ sceneSecondaryColor:
+ typeof sceneData.sceneSecondaryColor === "string"
+ ? sceneData.sceneSecondaryColor
+ : DEFAULT_SCENE_ACCENT_COLOR,
+ sceneTextColor:
+ typeof sceneData.sceneTextColor === "string"
+ ? sceneData.sceneTextColor
+ : "#111827",
chooseMode:
typeof sceneData.chooseMode === "string"
? sceneData.chooseMode
diff --git a/src/lib/studio-store.ts b/src/lib/studio-store.ts
index b6df7c1..c4f941b 100644
--- a/src/lib/studio-store.ts
+++ b/src/lib/studio-store.ts
@@ -159,6 +159,10 @@ export interface StudioState {
audioVolume: number;
sceneBackgroundColor: string;
sceneAccentColor: string;
+ /** The 4-color brand theme (matches Remotion SceneColors; secondary+text added
+ * for the scene-engine theme picker). */
+ sceneSecondaryColor: string;
+ sceneTextColor: string;
/** Project render mode (FIX / FLEXIBLE / MusicVisualizer / …). Empty until hydrated. */
chooseMode: string;
past: StudioHistorySnapshot[];
@@ -197,7 +201,12 @@ export interface StudioActions {
setAudioVolume: (volume: number) => void;
setSceneBackgroundColor: (color: string) => void;
setSceneAccentColor: (color: string) => void;
+ setSceneSecondaryColor: (color: string) => void;
+ setSceneTextColor: (color: string) => void;
applyPaletteToAllScenes: (mainColor: string, accentColor: string) => void;
+ /** Apply a full 4-color brand theme (accent/secondary/background/text) to the
+ * project + recolor canvas layers. */
+ applySceneTheme: (accent: string, secondary: string, background: string, text: string) => void;
applyTransitionToAllScenes: (transitionType: SceneTransition) => void;
applyFontFamilyToAllTextLayers: (fontFamily: string) => void;
hydrateFromSceneData: (sceneData: Record
) => boolean;
@@ -251,6 +260,8 @@ export const useStudioStore = create((set, get) => {
audioVolume: 100,
sceneBackgroundColor: DEFAULT_SCENE_BACKGROUND_COLOR,
sceneAccentColor: DEFAULT_SCENE_ACCENT_COLOR,
+ sceneSecondaryColor: DEFAULT_SCENE_ACCENT_COLOR,
+ sceneTextColor: "#111827",
chooseMode: "",
past: [],
future: [],
@@ -638,6 +649,10 @@ export const useStudioStore = create((set, get) => {
setSceneAccentColor: (color) => set({ sceneAccentColor: color }),
+ setSceneSecondaryColor: (color) => set({ sceneSecondaryColor: color }),
+
+ setSceneTextColor: (color) => set({ sceneTextColor: color }),
+
applyPaletteToAllScenes: (mainColor, accentColor) => {
const state = get();
@@ -712,6 +727,51 @@ export const useStudioStore = create((set, get) => {
scheduleActiveSceneThumbnailUpdate();
},
+ applySceneTheme: (accent, secondary, background, text) => {
+ const state = get();
+ // Same canvas-shape heuristic as applyPaletteToAllScenes, but with an explicit
+ // text color (not auto-contrast) and a secondary accent for overlay shapes.
+ const isCanvasBg = (layer: Layer) =>
+ layer.type === "shape" &&
+ layer.zIndex === 0 &&
+ layer.x <= 10 &&
+ layer.y <= 10 &&
+ layer.width >= 1200 &&
+ layer.height >= 600;
+ const isOverlay = (layer: Layer) =>
+ layer.type === "shape" && layer.zIndex >= 2 && layer.opacity <= 0.65;
+
+ const nextScenes = state.scenes.map((scene) => ({
+ ...scene,
+ layers: scene.layers.map((layer) => {
+ if (isCanvasBg(layer)) {
+ return { ...layer, props: { ...layer.props, fill: background, stroke: background } };
+ }
+ if (isOverlay(layer)) {
+ return { ...layer, props: { ...layer.props, fill: secondary, stroke: secondary } };
+ }
+ if (layer.type === "shape") {
+ return { ...layer, props: { ...layer.props, fill: accent, stroke: accent } };
+ }
+ if (layer.type === "text") {
+ return { ...layer, props: { ...layer.props, fill: text } };
+ }
+ return layer;
+ }),
+ }));
+
+ set(
+ pushHistory(state, {
+ scenes: nextScenes,
+ sceneAccentColor: accent,
+ sceneSecondaryColor: secondary,
+ sceneBackgroundColor: background,
+ sceneTextColor: text,
+ })
+ );
+ scheduleActiveSceneThumbnailUpdate();
+ },
+
applyTransitionToAllScenes: (transitionType) => {
set({
scenes: get().scenes.map((scene) => ({ ...scene, transitionType })),
@@ -760,6 +820,9 @@ export const useStudioStore = create((set, get) => {
parsed.sceneBackgroundColor ?? DEFAULT_SCENE_BACKGROUND_COLOR,
sceneAccentColor:
parsed.sceneAccentColor ?? DEFAULT_SCENE_ACCENT_COLOR,
+ sceneSecondaryColor:
+ parsed.sceneSecondaryColor ?? DEFAULT_SCENE_ACCENT_COLOR,
+ sceneTextColor: parsed.sceneTextColor ?? "#111827",
chooseMode: parsed.chooseMode ?? "",
past: [],
future: [],
@@ -779,6 +842,8 @@ export const useStudioStore = create((set, get) => {
audioVolume: state.audioVolume,
sceneBackgroundColor: state.sceneBackgroundColor,
sceneAccentColor: state.sceneAccentColor,
+ sceneSecondaryColor: state.sceneSecondaryColor,
+ sceneTextColor: state.sceneTextColor,
});
},
};