import { observer } from "mobx-react-lite"; import { Controller, useForm } from "react-hook-form"; import { useTheme } from "next-themes"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // ui import { Button, InputColorPicker } from "@plane/ui"; // types import { IUserTheme } from "types"; const inputRules = { required: "Background color is required", minLength: { value: 7, message: "Enter a valid hex code of 6 characters", }, maxLength: { value: 7, message: "Enter a valid hex code of 6 characters", }, pattern: { value: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, message: "Enter a valid hex code of 6 characters", }, }; export const CustomThemeSelector: React.FC = observer(() => { const { user: userStore } = useMobxStore(); const userTheme = userStore?.currentUser?.theme; // hooks const { setTheme } = useTheme(); const { control, formState: { errors, isSubmitting }, handleSubmit, watch, } = useForm({ defaultValues: { background: userTheme?.background !== "" ? userTheme?.background : "#0d101b", text: userTheme?.text !== "" ? userTheme?.text : "#c5c5c5", primary: userTheme?.primary !== "" ? userTheme?.primary : "#3f76ff", sidebarBackground: userTheme?.sidebarBackground !== "" ? userTheme?.sidebarBackground : "#0d101b", sidebarText: userTheme?.sidebarText !== "" ? userTheme?.sidebarText : "#c5c5c5", darkPalette: userTheme?.darkPalette || false, palette: userTheme?.palette !== "" ? userTheme?.palette : "", }, }); const handleUpdateTheme = async (formData: any) => { const payload: IUserTheme = { background: formData.background, text: formData.text, primary: formData.primary, sidebarBackground: formData.sidebarBackground, sidebarText: formData.sidebarText, darkPalette: false, palette: `${formData.background},${formData.text},${formData.primary},${formData.sidebarBackground},${formData.sidebarText}`, theme: "custom", }; setTheme("custom"); return userStore.updateCurrentUser({ theme: payload }); }; const handleValueChange = (val: string | undefined, onChange: any) => { let hex = val; // prepend a hashtag if it doesn't exist if (val && val[0] !== "#") hex = `#${val}`; onChange(hex); }; return (

Customize your theme

Background color

( handleValueChange(val, onChange)} placeholder="#0d101b" className="w-full" style={{ backgroundColor: value, color: watch("text"), }} hasError={Boolean(errors?.background)} /> )} /> {errors.background &&

{errors.background.message}

}

Text color

( handleValueChange(val, onChange)} placeholder="#c5c5c5" className="w-full" style={{ backgroundColor: watch("background"), color: value, }} hasError={Boolean(errors?.text)} /> )} /> {errors.text &&

{errors.text.message}

}

Primary(Theme) color

( handleValueChange(val, onChange)} placeholder="#3f76ff" className="w-full" style={{ backgroundColor: value, color: watch("text"), }} hasError={Boolean(errors?.primary)} /> )} /> {errors.primary &&

{errors.primary.message}

}

Sidebar background color

( handleValueChange(val, onChange)} placeholder="#0d101b" className="w-full" style={{ backgroundColor: value, color: watch("sidebarText"), }} hasError={Boolean(errors?.sidebarBackground)} /> )} /> {errors.sidebarBackground && (

{errors.sidebarBackground.message}

)}

Sidebar text color

( handleValueChange(val, onChange)} placeholder="#c5c5c5" className="w-full" style={{ backgroundColor: watch("sidebarBackground"), color: value, }} hasError={Boolean(errors?.sidebarText)} /> )} /> {errors.sidebarText &&

{errors.sidebarText.message}

}
); });