dark color theme tweaks

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>

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>

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)",
+  },
 });