@kanaries/graphic-walker 0.2.14 → 0.2.15

package/dist/interfaces.d.ts

@@ -154,3 +154,5 @@ export declare enum ISegmentKey {
     vis = "vis",
     data = "data"
 }
+export type IThemeKey = 'vega' | 'g2';
+export type IDarkMode = 'media' | 'light' | 'dark';

package/dist/renderer/index.d.ts

@@ -1,6 +1,8 @@
-import React from 'react';
-import { IReactVegaHandler } from '../vis/react-vega';
+import React from "react";
+import { IReactVegaHandler } from "../vis/react-vega";
+import { IDarkMode, IThemeKey } from "../interfaces";
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<{
-    themeKey?: "vega" | "g2" | undefined;
-} & React.RefAttributes<IReactVegaHandler>, "key" | "themeKey"> & React.RefAttributes<IReactVegaHandler>>>;
+    themeKey?: IThemeKey | undefined;
+    dark?: IDarkMode | undefined;
+} & React.RefAttributes<IReactVegaHandler>, "dark" | "key" | "themeKey"> & React.RefAttributes<IReactVegaHandler>>>;
 export default _default;

package/dist/utils/media.d.ts

@@ -1,2 +1,3 @@
+import { IDarkMode } from "../interfaces";
 export declare function currentMediaTheme(): "dark" | "light";
-export declare function useCurrentMediaTheme(): "dark" | "light";
+export declare function useCurrentMediaTheme(mode?: IDarkMode | undefined): "dark" | "light";

package/dist/vis/react-vega.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IViewField, IRow, IStackMode } from '../interfaces';
+import { IViewField, IRow, IStackMode, IDarkMode, IThemeKey } from '../interfaces';
 export interface IReactVegaHandler {
     getSVGData: () => Promise<string[]>;
     getCanvasData: () => Promise<string[]>;
@@ -28,7 +28,8 @@ interface ReactVegaProps {
     selectEncoding: SingleViewProps['selectEncoding'];
     brushEncoding: SingleViewProps['brushEncoding'];
     /** @default "vega" */
-    themeKey?: 'vega' | 'g2';
+    themeKey?: IThemeKey;
+    dark?: IDarkMode;
 }
 interface SingleViewProps {
     x: IViewField;
@@ -50,6 +51,7 @@ interface SingleViewProps {
     asCrossFilterTrigger: boolean;
     selectEncoding: 'default' | 'none';
     brushEncoding: 'x' | 'y' | 'default' | 'none';
+    hideLegend?: boolean;
 }
 declare const ReactVega: React.ForwardRefExoticComponent<ReactVegaProps & React.RefAttributes<IReactVegaHandler>>;
 export default ReactVega;

package/dist/vis/theme.d.ts

@@ -3,16 +3,24 @@ export declare const VegaTheme: {
         readonly background: "transparent";
     };
     readonly dark: {
-        readonly background: "transparent";
-        readonly axis: {
-            readonly gridColor: "#666";
-            readonly domainColor: "#d1d5db";
-            readonly tickColor: "#d1d5db";
-            readonly labelColor: "#d1d5db";
+        background: string;
+        header: {
+            titleColor: string;
+            labelColor: string;
         };
-        readonly legend: {
-            readonly labelColor: "#d1d5db";
-            readonly titleColor: "#d1d5db";
+        axis: {
+            gridColor: string;
+            domainColor: string;
+            tickColor: string;
+            labelColor: string;
+            titleColor: string;
+        };
+        legend: {
+            labelColor: string;
+            titleColor: string;
+        };
+        view: {
+            stroke: string;
         };
     };
 };
@@ -98,17 +106,6 @@ export declare const AntVTheme: {
         readonly arc: {
             readonly fill: "#5B8FF9";
         };
-        readonly background: "transparent";
-        readonly axis: {
-            readonly gridColor: "#666";
-            readonly domainColor: "#d1d5db";
-            readonly tickColor: "#d1d5db";
-            readonly labelColor: "#d1d5db";
-        };
-        readonly legend: {
-            readonly labelColor: "#d1d5db";
-            readonly titleColor: "#d1d5db";
-        };
         readonly range: {
             readonly category: readonly ["#5B8FF9", "#61DDAA", "#65789B", "#F6BD16", "#7262FD", "#78D3F8", "#9661BC", "#F6903D", "#008685", "#F08BB4"];
             readonly diverging: readonly ["#7b3294", "#c2a5cf", "#f7f7f7", "#a6dba0", "#008837"];
@@ -120,6 +117,25 @@ export declare const AntVTheme: {
                 readonly range: readonly ["#f7fbff", "#08306b"];
             };
         };
+        readonly background: string;
+        readonly header: {
+            titleColor: string;
+            labelColor: string;
+        };
+        readonly axis: {
+            gridColor: string;
+            domainColor: string;
+            tickColor: string;
+            labelColor: string;
+            titleColor: string;
+        };
+        readonly legend: {
+            labelColor: string;
+            titleColor: string;
+        };
+        readonly view: {
+            stroke: string;
+        };
     };
 };
 export declare const builtInThemes: {

package/dist/visualSettings/index.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { IDarkMode } from '../interfaces';
 import { IReactVegaHandler } from '../vis/react-vega';
-export declare const LiteContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface IVisualSettings {
+    darkModePreference: IDarkMode;
     rendererHandler?: React.RefObject<IReactVegaHandler>;
 }
 declare const _default: React.FunctionComponent<IVisualSettings>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",

package/src/App.tsx

@@ -4,10 +4,9 @@ import { observer } from "mobx-react-lite";
 import { LightBulbIcon } from "@heroicons/react/24/outline";
 import { toJS } from "mobx";
 import { useTranslation } from "react-i18next";
-import { IMutField, IRow, ISegmentKey } from "./interfaces";
+import { IDarkMode, IMutField, IRow, ISegmentKey, IThemeKey } from "./interfaces";
 import type { IReactVegaHandler } from "./vis/react-vega";
 import VisualSettings from "./visualSettings";
-import { Container, NestContainer } from "./components/container";
 import ClickMenu from "./components/clickMenu";
 import InsightBoard from "./insightBoard/index";
 import PosFields from "./fields/posFields";
@@ -23,6 +22,7 @@ import FilterField from "./fields/filterField";
 import { guardDataKeys } from "./utils/dataPrep";
 import SegmentNav from "./segments/segmentNav";
 import DatasetConfig from "./dataSource/datasetConfig";
+import { useCurrentMediaTheme } from "./utils/media";
 
 export interface IGWProps {
     dataSource?: IRow[];
@@ -37,7 +37,8 @@ export interface IGWProps {
      */
     fieldKeyGuard?: boolean;
     /** @default "vega" */
-    themeKey?: 'vega' | 'g2';
+    themeKey?: IThemeKey;
+    dark?: IDarkMode;
 }
 
 const App = observer<IGWProps>(function App (props) {
@@ -50,6 +51,7 @@ const App = observer<IGWProps>(function App (props) {
         hideDataSourceConfig,
         fieldKeyGuard = true,
         themeKey = 'vega',
+        dark = 'media',
     } = props;
     const { commonStore, vizStore } = useGlobalStore();
     const [insightReady, setInsightReady] = useState<boolean>(true);
@@ -117,14 +119,16 @@ const App = observer<IGWProps>(function App (props) {
         };
     }, [currentDataset, spec]);
 
+    const darkMode = useCurrentMediaTheme(dark);
+
     const rendererRef = useRef<IReactVegaHandler>(null);
 
     return (
-        <div className="App font-sans dark:bg-zinc-900 dark:text-white m-0 p-0">
+        <div className={`${darkMode === 'dark' ? 'dark' : ''} App font-sans bg-white dark:bg-zinc-900 dark:text-white m-0 p-0`}>
             {/* <div className="grow-0">
                 <PageNav />
             </div> */}
-            <div className="">
+            <div className="bg-white dark:bg-zinc-900 dark:text-white">
                 {!hideDataSourceConfig && <DataSourceSegment preWorkDone={insightReady} />}
                 <div className="px-2 mx-2">
                     <SegmentNav />
@@ -133,8 +137,8 @@ const App = observer<IGWProps>(function App (props) {
                     }
                 </div>
                 {segmentKey === ISegmentKey.vis && (
-                    <Container style={{ marginTop: "0em", borderTop: "none" }}>
-                        <VisualSettings rendererHandler={rendererRef} />
+                    <div style={{ marginTop: "0em", borderTop: "none" }} className="m-4 p-4 border border-gray-200 dark:border-gray-700">
+                        <VisualSettings rendererHandler={rendererRef} darkModePreference={dark} />
                         <div className="md:grid md:grid-cols-12 xl:grid-cols-6">
                             <div className="md:col-span-3 xl:col-span-1">
                                 <DatasetFields />
@@ -147,7 +151,8 @@ const App = observer<IGWProps>(function App (props) {
                                 <div>
                                     <PosFields />
                                 </div>
-                                <NestContainer
+                                <div
+                                    className="m-0.5 p-1 border border-gray-200 dark:border-gray-700"
                                     style={{ minHeight: "600px", overflow: "auto" }}
                                     onMouseLeave={() => {
                                         vizEmbededMenu.show && commonStore.closeEmbededMenu();
@@ -156,12 +161,12 @@ const App = observer<IGWProps>(function App (props) {
                                         vizEmbededMenu.show && commonStore.closeEmbededMenu();
                                     }}
                                 >
-                                    {datasets.length > 0 && <ReactiveRenderer ref={rendererRef} themeKey={themeKey} />}
+                                    {datasets.length > 0 && <ReactiveRenderer ref={rendererRef} themeKey={themeKey} dark={dark} />}
                                     <InsightBoard />
                                     {vizEmbededMenu.show && (
                                         <ClickMenu x={vizEmbededMenu.position[0]} y={vizEmbededMenu.position[1]}>
                                             <div
-                                                className="flex items-center whitespace-nowrap py-1 px-4 hover:bg-gray-100"
+                                                className="flex items-center whitespace-nowrap py-1 px-4 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
                                                 onClick={() => {
                                                     commonStore.closeEmbededMenu();
                                                     commonStore.setShowInsightBoard(true);
@@ -174,15 +179,15 @@ const App = observer<IGWProps>(function App (props) {
                                             </div>
                                         </ClickMenu>
                                     )}
-                                </NestContainer>
+                                </div>
                             </div>
                         </div>
-                    </Container>
+                    </div>
                 )}
                 {segmentKey === ISegmentKey.data && (
-                    <Container style={{ marginTop: "0em", borderTop: "none" }}>
+                    <div className="m-4 p-4 border border-gray-200 dark:border-gray-700" style={{ marginTop: "0em", borderTop: "none" }}>
                         <DatasetConfig />
-                    </Container>
+                    </div>
                 )}
             </div>
         </div>

package/src/components/callout.tsx

@@ -1,14 +1,17 @@
 import React, { memo, ReactNode, useContext, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import styled from "styled-components";
+import type { IDarkMode } from "../interfaces";
 import { ShadowDomContext } from "..";
+import { useCurrentMediaTheme } from "../utils/media";
 
 export interface CalloutProps {
     target: string;
     children: ReactNode;
+    darkModePreference?: IDarkMode;
 }
 
-const Bubble = styled.div`
+const Bubble = styled.div<{ dark: boolean }>`
     border-radius: 1px;
     transform: translate(-50%, 0);
     filter: drop-shadow(0 1.6px 1px rgba(0, 0, 0, 0.24)) drop-shadow(0 -1px 0.8px rgba(0, 0, 0, 0.19));
@@ -25,15 +28,12 @@ const Bubble = styled.div`
         width: 8px;
         height: 8px;
         transform: translate(-50%, -50%) rotate(45deg);
-        background-color: #fff;
+        background-color: ${({ dark }) => dark ? "#000" : "#fff"};
         border-radius: 1px;
-        @media (prefers-color-scheme: dark) {
-            background-color: #000;
-        }
     }
 `;
 
-const Callout = memo<CalloutProps>(function Callout({ target, children }) {
+const Callout = memo<CalloutProps>(function Callout({ target, children, darkModePreference = 'media' }) {
     const shadowDomMeta = useContext(ShadowDomContext);
     const { root } = shadowDomMeta;
     const [pos, setPos] = useState<[number, number] | null>(null);
@@ -48,11 +48,13 @@ const Callout = memo<CalloutProps>(function Callout({ target, children }) {
         }
     }, [target, root]);
 
+    const darkMode = useCurrentMediaTheme(darkModePreference);
+
     return (
         root &&
         pos &&
         createPortal(
-            <Bubble role="dialog" className="fixed bg-white dark:bg-zinc-900  z-50" style={{ left: pos[0], top: pos[1] + 4 }}>
+            <Bubble role="dialog" dark={darkMode === 'dark'} className="fixed bg-white dark:bg-zinc-900  z-50" style={{ left: pos[0], top: pos[1] + 4 }}>
                 {children}
             </Bubble>,
             root

package/src/components/clickMenu.tsx

@@ -3,16 +3,10 @@ import styled from "styled-components";
 
 const MenuContainer = styled.div`
     min-width: 100px;
-    background-color: #fff;
-    border: 1px solid #f0f0f0;
     position: absolute;
     z-index: 99;
     cursor: pointer;
     padding: 4px;
-    @media (prefers-color-scheme: dark) {
-        background-color: #000;
-        border: 1px solid #4b5563;
-    }
 `;
 interface ClickMenuProps {
     x: number;
@@ -22,7 +16,7 @@ interface ClickMenuProps {
 const ClickMenu: React.FC<ClickMenuProps> = (props) => {
     const { x, y, children } = props;
     return (
-        <MenuContainer className="shadow-lg text-sm" style={{ left: x + "px", top: y + "px" }}>
+        <MenuContainer className="shadow-lg text-sm bg-white border border-gray-100 dark:bg-black dark:border-gray-700" style={{ left: x + "px", top: y + "px" }}>
             {children}
         </MenuContainer>
     );

package/src/components/modal.tsx

@@ -25,16 +25,6 @@ const Container = styled.div`
     }
     max-height: 800px;
     overflow: auto;
-    > div.header {
-        background-color: #f0f0f0;
-        display: flex;
-        padding: 12px;
-        font-size: 14px;
-        align-items: center;
-        @media (prefers-color-scheme: dark) {
-            background-color: #000;
-        }
-    }
     > div.container {
         padding: 0.5em 1em 1em 1em;
     }
@@ -42,10 +32,6 @@ const Container = styled.div`
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    background-color: #fff;
-    @media (prefers-color-scheme: dark) {
-        background-color: #000;
-    }
     /* box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.19); */
     border-radius: 4px;
     z-index: 999;
@@ -74,7 +60,7 @@ const Modal: React.FC<ModalProps> = (props) => {
                 }
             }}
         >
-            <Container role="dialog" className="shadow-lg rounded-md border border-gray-100 dark:border-gray-800" onMouseDown={(e) => e.stopPropagation()}>
+            <Container role="dialog" className="bg-white dark:bg-zinc-900 shadow-lg rounded-md border border-gray-100 dark:border-gray-800" onMouseDown={(e) => e.stopPropagation()}>
             <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"

package/src/components/sizeSetting.tsx

@@ -14,7 +14,7 @@ export const ResizeDialog: React.FC<SizeSettingProps> = (props) => {
     const { t } = useTranslation("translation", { keyPrefix: "main.tabpanel.settings.size_setting" });
 
     return (
-        <>
+        <div className="text-zinc-400">
             {children}
             <div className="mt-4 w-60">
                 <input
@@ -52,7 +52,7 @@ export const ResizeDialog: React.FC<SizeSettingProps> = (props) => {
                     {`${t("height")}: ${height}`}
                 </output>
             </div>
-        </>
+        </div>
     );
 };
 

package/src/components/tabs/editableTab.tsx

@@ -32,8 +32,8 @@ export default function EditableTabs(props: EditableTabsProps) {
     }, [clearEditStatus]);
 
     return (
-        <div className="border-b border-gray-200 dark:border-gray-800 overflow-x-auto overflow-y-hidden" onMouseLeave={clearEditStatus}>
-            <nav className="-mb-px flex h-8 border-gray-200 dark:border-gray-800" role="tablist" aria-label="Tabs">
+        <div className="border-b border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden" onMouseLeave={clearEditStatus}>
+            <nav className="-mb-px flex h-8 border-gray-200 dark:border-gray-700" role="tablist" aria-label="Tabs">
                 {tabs.map((tab, tabIndex) => (
                     <span
                         role="tab"

package/src/components/toolbar/components.tsx

@@ -39,21 +39,15 @@ export const useHandlers = (action: () => void, disabled: boolean, triggerKeys:
     }), [allowPropagation]);
 };
 
-export const ToolbarContainer = styled.div`
+export const ToolbarContainer = styled.div<{ dark: boolean }>`
     --height: 36px;
     --icon-size: 18px;
     width: 100%;
     height: var(--height);
-    background-color: var(--background-color);
-    color: var(--color);
+    background-color: ${({ dark }) => dark ? 'var(--background-color-dark)' : 'var(--background-color)'};
+    color: ${({ dark }) => dark ? 'var(--color-dark)' : 'var(--color)'};
     border: 1px solid;
-    border-color: #e5e7eb;
-    // dark mode
-    @media (prefers-color-scheme: dark) {
-        background-color: var(--background-color-dark);
-        color: var(--color-dark);
-        border-color: #4b5563;
-    }
+    border-color: ${({ dark }) => dark ? '#4b5563' : '#e5e7eb'};
     /* box-shadow: 0px 1px 3px 1px rgba(136, 136, 136, 0.1); */
     border-radius: 2px;
     overflow: hidden;
@@ -73,7 +67,7 @@ export const ToolbarSplitter = styled.div`
     background: #bbbbbb50;
 `;
 
-export const ToolbarItemContainerElement = styled.div<{ split: boolean }>`
+export const ToolbarItemContainerElement = styled.div<{ split: boolean; dark: boolean }>`
     display: inline-flex;
     flex-direction: row;
     user-select: none;
@@ -81,7 +75,7 @@ export const ToolbarItemContainerElement = styled.div<{ split: boolean }>`
     width: ${({ split }) => split ? 'calc(var(--height) + 10px)' : 'var(--height)'};
     height: var(--height);
     overflow: hidden;
-    color: var(--color);
+    color: ${({ dark }) => dark ? 'var(--dark-mode-color)' : 'var(--color)'};
     position: relative;
     > svg {
         flex-grow: 0;
@@ -102,8 +96,8 @@ export const ToolbarItemContainerElement = styled.div<{ split: boolean }>`
     &[aria-disabled=false] {
         cursor: pointer;
         :hover, :focus, &.open {
-            --background-color: #FEFEFE;
-            color: var(--color-hover);
+            --background-color: ${({ dark }) => dark ? '#202020' : '#FEFEFE'};
+            color: ${({ dark }) => dark ? 'var(--dark-mode-color-hover)' : 'var(--color-hover)'};
             &.split * svg {
                 pointer-events: none;
                 transform: translate(-50%, -20%);
@@ -114,14 +108,5 @@ export const ToolbarItemContainerElement = styled.div<{ split: boolean }>`
             background-color: var(--background-color);
         }
     }
-    @media (prefers-color-scheme: dark) {
-        color: var(--dark-mode-color);
-        &[aria-disabled=false] {
-            :hover, :focus, &.open {
-                --background-color: #202020;
-                color: var(--dark-mode-color-hover);
-            }
-        }
-    }
     transition: color 100ms, background-image 100ms;
 `;

package/src/components/toolbar/index.tsx

@@ -1,10 +1,12 @@
 import React, { CSSProperties, memo, ReactNode, useState } from "react";
 import styled from "styled-components";
+import type { IDarkMode } from "../../interfaces";
+import { useCurrentMediaTheme } from "../../utils/media";
 import { ToolbarContainer, ToolbarSplitter } from "./components";
 import ToolbarItem, { ToolbarItemProps, ToolbarItemSplitter } from "./toolbar-item";
 
 
-const Root = styled.div`
+const Root = styled.div<{ darkModePreference: IDarkMode }>`
     width: 100%;
     --background-color: #f7f7f7;
     --color: #777;
@@ -16,9 +18,11 @@ const Root = styled.div`
     --dark-mode-color-hover: #ccc;
     --dark-mode-blue: #282958;
     --dark-mode-blue-dark: #1d1e38;
+    --dark-mode-preference: ${({ darkModePreference }) => darkModePreference};
 `;
 
 export interface ToolbarProps {
+    darkModePreference?: IDarkMode;
     items: ToolbarItemProps[];
     styles?: Partial<{
         root: CSSProperties & Record<string, string>;
@@ -29,13 +33,15 @@ export interface ToolbarProps {
     }>;
 }
 
-const Toolbar = memo<ToolbarProps>(function Toolbar ({ items, styles }) {
+const Toolbar = memo<ToolbarProps>(function Toolbar ({ darkModePreference = 'media', items, styles }) {
     const [openedKey, setOpenedKey] = useState<string | null>(null);
     const [slot, setSlot] = useState<ReactNode>(null);
 
+    const dark = useCurrentMediaTheme(darkModePreference) === 'dark';
+
     return (
-        <Root style={styles?.root}>
-            <ToolbarContainer style={styles?.container}>
+        <Root darkModePreference={darkModePreference} style={styles?.root}>
+            <ToolbarContainer dark={dark} style={styles?.container}>
                 {items.map((item, i) => {
                     if (item === ToolbarItemSplitter) {
                         return <ToolbarSplitter key={i} />;
@@ -48,6 +54,7 @@ const Toolbar = memo<ToolbarProps>(function Toolbar ({ items, styles }) {
                             openedKey={openedKey}
                             setOpenedKey={setOpenedKey}
                             renderSlot={node => setSlot(node)}
+                            darkModePreference={darkModePreference}
                         />
                     );
                 })}

package/src/components/toolbar/toolbar-button.tsx

@@ -8,7 +8,7 @@ export interface ToolbarButtonItem extends IToolbarItem {
 }
 
 const ToolbarButton = memo<IToolbarProps<ToolbarButtonItem>>(function ToolbarButton(props) {
-    const { item, styles } = props;
+    const { item, styles, darkModePreference } = props;
     const { icon: Icon, label, disabled, onClick } = item;
     const handlers = useHandlers(() => onClick?.(), disabled ?? false);
 
@@ -22,6 +22,7 @@ const ToolbarButton = memo<IToolbarProps<ToolbarButtonItem>>(function ToolbarBut
             <ToolbarItemContainer
                 props={props}
                 handlers={onClick ? handlers : null}
+                darkModePreference={darkModePreference}
             >
                 <Icon style={mergedIconStyles} />
             </ToolbarItemContainer>

package/src/components/toolbar/toolbar-item.tsx

@@ -8,6 +8,7 @@ import { ToolbarContainer, ToolbarItemContainerElement, ToolbarSplitter, useHand
 import Toolbar, { ToolbarProps } from ".";
 import Tooltip from "../tooltip";
 import Callout from "../callout";
+import { useCurrentMediaTheme } from "../../utils/media";
 
 
 const ToolbarSplit = styled.div<{ open: boolean }>`
@@ -34,10 +35,7 @@ const ToolbarSplit = styled.div<{ open: boolean }>`
 const FormContainer = styled(ToolbarContainer)`
     width: max-content;
     height: max-content;
-    background-color: #fff;
-    @media (prefers-color-scheme: dark) {
-        background-color: #000;
-    }
+    background-color: ${({ dark }) => dark ? '#000' : '#fff'};
 `;
 
 export interface IToolbarItem {
@@ -65,6 +63,7 @@ export type ToolbarItemProps = (
 
 export interface IToolbarProps<P extends Exclude<ToolbarItemProps, typeof ToolbarItemSplitter> = Exclude<ToolbarItemProps, typeof ToolbarItemSplitter>> {
     item: P;
+    darkModePreference: NonNullable<ToolbarProps['darkModePreference']>;
     styles?: ToolbarProps['styles'];
     openedKey: string | null;
     setOpenedKey: (key: string | null) => void;
@@ -74,6 +73,7 @@ export interface IToolbarProps<P extends Exclude<ToolbarItemProps, typeof Toolba
 let idFlag = 0;
 
 export const ToolbarItemContainer = memo<{
+    darkModePreference: NonNullable<ToolbarProps['darkModePreference']>;
     props: IToolbarProps;
     handlers: ReturnType<typeof useHandlers> | null;
     children: unknown;
@@ -84,6 +84,7 @@ export const ToolbarItemContainer = memo<{
             styles, openedKey, setOpenedKey, renderSlot,
         },
         handlers,
+        darkModePreference,
         children,
         ...props
     }
@@ -130,15 +131,18 @@ export const ToolbarItemContainer = memo<{
 
     useEffect(() => {
         if (opened && menu) {
-            renderSlot(<Toolbar {...menu} />);
+            renderSlot(<Toolbar {...menu} darkModePreference={darkModePreference} />);
             return () => renderSlot(null);
         }
     }, [opened, menu, renderSlot]);
 
+    const dark = useCurrentMediaTheme(darkModePreference) === 'dark';
+
     return (
         <>
-            <Tooltip content={label}>
+            <Tooltip content={label} darkModePreference={darkModePreference}>
                 <ToolbarItemContainerElement
+                    dark={dark}
                     role="button" tabIndex={disabled ? undefined : 0} aria-label={label} aria-disabled={disabled ?? false}
                     split={Boolean(form || menu)}
                     style={styles?.item}
@@ -190,8 +194,8 @@ export const ToolbarItemContainer = memo<{
                 </ToolbarItemContainerElement>
             </Tooltip>
             {opened && form && (
-                <Callout target={`#${id}`}>
-                    <FormContainer onMouseDown={e => e.stopPropagation()}>
+                <Callout target={`#${id}`} darkModePreference={darkModePreference}>
+                    <FormContainer dark={dark} onMouseDown={e => e.stopPropagation()}>
                         {form}
                     </FormContainer>
                 </Callout>
@@ -202,20 +206,21 @@ export const ToolbarItemContainer = memo<{
 
 const ToolbarItem = memo<{
     item: ToolbarItemProps;
+    darkModePreference: NonNullable<ToolbarProps['darkModePreference']>;
     styles?: ToolbarProps['styles'];
     openedKey: string | null;
     setOpenedKey: (key: string | null) => void;
     renderSlot: (node: ReactNode) => void;
-}>(function ToolbarItem ({ item, styles, openedKey, setOpenedKey, renderSlot }) {
+}>(function ToolbarItem ({ item, styles, openedKey, setOpenedKey, renderSlot, darkModePreference }) {
     if (item === ToolbarItemSplitter) {
         return  <ToolbarSplitter />;
     }
     if ('checked' in item) {
-        return <ToolbarToggleButton item={item} styles={styles} openedKey={openedKey} setOpenedKey={setOpenedKey} renderSlot={renderSlot} />;
+        return <ToolbarToggleButton item={item} styles={styles} openedKey={openedKey} setOpenedKey={setOpenedKey} renderSlot={renderSlot} darkModePreference={darkModePreference} />;
     } else if ('options' in item) {
-        return <ToolbarSelectButton item={item} styles={styles} openedKey={openedKey} setOpenedKey={setOpenedKey} renderSlot={renderSlot} />;
+        return <ToolbarSelectButton item={item} styles={styles} openedKey={openedKey} setOpenedKey={setOpenedKey} renderSlot={renderSlot} darkModePreference={darkModePreference} />;
     }
-    return <ToolbarButton item={item} styles={styles} openedKey={openedKey} setOpenedKey={setOpenedKey} renderSlot={renderSlot} />;
+    return <ToolbarButton item={item} styles={styles} openedKey={openedKey} setOpenedKey={setOpenedKey} renderSlot={renderSlot} darkModePreference={darkModePreference} />;
 });