feat: themes (#902)

* chore: add next theme and initial setup

* chore: add dark mode colors to layouts

* chore: user general setting page theming

* chore: dashboard theming

* chore: project page theming

* chore: workspace setting page theming

* chore: my issue page theming

* chore: cmdk theming

* chore: change hardcode bg and text color to theme

* chore: change color name according to the design

* style: fix card in the dashboard

* style: fix merge conflict design issues

* style: add light high contrast and dark high contrast

* style: fix cmd k menu color and selection

* feat: change theme from cmdk menu

* chore: add multiple theme field to custom theme

* chore: removed custom theming

* fix: build error

---------

Co-authored-by: Saheb Giri <iamsahebgiri@gmail.com>

apps/app/components/command-palette/change-interface-theme.tsx

@@ -0,0 +1,45 @@
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+
+// cmdk
+import { Command } from "cmdk";
+import { THEMES_OBJ } from "constants/themes";
+import { useTheme } from "next-themes";
+import { SettingIcon } from "components/icons";
+
+type Props = {
+  setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+export const ChangeInterfaceTheme: React.FC<Props> = ({ setIsPaletteOpen }) => {
+  const [mounted, setMounted] = useState(false);
+  const { setTheme } = useTheme();
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <>
+      {THEMES_OBJ.map((theme) => (
+        <Command.Item
+          key={theme.value}
+          onSelect={() => {
+            setTheme(theme.value);
+            setIsPaletteOpen(false);
+          }}
+          className="focus:outline-none"
+        >
+          <div className="flex items-center gap-2 text-brand-secondary">
+            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+            {theme.label}
+          </div>
+        </Command.Item>
+      ))}
+    </>
+  );
+};