fix(ToolMenuLinkButton): support dark theme

varianter · Sep 2, 2024 · fe92f57 · fe92f57
1 parent 7be61a9
commit fe92f57
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/studio/components/toolMenuLinkButton/ToolMenuLinkButton.tsx b/studio/components/toolMenuLinkButton/ToolMenuLinkButton.tsx
@@ -1,4 +1,5 @@
 import styles from "./toolMenuLinkButton.module.css";
+import { useTheme } from "@sanity/ui";
 
 interface LinkButtonProps {
   label: string;
@@ -11,9 +12,11 @@ export const ToolMenuLinkButton = ({
   value,
   context,
 }: LinkButtonProps) => {
+  const theme = useTheme();
+  const prefersDark = theme.sanity.v2?.color._dark ?? false;
   return (
     <a
-      className={`${styles.wrapper}${context === "sidebar" ? ` ${styles.inSidebar}` : ""}`}
+      className={`${styles.wrapper}${context === "sidebar" ? ` ${styles.inSidebar}` : ""}${prefersDark ? ` ${styles.darkTheme}` : ""}`}
       href={value}
     >
       <span className={styles.text}>{label}</span>

diff --git a/studio/components/toolMenuLinkButton/toolMenuLinkButton.module.css b/studio/components/toolMenuLinkButton/toolMenuLinkButton.module.css
@@ -16,6 +16,10 @@
   background: #f5f5f7;
 }
 
+.darkTheme.wrapper:hover {
+  background: #191a24;
+}
+
 .text {
   display: flex;
   align-items: center;
@@ -36,3 +40,11 @@
     background-color: #323545;
   }
 }
+
+.darkTheme .text {
+  color: #bec0cd;
+
+  &::after {
+    background-color: #bec0cd;
+  }
+}