diff --git a/docs/src/components/kbd.css b/docs/src/components/kbd.css
index 9fdd17d39..19dab0c7c 100644
--- a/docs/src/components/kbd.css
+++ b/docs/src/components/kbd.css
@@ -23,24 +23,27 @@ kbd {
     border-radius: 4px;
     border: 1px solid #ccc;
     padding: 2px 6px;
-    font-size: 0.8em; /* Base font size */
+    font-size: 0.8em;
     font-family: "JetBrains Mono", monospace;
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    height: 24px; /* Consistent height */
-    line-height: 24px; /* Consistent line height */
-
-    .bold {
-        font-weight: bold;
-    }
+    height: 24px;
+    line-height: 24px;
 
     .spaced {
-        letter-spacing: 0.1em;
+        letter-spacing: 0.2em;
     }
 }
 
 .kbd-group kbd.symbol {
-    font-size: 0.8em; /* Slightly larger font size for symbols */
-    line-height: 24px; /* Same line height as base to keep alignment */
+    font-size: 0.8em;
+    line-height: 24px;
+}
+
+/* Docusaurus Dark Mode */
+html[data-theme="dark"] kbd {
+    background-color: #333; /* Dark background */
+    color: #fff; /* Light text */
+    border: 1px solid #666;
 }
diff --git a/docs/src/components/platformcontext.css b/docs/src/components/platformcontext.css
index 8973dce60..720334316 100644
--- a/docs/src/components/platformcontext.css
+++ b/docs/src/components/platformcontext.css
@@ -21,10 +21,29 @@
 }
 
 .pill-option.active {
-    background-color: #0073e6; /* Highlight color for active option */
-    color: #fff; /* White text on active side */
+    background-color: #0073e6;
+    color: #fff;
 }
 
 .pill-option:not(.active):hover {
-    background-color: #e0e0e0; /* Slight hover effect on inactive side */
+    background-color: #e0e0e0;
+}
+
+/* Docusaurus Dark Mode */
+html[data-theme="dark"] .pill-toggle {
+    border: 1px solid #555;
+    background-color: #333;
+}
+
+html[data-theme="dark"] .pill-option {
+    color: #ccc;
+}
+
+html[data-theme="dark"] .pill-option.active {
+    background-color: #005bb5; /* Darker blue for active state */
+    color: #fff;
+}
+
+html[data-theme="dark"] .pill-option:not(.active):hover {
+    background-color: #444; /* Darker hover effect */
 }