dark theme issue solved #2986

Author: AzhaanGlitch

src/components/InstallReminder.js

@@ -3,35 +3,18 @@ import Link from "@docusaurus/Link";
 
 export default function InstallReminder() {
   return (
-    <div
-      style={{
-        padding: "1rem",
-        border: "1px solid #eee",
-        borderRadius: "10px",
-        background: "#fff8f5",
-        margin: "2rem 0",
-      }}
-    >
+    <div className="install-reminder-container">
       <h3>Don’t have Keploy installed yet?</h3>
       <p>
         Before running this sample, make sure Keploy is installed on your
         system.
       </p>
       <Link
         to="/docs/server/installation/"
-        style={{
-          display: "inline-block",
-          marginTop: "0.5rem",
-          padding: "0.6rem 1rem",
-          background: "#e67e22",
-          color: "#fff",
-          borderRadius: "6px",
-          fontWeight: "bold",
-          textDecoration: "none",
-        }}
+        className="install-reminder-button"
       >
         👉 Go to Installation Guide
       </Link>
     </div>
   );
-}
+}

src/css/custom.css

@@ -744,4 +744,40 @@ textarea {
   resize: vertical;
 }
 
+/* Styles for the InstallReminder Component */
+.install-reminder-container {
+  padding: 1rem;
+  border: 1px solid #eee;
+  border-radius: 10px;
+  background: #fff8f5;
+  margin: 2rem 0;
+}
+
+.install-reminder-button {
+  display: inline-block;
+  margin-top: 0.5rem;
+  padding: 0.6rem 1rem;
+  background: #e67e22;
+  color: #fff !important; /* !important ensures it overrides other link styles */
+  border-radius: 6px;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.install-reminder-button:hover {
+  text-decoration: none;
+  opacity: 0.9;
+}
+
+
+/* --- Dark Theme Styles for the InstallReminder Component --- */
+[data-theme='dark'] .install-reminder-container {
+  background: #2e2622;
+  border-color: #444;
+}
 
+/* This is the rule that fixes your text color issue */
+[data-theme='dark'] .install-reminder-container h3,
+[data-theme='dark'] .install-reminder-container p {
+  color: var(--ifm-font-color-base);
+}