feat(app-bottom-nav): update styles and add variant support; integrate dark variant in SplashScreen

src/app/_components/core/app-bottom-nav.tsx

@@ -5,20 +5,23 @@ import { Camera, MessageCircle } from "lucide-react";
 import styles from "./app-bottom-nav.module.css";
 
 export type AppBottomNavItem = "chat" | "privateRoom";
+export type AppBottomNavVariant = "warm" | "dark";
 
 export interface AppBottomNavProps {
   activeItem?: AppBottomNavItem | null;
+  variant?: AppBottomNavVariant;
   onChatClick: () => void;
   onPrivateRoomClick: () => void;
 }
 
 export function AppBottomNav({
   activeItem = null,
+  variant = "warm",
   onChatClick,
   onPrivateRoomClick,
 }: AppBottomNavProps) {
   return (
-    <nav className={styles.root} aria-label="Primary navigation">
+    <nav className={getRootClass(variant)} aria-label="Primary navigation">
       <button
         type="button"
         className={getButtonClass(activeItem === "chat")}
@@ -41,6 +44,10 @@ export function AppBottomNav({
   );
 }
 
+function getRootClass(variant: AppBottomNavVariant): string {
+  return [styles.root, styles[variant]].filter(Boolean).join(" ");
+}
+
 function getButtonClass(active: boolean): string {
   return [styles.button, active ? styles.active : ""].filter(Boolean).join(" ");
 }