code block

Author: vankovap

apps/docs/src/components/TabbedCodeBlock/styles.module.css

@@ -1,10 +1,28 @@
 /* styles.module.css */
+:root {
+  --tab-button-bg: var(--ifm-color-emphasis-200);
+  --tab-button-hover-bg: var(--ifm-color-emphasis-300);
+  --tab-button-active-bg: var(--ifm-color-emphasis-100);
+  --tab-button-color: var(--ifm-color-emphasis-900);
+  --tab-button-hover-color: var(--ifm-color-emphasis-900);
+  --tab-button-active-color: var(--ifm-color-primary);
+}
+
+[data-theme='dark'] {
+  --tab-button-bg: var(--ifm-color-emphasis-100);
+  --tab-button-hover-bg: var(--docs-bg-subtle-pressed);
+  --tab-button-active-bg: var(--ifm-color-emphasis-200);
+  --tab-button-color: var(--ifm-color-emphasis-900);
+  --tab-button-hover-color: var(--ifm-color-emphasis-900);
+  --tab-button-active-color: var(--ifm-color-primary);
+}
+
 .tabbedCodeContainer {
   border-radius: 8px;
 }
 
 .tabsHeader {
-  display: flex;
+  display: inline-flex;
   background-color: var(--ifm-color-emphasis-200);
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
@@ -21,18 +39,25 @@
   border: none;
   cursor: pointer;
   transition: background-color 0.2s, color 0.2s;
-  color: var(--ifm-color-emphasis-700);
+  color: var(--tab-button-color);
+  background-color: var(--tab-button-bg);
   white-space: nowrap;
 }
 
 .tabButton:hover {
-  background-color: var(--ifm-color-emphasis-300);
-  color: var(--ifm-color-emphasis-900);
+  background-color: var(--tab-button-hover-bg);
+  color: var(--tab-button-hover-color);
 }
 
 .activeTab {
-  color: var(--ifm-color-primary);
-  background-color: var(--ifm-color-emphasis-100);
+  color: var(--tab-button-active-color);
+  background-color: var(--tab-button-active-bg);
+  border-bottom: 2px solid var(--ifm-color-primary);
+}
+
+.activeTab:hover {
+  color: var(--tab-button-active-color);
+  background-color: var(--tab-button-active-bg);
   border-bottom: 2px solid var(--ifm-color-primary);
 }