diff --git a/docs/src/components/kbd.css b/docs/src/components/kbd.css
index 19dab0c7c..c942df085 100644
--- a/docs/src/components/kbd.css
+++ b/docs/src/components/kbd.css
@@ -19,9 +19,10 @@
 }
 
 kbd {
-    background-color: #f4f4f4;
+    background-color: var(--ifm-color-primary-contrast-background);
     border-radius: 4px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--ifm-color-secondary-darker);
+    color: var(--ifm-color-primary-contrast-foreground);
     padding: 2px 6px;
     font-size: 0.8em;
     font-family: "JetBrains Mono", monospace;
@@ -40,10 +41,3 @@ kbd {
     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 9ab176d79..9104627c1 100644
--- a/docs/src/components/platformcontext.css
+++ b/docs/src/components/platformcontext.css
@@ -1,16 +1,16 @@
 .pill-toggle {
     display: inline-flex;
-    border: 1px solid #ddd;
+    border: 1px solid var(--ifm-scrollbar-thumb-background-color);
     border-radius: 20px;
     overflow: hidden;
-    background-color: #f1f1f5;
+    background-color: var(--ifm-scrollbar-track-background-color);
 }
 
 .pill-option {
     padding: 8px 16px;
     font-size: 0.9em;
     font-weight: 500;
-    color: #555;
+    color: var(--ifm-color-secondary-contrast-foreground);
     background-color: transparent;
     border: none;
     cursor: pointer;
@@ -21,30 +21,11 @@
 }
 
 .pill-option.active {
-    background-color: rgb(88, 193, 66);
-    color: #fff;
+    background-color: var(--ifm-color-primary);
+    color: var(--ifm-color-secondary-lightest);
     font-weight: bold;
 }
 
 .pill-option:not(.active):hover {
-    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: rgb(88, 193, 66); /* Darker blue for active state */
-    color: #fff;
-}
-
-html[data-theme="dark"] .pill-option:not(.active):hover {
-    background-color: #444; /* Darker hover effect */
+    background-color: var(--ifm-scrollbar-thumb-background-color);
 }