From 55280db67204e138526a3e4ea0a87fa7aa4413d6 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Sat, 14 Feb 2026 10:35:03 -0800
Subject: [PATCH] dark color theme tweaks

---
 .../components/header/page-header-menu.tsx    | 10 +++----
 .../features/share/components/share-modal.tsx |  7 +++--
 apps/client/src/theme.ts                      | 27 +++++++++++++++++--
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/apps/client/src/features/page/components/header/page-header-menu.tsx b/apps/client/src/features/page/components/header/page-header-menu.tsx
index 3932a2c9..0561729c 100644
--- a/apps/client/src/features/page/components/header/page-header-menu.tsx
+++ b/apps/client/src/features/page/components/header/page-header-menu.tsx
@@ -79,8 +79,8 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
 
       <Tooltip label={t("Comments")} openDelay={250} withArrow>
         <ActionIcon
-          variant="default"
-          style={{ border: "none" }}
+          variant="subtle"
+          color="dark"
           onClick={() => toggleAside("comments")}
         >
           <IconMessage size={20} stroke={2} />
@@ -89,8 +89,8 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
 
       <Tooltip label={t("Table of contents")} openDelay={250} withArrow>
         <ActionIcon
-          variant="default"
-          style={{ border: "none" }}
+          variant="subtle"
+          color="dark"
           onClick={() => toggleAside("toc")}
         >
           <IconList size={20} stroke={2} />
@@ -166,7 +166,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
         arrowPosition="center"
       >
         <Menu.Target>
-          <ActionIcon variant="default" style={{ border: "none" }}>
+          <ActionIcon variant="subtle" color="dark">
             <IconDots size={20} />
           </ActionIcon>
         </Menu.Target>
diff --git a/apps/client/src/features/share/components/share-modal.tsx b/apps/client/src/features/share/components/share-modal.tsx
index 6d5e1c8c..a7feda26 100644
--- a/apps/client/src/features/share/components/share-modal.tsx
+++ b/apps/client/src/features/share/components/share-modal.tsx
@@ -45,8 +45,7 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
   const { isTrial } = useTrial();
   const [workspace] = useAtom(workspaceAtom);
   const { data: space } = useSpaceQuery(spaceSlug);
-  const workspaceDisabled =
-    workspace?.settings?.sharing?.disabled === true;
+  const workspaceDisabled = workspace?.settings?.sharing?.disabled === true;
   const spaceDisabled = space?.settings?.sharing?.disabled === true;
   const sharingDisabled = workspaceDisabled || spaceDisabled;
   const createShareMutation = useCreateShareMutation();
@@ -134,7 +133,6 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
     <Popover width={350} position="bottom" withArrow shadow="md">
       <Popover.Target>
         <Button
-          style={{ border: "none" }}
           size="compact-sm"
           leftSection={
             <Indicator
@@ -146,7 +144,8 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
               <IconWorld size={20} stroke={1.5} />
             </Indicator>
           }
-          variant="default"
+          color="dark"
+          variant="subtle"
         >
           {t("Share")}
         </Button>
diff --git a/apps/client/src/theme.ts b/apps/client/src/theme.ts
index b02200b1..7935b476 100644
--- a/apps/client/src/theme.ts
+++ b/apps/client/src/theme.ts
@@ -35,12 +35,35 @@ export const theme = createTheme({
     blue,
     red,
   },
+  /***
+  components: {
+    ActionIcon: ActionIcon.extend({
+      vars: (_theme, props) => {
+        return {
+          root: {
+            ...(props.variant === "subtle" &&
+              props.color === "dark" && {
+                "--ai-color": "var(--mantine-color-default-color)",
+                "--ai-hover": "var(--mantine-color-default-hover)",
+              }),
+          },
+        };
+      },
+    }),
+  },
+  ***/
 });
 
 export const mantineCssResolver: CSSVariablesResolver = (theme) => ({
   variables: {
     "--input-error-size": theme.fontSizes.sm,
   },
-  light: {},
-  dark: {},
+  light: {
+    "--mantine-color-dark-light-color": "var(--mantine-color-default-color)",
+    "--mantine-color-dark-light-hover": "var(--mantine-color-gray-light-hover)",
+  },
+  dark: {
+    "--mantine-color-dark-light-color": "var(--mantine-color-gray-4)",
+    "--mantine-color-dark-light-hover": "var(--mantine-color-default-hover)",
+  },
 });