diff --git a/apps/client/src/features/editor/components/callout/callout-menu.tsx b/apps/client/src/features/editor/components/callout/callout-menu.tsx
index b0474c37..25ca546e 100644
--- a/apps/client/src/features/editor/components/callout/callout-menu.tsx
+++ b/apps/client/src/features/editor/components/callout/callout-menu.tsx
@@ -135,7 +135,6 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
             size="lg"
             aria-label={t("Info")}
             variant="subtle"
-            c="dark"
             className={clsx({ [classes.active]: editorState?.isInfo })}
           >
             <IconInfoCircleFilled size={18} color="var(--mantine-color-blue-5)" />
@@ -148,7 +147,6 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
             size="lg"
             aria-label={t("Success")}
             variant="subtle"
-            c="dark"
             className={clsx({ [classes.active]: editorState?.isSuccess })}
           >
             <IconCircleCheckFilled size={18} color="var(--mantine-color-green-5)" />
@@ -161,7 +159,6 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
             size="lg"
             aria-label={t("Warning")}
             variant="subtle"
-            c="dark"
             className={clsx({ [classes.active]: editorState?.isWarning })}
           >
             <IconAlertTriangleFilled size={18} color="var(--mantine-color-orange-5)" />
@@ -174,7 +171,6 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
             size="lg"
             aria-label={t("Danger")}
             variant="subtle"
-            c="dark"
             className={clsx({ [classes.active]: editorState?.isDanger })}
           >
             <IconCircleXFilled size={18} color="var(--mantine-color-red-5)" />
@@ -189,7 +185,6 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
           actionIconProps={{
             size: "lg",
             variant: "subtle",
-            c: "dark",
           }}
         />
       </div>
diff --git a/apps/client/src/features/editor/components/common/toolbar-menu.module.css b/apps/client/src/features/editor/components/common/toolbar-menu.module.css
index f8fe4ae0..7fd91f56 100644
--- a/apps/client/src/features/editor/components/common/toolbar-menu.module.css
+++ b/apps/client/src/features/editor/components/common/toolbar-menu.module.css
@@ -9,6 +9,17 @@
   box-shadow: 0 2px 12px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.35));
 }
 
+.toolbar :global(.mantine-ActionIcon-root) {
+  --ai-color: light-dark(var(--mantine-color-dark-7), var(--mantine-color-gray-4)) !important;
+  --ai-hover: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5)) !important;
+}
+
+.toolbar .active {
+    --ai-color: light-dark(var(--mantine-color-blue-7), var(--mantine-color-blue-3)) !important;
+    --ai-hover: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-5)) !important;
+    background-color: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-5));
+}
+
 .divider {
   width: 1px;
   height: 16px;
@@ -16,8 +27,3 @@
   margin: 0 2px;
   background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-3));
 }
-
-.active {
-  background-color: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-5));
-  color: light-dark(var(--mantine-color-blue-7), var(--mantine-color-blue-4));
-}
diff --git a/apps/client/src/features/editor/components/drawio/drawio-menu.tsx b/apps/client/src/features/editor/components/drawio/drawio-menu.tsx
index ee8f28a1..547ea375 100644
--- a/apps/client/src/features/editor/components/drawio/drawio-menu.tsx
+++ b/apps/client/src/features/editor/components/drawio/drawio-menu.tsx
@@ -200,7 +200,6 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
               size="lg"
               aria-label={t("Align left")}
               variant="subtle"
-              c="dark"
               className={clsx({ [classes.active]: editorState?.isAlignLeft })}
             >
               <IconLayoutAlignLeft size={18} />
@@ -213,7 +212,6 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
               size="lg"
               aria-label={t("Align center")}
               variant="subtle"
-              c="dark"
               className={clsx({ [classes.active]: editorState?.isAlignCenter })}
             >
               <IconLayoutAlignCenter size={18} />
@@ -226,7 +224,6 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
               size="lg"
               aria-label={t("Align right")}
               variant="subtle"
-              c="dark"
               className={clsx({ [classes.active]: editorState?.isAlignRight })}
             >
               <IconLayoutAlignRight size={18} />
@@ -241,7 +238,6 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
               size="lg"
               aria-label={t("Edit")}
               variant="subtle"
-              c="dark"
             >
               <IconEdit size={18} />
             </ActionIcon>
@@ -253,7 +249,6 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
               size="lg"
               aria-label={t("Download")}
               variant="subtle"
-              c="dark"
             >
               <IconDownload size={18} />
             </ActionIcon>
@@ -265,7 +260,6 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
               size="lg"
               aria-label={t("Delete")}
               variant="subtle"
-              c="dark"
             >
               <IconTrash size={18} />
             </ActionIcon>
diff --git a/apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx b/apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx
index e6a0d46a..766a357c 100644
--- a/apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx
+++ b/apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx
@@ -234,7 +234,6 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
               size="lg"
               aria-label={t("Align left")}
               variant="subtle"
-              c="dark"
               className={clsx({
                 [classes.active]: editorState?.isAlignLeft,
               })}
@@ -249,7 +248,6 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
               size="lg"
               aria-label={t("Align center")}
               variant="subtle"
-              c="dark"
               className={clsx({
                 [classes.active]: editorState?.isAlignCenter,
               })}
@@ -264,7 +262,6 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
               size="lg"
               aria-label={t("Align right")}
               variant="subtle"
-              c="dark"
               className={clsx({
                 [classes.active]: editorState?.isAlignRight,
               })}
@@ -281,7 +278,6 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
               size="lg"
               aria-label={t("Edit")}
               variant="subtle"
-              c="dark"
             >
               <IconEdit size={18} />
             </ActionIcon>
@@ -293,7 +289,6 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
               size="lg"
               aria-label={t("Download")}
               variant="subtle"
-              c="dark"
             >
               <IconDownload size={18} />
             </ActionIcon>
@@ -305,7 +300,6 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
               size="lg"
               aria-label={t("Delete")}
               variant="subtle"
-              c="dark"
             >
               <IconTrash size={18} />
             </ActionIcon>
diff --git a/apps/client/src/features/editor/components/image/image-menu.tsx b/apps/client/src/features/editor/components/image/image-menu.tsx
index 30f6979e..abef7603 100644
--- a/apps/client/src/features/editor/components/image/image-menu.tsx
+++ b/apps/client/src/features/editor/components/image/image-menu.tsx
@@ -155,7 +155,6 @@ export function ImageMenu({ editor }: EditorMenuProps) {
             size="lg"
             aria-label={t("Align left")}
             variant="subtle"
-            c="dark"
             className={clsx({ [classes.active]: editorState?.isAlignLeft })}
           >
             <IconLayoutAlignLeft size={18} />
@@ -168,7 +167,6 @@ export function ImageMenu({ editor }: EditorMenuProps) {
             size="lg"
             aria-label={t("Align center")}
             variant="subtle"
-            c="dark"
             className={clsx({ [classes.active]: editorState?.isAlignCenter })}
           >
             <IconLayoutAlignCenter size={18} />
@@ -181,7 +179,6 @@ export function ImageMenu({ editor }: EditorMenuProps) {
             size="lg"
             aria-label={t("Align right")}
             variant="subtle"
-            c="dark"
             className={clsx({ [classes.active]: editorState?.isAlignRight })}
           >
             <IconLayoutAlignRight size={18} />
@@ -196,7 +193,6 @@ export function ImageMenu({ editor }: EditorMenuProps) {
             size="lg"
             aria-label={t("Download")}
             variant="subtle"
-            c="dark"
           >
             <IconDownload size={18} />
           </ActionIcon>
@@ -208,7 +204,6 @@ export function ImageMenu({ editor }: EditorMenuProps) {
             size="lg"
             aria-label={t("Replace image")}
             variant="subtle"
-            c="dark"
           >
             <IconRefresh size={18} />
           </ActionIcon>
@@ -220,7 +215,6 @@ export function ImageMenu({ editor }: EditorMenuProps) {
             size="lg"
             aria-label={t("Delete")}
             variant="subtle"
-            c="dark"
           >
             <IconTrash size={18} />
           </ActionIcon>
diff --git a/apps/client/src/features/editor/components/table/table-background-color.tsx b/apps/client/src/features/editor/components/table/table-background-color.tsx
index 46974bf0..3e4ce616 100644
--- a/apps/client/src/features/editor/components/table/table-background-color.tsx
+++ b/apps/client/src/features/editor/components/table/table-background-color.tsx
@@ -96,7 +96,6 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
         <Tooltip label={t("Background color")} withArrow>
           <ActionIcon
             variant="subtle"
-            c="dark"
             size="lg"
             aria-label={t("Background color")}
             onClick={() => setOpened(!opened)}
diff --git a/apps/client/src/features/editor/components/table/table-cell-menu.tsx b/apps/client/src/features/editor/components/table/table-cell-menu.tsx
index bdf0a1c6..34ac6156 100644
--- a/apps/client/src/features/editor/components/table/table-cell-menu.tsx
+++ b/apps/client/src/features/editor/components/table/table-cell-menu.tsx
@@ -80,7 +80,6 @@ export const TableCellMenu = React.memo(
             <ActionIcon
               onClick={mergeCells}
               variant="subtle"
-              c="dark"
               size="lg"
               aria-label={t("Merge cells")}
             >
@@ -92,7 +91,6 @@ export const TableCellMenu = React.memo(
             <ActionIcon
               onClick={splitCell}
               variant="subtle"
-              c="dark"
               size="lg"
               aria-label={t("Split cell")}
             >
@@ -106,7 +104,6 @@ export const TableCellMenu = React.memo(
             <ActionIcon
               onClick={deleteColumn}
               variant="subtle"
-              c="dark"
               size="lg"
               aria-label={t("Delete column")}
             >
@@ -118,7 +115,6 @@ export const TableCellMenu = React.memo(
             <ActionIcon
               onClick={deleteRow}
               variant="subtle"
-              c="dark"
               size="lg"
               aria-label={t("Delete row")}
             >
@@ -132,7 +128,6 @@ export const TableCellMenu = React.memo(
             <ActionIcon
               onClick={toggleHeaderCell}
               variant="subtle"
-              c="dark"
               size="lg"
               aria-label={t("Toggle header cell")}
             >
diff --git a/apps/client/src/features/editor/components/table/table-menu.tsx b/apps/client/src/features/editor/components/table/table-menu.tsx
index 6c32b543..190717ad 100644
--- a/apps/client/src/features/editor/components/table/table-menu.tsx
+++ b/apps/client/src/features/editor/components/table/table-menu.tsx
@@ -124,7 +124,6 @@ export const TableMenu = React.memo(
             <ActionIcon
               onClick={addColumnLeft}
               variant="subtle"
-              c="dark"
               size="lg"
               aria-label={t("Add left column")}
             >
@@ -136,7 +135,6 @@ export const TableMenu = React.memo(
             <ActionIcon
               onClick={addColumnRight}
               variant="subtle"
-              c="dark"
               size="lg"
               aria-label={t("Add right column")}
             >
@@ -148,7 +146,6 @@ export const TableMenu = React.memo(
             <ActionIcon
               onClick={deleteColumn}
               variant="subtle"
-              c="dark"
               size="lg"
               aria-label={t("Delete column")}
             >
@@ -162,7 +159,6 @@ export const TableMenu = React.memo(
             <ActionIcon
               onClick={addRowAbove}
               variant="subtle"
-              c="dark"
               size="lg"
               aria-label={t("Add row above")}
             >
@@ -174,7 +170,6 @@ export const TableMenu = React.memo(
             <ActionIcon
               onClick={addRowBelow}
               variant="subtle"
-              c="dark"
               size="lg"
               aria-label={t("Add row below")}
             >
@@ -186,7 +181,6 @@ export const TableMenu = React.memo(
             <ActionIcon
               onClick={deleteRow}
               variant="subtle"
-              c="dark"
               size="lg"
               aria-label={t("Delete row")}
             >
@@ -200,7 +194,6 @@ export const TableMenu = React.memo(
             <ActionIcon
               onClick={toggleHeaderRow}
               variant="subtle"
-              c="dark"
               size="lg"
               aria-label={t("Toggle header row")}
             >
@@ -212,7 +205,6 @@ export const TableMenu = React.memo(
             <ActionIcon
               onClick={toggleHeaderColumn}
               variant="subtle"
-              c="dark"
               size="lg"
               aria-label={t("Toggle header column")}
             >
@@ -226,7 +218,6 @@ export const TableMenu = React.memo(
             <ActionIcon
               onClick={deleteTable}
               variant="subtle"
-              c="dark"
               size="lg"
               aria-label={t("Delete table")}
             >
diff --git a/apps/client/src/features/editor/components/table/table-text-alignment.tsx b/apps/client/src/features/editor/components/table/table-text-alignment.tsx
index c37d9209..4d4646cf 100644
--- a/apps/client/src/features/editor/components/table/table-text-alignment.tsx
+++ b/apps/client/src/features/editor/components/table/table-text-alignment.tsx
@@ -89,7 +89,6 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
         <Tooltip label={t("Text alignment")} withArrow>
           <ActionIcon
             variant="subtle"
-            c="dark"
             size="lg"
             aria-label={t("Text alignment")}
             onClick={() => setOpened(!opened)}
diff --git a/apps/client/src/features/editor/components/video/video-menu.tsx b/apps/client/src/features/editor/components/video/video-menu.tsx
index 5de909c0..398f758f 100644
--- a/apps/client/src/features/editor/components/video/video-menu.tsx
+++ b/apps/client/src/features/editor/components/video/video-menu.tsx
@@ -131,7 +131,6 @@ export function VideoMenu({ editor }: EditorMenuProps) {
             size="lg"
             aria-label={t("Align left")}
             variant="subtle"
-            c="dark"
             className={clsx({ [classes.active]: editorState?.isAlignLeft })}
           >
             <IconLayoutAlignLeft size={18} />
@@ -144,7 +143,6 @@ export function VideoMenu({ editor }: EditorMenuProps) {
             size="lg"
             aria-label={t("Align center")}
             variant="subtle"
-            c="dark"
             className={clsx({ [classes.active]: editorState?.isAlignCenter })}
           >
             <IconLayoutAlignCenter size={18} />
@@ -157,7 +155,6 @@ export function VideoMenu({ editor }: EditorMenuProps) {
             size="lg"
             aria-label={t("Align right")}
             variant="subtle"
-            c="dark"
             className={clsx({ [classes.active]: editorState?.isAlignRight })}
           >
             <IconLayoutAlignRight size={18} />
@@ -172,7 +169,6 @@ export function VideoMenu({ editor }: EditorMenuProps) {
             size="lg"
             aria-label={t("Download")}
             variant="subtle"
-            c="dark"
           >
             <IconDownload size={18} />
           </ActionIcon>
@@ -184,7 +180,6 @@ export function VideoMenu({ editor }: EditorMenuProps) {
             size="lg"
             aria-label={t("Delete")}
             variant="subtle"
-            c="dark"
           >
             <IconTrash size={18} />
           </ActionIcon>