RFC: added brandcolor for switch (#8213)

apps/web/pages/settings/my-account/appearance.tsx

@@ -52,6 +52,7 @@ const AppearanceView = () => {
   const utils = trpc.useContext();
   const { data: user, isLoading } = trpc.viewer.me.useQuery();
   const [darkModeError, setDarkModeError] = useState(false);
+  const [lightModeError, setLightModeError] = useState(false);
 
   const { isLoading: isTeamPlanStatusLoading, hasPaidPlan } = useHasPaidPlan();
 
@@ -145,7 +146,14 @@ const AppearanceView = () => {
               <p className="text-default mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
               <ColorPicker
                 defaultValue={user.brandColor}
-                onChange={(value) => formMethods.setValue("brandColor", value, { shouldDirty: true })}
+                onChange={(value) => {
+                  if (!checkWCAGContrastColor("#ffffff", value)) {
+                    setLightModeError(true);
+                  } else {
+                    setLightModeError(false);
+                  }
+                  formMethods.setValue("brandColor", value, { shouldDirty: true });
+                }}
               />
             </div>
           )}
@@ -180,6 +188,14 @@ const AppearanceView = () => {
           />
         </div>
       ) : null}
+      {lightModeError ? (
+        <div className="mt-4">
+          <Alert
+            severity="warning"
+            message="Light Theme color doesn't pass contrast check. We recommend you change this colour so your buttons will be more visible."
+          />
+        </div>
+      ) : null}
       {/* TODO future PR to preview brandColors */}
       {/* <Button
         color="secondary"