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/pages/[workspaceSlug]/settings/index.tsx

@@ -184,7 +184,7 @@ const WorkspaceSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">Logo</h4>
-              <p className="text-gray-500">
+              <p className="text-brand-secondary">
                 Max file size is 5MB. Supported file types are .jpg and .png.
               </p>
             </div>
@@ -228,7 +228,7 @@ const WorkspaceSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">URL</h4>
-              <p className="text-gray-500">Your workspace URL.</p>
+              <p className="text-brand-secondary">Your workspace URL.</p>
             </div>
             <div className="col-span-12 flex items-center gap-2 sm:col-span-6">
               <Input
@@ -268,7 +268,7 @@ const WorkspaceSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">Name</h4>
-              <p className="text-gray-500">Give a name to your workspace.</p>
+              <p className="text-brand-secondary">Give a name to your workspace.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               <Input
@@ -287,7 +287,7 @@ const WorkspaceSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">Company Size</h4>
-              <p className="text-gray-500">How big is your company?</p>
+              <p className="text-brand-secondary">How big is your company?</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               <Controller
@@ -318,7 +318,7 @@ const WorkspaceSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">Danger Zone</h4>
-              <p className="text-gray-500">
+              <p className="text-brand-secondary">
                 The danger zone of the workspace delete page is a critical area that requires
                 careful consideration and attention. When deleting a workspace, all of the data and
                 resources within that workspace will be permanently removed and cannot be recovered.

apps/app/pages/[workspaceSlug]/settings/members.tsx

@@ -142,7 +142,7 @@ const MembersSettings: NextPage = () => {
             <h3 className="text-2xl font-semibold">Members</h3>
             <button
               type="button"
-              className="flex items-center gap-2 text-theme outline-none"
+              className="flex items-center gap-2 text-brand-accent outline-none"
               onClick={() => setInviteModal(true)}
             >
               <PlusIcon className="h-4 w-4" />
@@ -157,7 +157,7 @@ const MembersSettings: NextPage = () => {
               <Loader.Item height="40px" />
             </Loader>
           ) : (
-            <div className="divide-y rounded-[10px] border border-gray-200 bg-white px-6">
+            <div className="divide-y rounded-[10px] divide-brand-base border border-brand-base bg-brand-surface-1 px-6">
               {members.length > 0
                 ? members.map((member) => (
                     <div key={member.id} className="flex items-center justify-between py-6">
@@ -181,12 +181,12 @@ const MembersSettings: NextPage = () => {
                           <h4 className="text-sm">
                             {member.first_name} {member.last_name}
                           </h4>
-                          <p className="text-xs text-gray-500">{member.email}</p>
+                          <p className="text-xs text-brand-secondary">{member.email}</p>
                         </div>
                       </div>
                       <div className="flex items-center">
                         {!member?.status && (
-                          <div className="flex mr-2 px-2 py-1 bg-yellow-200 text-center rounded-full text-xs items-center justify-center">
+                          <div className="flex mr-2 px-2 py-1 bg-yellow-200 text-yellow-700 text-center rounded-full text-xs items-center justify-center">
                             <p>Pending</p>
                           </div>
                         )}