style: 💄 Update styles.

- Change global background color.
- Apply different color scheme.
- Change navbar color, sidebar color, input background.
- Add custom Button variant.

app/(browse)/_components/navbar/index.tsx

@@ -4,7 +4,7 @@ import Search from "./search";
 
 const Navbar = () => {
   return (
-    <nav className="fixed top-0 w-full h-20 z-[49] bg-background px-2 lg:px-4 flex justify-between items-center shadow-sm">
+    <nav className="fixed top-0 w-full h-20 z-[49] bg-primary-foreground px-2 lg:px-4 flex justify-between items-center shadow-sm">
       <Logo />
       <Search />
       <Actions />

app/(browse)/_components/navbar/search.tsx

@@ -41,7 +41,7 @@ const Search = () => {
         value={value}
         onChange={(e) => setValue(e.target.value)}
         placeholder="Search"
-        className="rounded-r-none focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0"
+        className="rounded-r-none focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 bg-secondary/40"
       />
 
       {value && (

app/(browse)/_components/sidebar/toggle.tsx

@@ -32,7 +32,7 @@ const Toggle = () => {
       )}
       {!collapsed && (
         <div className="p-3 pl-6 mb-2 flex items-center w-full">
-          <p className="font-semibold text-primary"> For you</p>
+          <p className="font-semibold text-foreground">Recommended</p>
           <Hint
             label={label}
             side="right"

app/(browse)/_components/sidebar/wrapper.tsx

@@ -13,7 +13,7 @@ const Wrapper = ({ children }: WrapperProps) => {
   return (
     <aside
       className={cn(
-        "fixed left-0 flex flex-col w-60 h-full bg-background z-50",
+        "fixed left-0 flex flex-col w-60 h-full bg-secondary/40 z-50",
         collapsed && "w-[70px]"
       )}
     >

app/globals.css

@@ -6,7 +6,9 @@ html,
 body,
 :root {
   height: 100%;
-  @apply bg-primary-foreground;
+  @apply bg-background;
+  /* @apply bg-primary-foreground; */
+  /* @apply bg-neutral-900/80; */
 }
 
 .hidden-scrollbar {

components/ui/button.tsx

@@ -9,7 +9,8 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-blue-700 text-secondary-foreground hover:bg-blue-700/80",
+        default:
+          "bg-primary dark:bg-blue-700 text-secondary-foreground hover:bg-primary/90 dark:hover:bg-blue-700/80",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
@@ -18,6 +19,8 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        primary:
+          "bg-primary dark:bg-blue-700 text-primary-foreground hover:bg-primary/90 dark:hover:bg-blue-700/80",
       },
       size: {
         default: "h-10 px-4 py-2",