improved design

Signed-off-by: Bhupesh Kumar <[email protected]>

Author: Bhup-GitHUB

src/components/QuickStartFilter.js

@@ -11,7 +11,7 @@ import {FaDocker} from "react-icons/fa";
 import {IoLogoJavascript} from "react-icons/io5";
 
 // 🔹 Wrapper for icons to make them uniform
-const IconWrapper = ({icon, bg}) => (
+const IconWrapper = ({icon, bg, darkBg}) => (
   <div
     style={{
       width: "70px",
@@ -20,7 +20,7 @@ const IconWrapper = ({icon, bg}) => (
       alignItems: "center",
       justifyContent: "center",
       borderRadius: "50%",
-      backgroundColor: bg || "#f3f4f6",
+      backgroundColor: "var(--ifm-color-emphasis-100)",
       boxShadow: "0 3px 6px rgba(0,0,0,0.1)",
       transition: "transform 0.2s ease",
     }}
@@ -46,45 +46,37 @@ export default function QuickstartFilter({defaultLanguage = null}) {
     {
       name: "Go",
       icon: <FaGolang size={36} color="#00ADD8" />,
-      bg: "#E0F7FA",
     },
     {
       name: "Python",
       icon: <FaPython size={36} color="#3776AB" />,
-      bg: "#E8F0FE",
     },
     {
       name: "Java",
       icon: <FaJava size={36} color="#007396" />,
-      bg: "#FDEDED",
     },
     {
       name: "JS/TS",
       icon: <IoLogoJavascript size={36} color="#F7DF1E" />,
-      bg: "#FFF8E1",
     },
     {
       name: "Rust",
       icon: <FaRust size={36} color="#DEA584" />,
-      bg: "#FFF3E0",
     },
     {
       name: "C#",
       icon: <TbBrandCSharp size={36} color="#512BD4" />,
-      bg: "#EDE7F6",
     },
   ];
 
   const servers = [
     {
       name: "Local",
       icon: <FaLaptopCode size={36} color="#f97316" />,
-      bg: "#FFF3E0",
     },
     {
       name: "Docker",
       icon: <FaDocker size={36} color="#2496ED" />,
-      bg: "#E3F2FD",
     },
   ];
 
@@ -100,15 +92,15 @@ export default function QuickstartFilter({defaultLanguage = null}) {
             style={{
               ...buttonCard,
               border:
-                language === lang.name ? "2px solid #f97316" : "2px solid #ddd",
+                language === lang.name ? "2px solid #f97316" : "2px solid var(--ifm-color-emphasis-300)",
               boxShadow:
                 language === lang.name
                   ? "0 3px 8px rgba(249, 115, 22, 0.3)"
                   : "none",
             }}
           >
-            <IconWrapper icon={lang.icon} bg={lang.bg} />
-            <p style={{marginTop: "0.5rem", fontWeight: "500"}}>{lang.name}</p>
+            <IconWrapper icon={lang.icon} />
+            <p style={{marginTop: "0.5rem", fontWeight: "500", color: "var(--ifm-color)"}}>{lang.name}</p>
           </button>
         ))}
       </div>
@@ -125,15 +117,15 @@ export default function QuickstartFilter({defaultLanguage = null}) {
             style={{
               ...buttonCard,
               border:
-                server === srv.name ? "2px solid #f97316" : "2px solid #ddd",
+                server === srv.name ? "2px solid #f97316" : "2px solid var(--ifm-color-emphasis-300)",
               boxShadow:
                 server === srv.name
                   ? "0 3px 8px rgba(249, 115, 22, 0.3)"
                   : "none",
             }}
           >
-            <IconWrapper icon={srv.icon} bg={srv.bg} />
-            <p style={{marginTop: "0.5rem", fontWeight: "500"}}>{srv.name}</p>
+            <IconWrapper icon={srv.icon} />
+            <p style={{marginTop: "0.5rem", fontWeight: "500", color: "var(--ifm-color)"}}>{srv.name}</p>
           </button>
         ))}
       </div>
@@ -148,10 +140,10 @@ export default function QuickstartFilter({defaultLanguage = null}) {
             {filteredQuickstarts.length > 0 ? (
               filteredQuickstarts.map((app, idx) => (
                 <div key={idx} style={cardStyle}>
-                  <h3 style={{margin: "0 0 0.5rem 0", fontSize: "1.2rem"}}>
+                  <h3 style={{margin: "0 0 0.5rem 0", fontSize: "1.2rem", color: "var(--ifm-color)"}}>
                     {app.title}
                   </h3>
-                  <p style={{color: "#555", fontSize: "0.95rem"}}>
+                  <p style={{color: "var(--ifm-color-emphasis-600)", fontSize: "0.95rem"}}>
                     {app.description}
                   </p>
                   <Link to={app.link} style={linkStyle}>
@@ -160,7 +152,7 @@ export default function QuickstartFilter({defaultLanguage = null}) {
                 </div>
               ))
             ) : (
-              <p>No quickstarts available for this selection.</p>
+              <p style={{color: "var(--ifm-color-emphasis-600)"}}>No quickstarts available for this selection.</p>
             )}
           </div>
         </>
@@ -175,6 +167,7 @@ const headingStyle = {
   marginLeft: "1rem",
   fontSize: "1.4rem",
   fontWeight: "600",
+  color: "var(--ifm-color)",
 };
 
 const serverContainer = {
@@ -196,13 +189,14 @@ const stepContainer = {
 };
 
 const buttonCard = {
-  border: "2px solid #ddd",
+  border: "2px solid var(--ifm-color-emphasis-300)",
   borderRadius: "12px",
   padding: "1rem 2rem",
   cursor: "pointer",
-  background: "#fff",
+  background: "var(--ifm-card-background-color)",
   transition: "all 0.2s ease",
   textAlign: "center",
+  minWidth: "140px",
 };
 
 const gridContainer = {
@@ -213,11 +207,11 @@ const gridContainer = {
 };
 
 const cardStyle = {
-  border: "1px solid #eee",
+  border: "1px solid var(--ifm-color-emphasis-300)",
   borderRadius: "12px",
   padding: "1rem",
-  background: "#fff",
-  boxShadow: "0 2px 6px rgba(0, 0, 0, 0.08)",
+  background: "var(--ifm-card-background-color)",
+  boxShadow: "0 2px 6px var(--ifm-card-shadow-color)",
 };
 
 const linkStyle = {

src/css/custom.css

@@ -744,4 +744,42 @@ textarea {
   resize: vertical;
 }
 
+/* QuickStart Filter Dark Mode Improvements */
+.icon-wrapper {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.icon-wrapper:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+html[data-theme="dark"] .icon-wrapper {
+  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
+}
+
+html[data-theme="dark"] .icon-wrapper:hover {
+  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
+}
+
+/* Button hover effects for dark mode */
+html[data-theme="dark"] button:hover {
+  background-color: var(--ifm-color-emphasis-200);
+  border-color: var(--ifm-color-emphasis-400);
+}
+
+/* Better contrast for selected states in dark mode */
+html[data-theme="dark"] button[style*="border: 2px solid #f97316"] {
+  background-color: rgba(249, 115, 22, 0.1);
+}
+
+/* Improved card shadows for dark mode */
+html[data-theme="dark"] .card {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+html[data-theme="dark"] .card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+