✨ Enhanced Theme Customizer with Beautiful Features

🎨 Theme Customizer Improvements:
- Added ultra transparent background for real-time UI preview
- Created custom Light/Dark mode preview cards with realistic UI mockups
- Implemented spinning gear animation for settings icon (always rotating)
- Added beautiful hover effects and selected state animations

🖼️ Custom Preview Cards:
- Browser-style header with macOS-like dots (red, yellow, green)
- Mini sidebar with menu items and active states
- Realistic content areas with proper color schemes
- Interactive animations with hover and selection feedback

🔄 Settings Icon Animation:
- Continuous spinning animation (3s/rotation)
- Faster rotation on hover (1.5s with glow effects)
- Even faster when panel open + hover (0.8s)
- Smooth transitions with cubic-bezier timing

🎯 User Experience:
- Real-time theme preview through transparent sidebar
- Visual feedback for all interactive elements
- Professional appearance with modern design patterns
- Mobile-responsive and performance optimized

🔧 Technical Improvements:
- Fixed SCSS syntax errors and proper nesting
- Added comprehensive CSS animations and keyframes
- Implemented proper state management for theme switching
- Enhanced accessibility with proper contrast and shadows

src/index.js

@@ -18,6 +18,37 @@ import AllRoutes from "./Router/router.jsx";
 
 const rootElement = document.getElementById('root');
 
+// Initialize default dark mode theme
+const initializeTheme = () => {
+  // Force reset to dark mode for new default (uncomment if needed)
+  // localStorage.removeItem("colorschema");
+  // localStorage.removeItem("layoutStyling");
+  // localStorage.removeItem("layoutThemeColors");
+
+  // Set default values if not exists in localStorage
+  if (!localStorage.getItem("colorschema")) {
+    localStorage.setItem("colorschema", "dark_mode");
+  }
+  if (!localStorage.getItem("layoutStyling")) {
+    localStorage.setItem("layoutStyling", "default");
+  }
+  if (!localStorage.getItem("layoutThemeColors")) {
+    localStorage.setItem("layoutThemeColors", "light");
+  }
+
+  // Apply theme to document
+  const colorSchema = localStorage.getItem("colorschema") || "dark_mode";
+  const layoutStyling = localStorage.getItem("layoutStyling") || "default";
+  const layoutThemeColors = localStorage.getItem("layoutThemeColors") || "light";
+
+  document.documentElement.setAttribute("data-layout-mode", colorSchema);
+  document.documentElement.setAttribute("data-layout-style", layoutStyling);
+  document.documentElement.setAttribute("data-nav-color", layoutThemeColors);
+};
+
+// Initialize theme before rendering
+initializeTheme();
+
 
 
 if (rootElement) {