@kanaries/graphic-walker 0.2.13 → 0.2.15

package/src/components/dataTable/index.tsx

@@ -3,6 +3,8 @@ import styled from "styled-components";
 import { IMutField, IRow } from "../../interfaces";
 import { useTranslation } from "react-i18next";
 import Pagination from "./pagination";
+import { ChevronUpDownIcon } from "@heroicons/react/24/outline";
+import DropdownContext from "../dropdownContext";
 
 interface DataTableProps {
     size?: number;
@@ -18,16 +20,6 @@ const Container = styled.div`
         box-sizing: content-box;
         border-collapse: collapse;
         font-size: 12px;
-        thead {
-            th {
-            }
-            th.number {
-                border-top: 3px solid #5cdbd3;
-            }
-            th.text {
-                border-top: 3px solid #69c0ff;
-            }
-        }
         tbody {
             td {
             }
@@ -50,17 +42,17 @@ function getHeaderType(field: IMutField): "number" | "text" {
 }
 
 function getHeaderClassNames(field: IMutField) {
-    return field.analyticType === "dimension" ? "border-t-4 border-blue-400" : "border-t-4 border-teal-400";
+    return field.analyticType === "dimension" ? "border-t-4 border-blue-400" : "border-t-4 border-purple-400";
 }
 
 function getSemanticColors(field: IMutField): string {
     switch (field.semanticType) {
         case "nominal":
-            return "bg-indigo-100 text-indigo-800";
+            return "bg-sky-100 text-sky-800";
         case "ordinal":
-            return "bg-purple-100 text-purple-800";
+            return "bg-indigo-100 text-indigo-800";
         case "quantitative":
-            return "bg-green-100 text-green-800";
+            return "bg-purple-100 text-purple-800";
         case "temporal":
             return "bg-yellow-100 text-yellow-800";
         default:
@@ -91,7 +83,7 @@ const DataTable: React.FC<DataTableProps> = (props) => {
     const to = Math.min((pageIndex + 1) * size, data.length - 1);
 
     return (
-        <Container className="rounded border-gray-200 border">
+        <Container className="rounded border-gray-200 dark:border-gray-700 border">
             <Pagination
                 total={data.length}
                 from={from + 1}
@@ -103,74 +95,72 @@ const DataTable: React.FC<DataTableProps> = (props) => {
                     setPageIndex(Math.max(0, pageIndex - 1));
                 }}
             />
-            <table className="min-w-full divide-y divide-gray-30">
-                <thead className="bg-gray-50">
-                    <tr className="divide-x divide-gray-200">
+            <table className="min-w-full divide-y">
+                <thead className="bg-gray-50 dark:bg-gray-900">
+                    <tr className="divide-x divide-gray-200 dark:divide-gray-600">
                         {metas.map((field, fIndex) => (
                             <th key={field.fid} className={""}>
                                 <div
                                     className={
                                         getHeaderClassNames(field) +
-                                        " whitespace-nowrap py-3.5 px-6 text-left text-xs font-semibold text-gray-900 sm:pl-6"
+                                        " whitespace-nowrap py-3.5 px-6 text-left text-xs font-semibold text-gray-900 dark:text-gray-50 sm:pl-6"
                                     }
                                 >
                                     <b>{field.name || field.fid}</b>
                                     <div>
-                                        <select
-                                            className={
-                                                "px-2 py font-normal mt-2 rounded-full text-xs text-white " +
-                                                (field.analyticType === "dimension" ? "bg-blue-500" : "bg-teal-500")
-                                            }
-                                            // className="border-b border-gray-200 bg-gray-50 pl-0 mt-2 font-light"
-                                            value={field.analyticType}
-                                            onChange={(e) => {
+                                        <DropdownContext
+                                            options={analyticTypeList}
+                                            onSelect={(value) => {
                                                 onMetaChange(field.fid, fIndex, {
-                                                    analyticType: e.target.value as IMutField["analyticType"],
+                                                    analyticType: value as IMutField["analyticType"],
                                                 });
                                             }}
                                         >
-                                            {analyticTypeList.map((type) => (
-                                                <option key={type.value} value={type.value}>
-                                                    {type.label}
-                                                </option>
-                                            ))}
-                                        </select>
+                                            <span
+                                                className={
+                                                    "cursor-pointer inline-flex px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs text-white " +
+                                                    (field.analyticType === "dimension" ? "bg-blue-500" : "bg-purple-500")
+                                                }
+                                            >
+                                                {field.analyticType}
+                                                <ChevronUpDownIcon className="ml-2 w-3" />
+                                            </span>
+                                        </DropdownContext>
                                     </div>
                                     <div>
-                                        <select
-                                            className={
-                                                "inline-block px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs text-white " +
-                                                getSemanticColors(field)
-                                            }
-                                            // className="border-b border-gray-200 bg-gray-50 pl-0 mt-2 font-light"
-                                            value={field.semanticType}
-                                            onChange={(e) => {
+                                        <DropdownContext
+                                            options={semanticTypeList}
+                                            onSelect={(value) => {
                                                 onMetaChange(field.fid, fIndex, {
-                                                    semanticType: e.target.value as IMutField["semanticType"],
+                                                    semanticType: value as IMutField["semanticType"],
                                                 });
                                             }}
                                         >
-                                            {semanticTypeList.map((type) => (
-                                                <option key={type.value} value={type.value}>
-                                                    {type.label}
-                                                </option>
-                                            ))}
-                                        </select>
+                                            <span
+                                                className={
+                                                    "cursor-pointer inline-flex px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs " +
+                                                    getSemanticColors(field)
+                                                }
+                                            >
+                                                {field.semanticType}
+                                                <ChevronUpDownIcon className="ml-2 w-3" />
+                                            </span>
+                                        </DropdownContext>
                                     </div>
                                 </div>
                             </th>
                         ))}
                     </tr>
                 </thead>
-                <tbody className="divide-y divide-gray-200 bg-white">
+                <tbody className="divide-y divide-gray-100 dark:divide-gray-600 bg-white dark:bg-zinc-900">
                     {data.slice(from, to).map((row, index) => (
-                        <tr className={"divide-x divide-gray-200 " + (index % 2 ? "bg-gray-50" : "")} key={index}>
+                        <tr className={"divide-x divide-gray-200 dark:divide-gray-600 " + (index % 2 ? "bg-gray-50 dark:bg-gray-800" : "")} key={index}>
                             {metas.map((field) => (
                                 <td
                                     key={field.fid + index}
                                     className={
                                         getHeaderType(field) +
-                                        " whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 sm:pl-6"
+                                        " whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 dark:text-gray-300 sm:pl-6"
                                     }
                                 >
                                     {row[field.fid]}

package/src/components/dataTable/pagination.tsx

@@ -12,11 +12,11 @@ export default function Pagination(props: PaginationProps) {
     const { t } = useTranslation();
     return (
         <nav
-            className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
+            className="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-zinc-900 px-4 py-3 sm:px-6"
             aria-label="Pagination"
         >
             <div className="hidden sm:block">
-                <p className="text-sm text-gray-700">
+                <p className="text-sm text-gray-800 dark:text-gray-100">
                     Showing <span className="font-medium">{from}</span> to <span className="font-medium">{to}</span> of{" "}
                     <span className="font-medium">{total}</span> results
                 </p>
@@ -26,7 +26,7 @@ export default function Pagination(props: PaginationProps) {
                     onClick={() => {
                         onPrev();
                     }}
-                    className="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                    className="relative inline-flex items-center rounded-md border border-gray-300 bg-white dark:bg-zinc-900 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
                 >
                     {t('actions.prev')}
                 </button>
@@ -34,7 +34,7 @@ export default function Pagination(props: PaginationProps) {
                     onClick={() => {
                         onNext()
                     }}
-                    className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                    className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white dark:bg-zinc-900  px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
                 >
                     {t('actions.next')}
                 </button>

package/src/components/dataTypeIcon.tsx

@@ -6,7 +6,7 @@ const DataTypeIcon: React.FC<{ dataType: IMutField["semanticType"]; analyticType
     props
 ) => {
     const { dataType, analyticType } = props;
-    const color = analyticType === "dimension" ? "text-blue-500" : "text-green-500";
+    const color = analyticType === "dimension" ? "text-blue-500" : "text-purple-500";
     const iconClassName = `w-3 inline-block mr-0.5 ${color}`;
     switch (dataType) {
         case "quantitative":

package/src/components/dropdownContext/index.tsx

@@ -0,0 +1,64 @@
+import React, { Fragment } from "react";
+import { Menu, Transition } from "@headlessui/react";
+
+function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(" ");
+}
+
+export interface IDropdownContextOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface IDropdownContextProps {
+    options?: IDropdownContextOption[];
+    disable?: boolean;
+    onSelect?: (value: string, index: number) => void;
+}
+const DropdownContext: React.FC<IDropdownContextProps> = (props) => {
+    const { options = [], disable } = props;
+
+    if (disable) {
+        return <Fragment>{props.children}</Fragment>;
+    }
+
+    return (
+        <Menu as="span" className="relative block text-left">
+            <Menu.Button className="block w-full text-left">{props.children}</Menu.Button>
+
+            <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+            >
+                <Menu.Items className="absolute left-0 z-50 mt-2 w-56 origin-top-right rounded-md bg-white dark:bg-zinc-900  shadow-lg border border-gray-50 dark:border-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    <div className="py-1">
+                        {options.map((option, index) => (
+                            <Menu.Item key={option.value}>
+                                {(p) => (
+                                    <span
+                                        className={classNames(
+                                            p.active ? "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50" : "text-gray-700 dark:text-gray-200",
+                                            "block px-4 py-2 text-sm"
+                                        )}
+                                        onClick={() => {
+                                            props.onSelect && !props.disable && props.onSelect(option.value, index);
+                                        }}
+                                    >
+                                    {option.label}
+                                    </span>
+                                )}
+                            </Menu.Item>
+                        ))}
+                    </div>
+                </Menu.Items>
+            </Transition>
+        </Menu>
+    );
+};
+
+export default DropdownContext;

package/src/components/dropdownSelect/index.tsx

@@ -0,0 +1,92 @@
+import React, { Fragment } from "react";
+import { Listbox, Menu, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronDownIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
+
+function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(" ");
+}
+
+export interface IDropdownSelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface IDropdownSelectProps {
+    options?: IDropdownSelectOption[];
+    disable?: boolean;
+    selectedKey: string;
+    onSelect?: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    buttonClassName?: string;
+}
+const DropdownSelect: React.FC<IDropdownSelectProps> = (props) => {
+    const { options = [], disable, selectedKey, onSelect, placeholder = "Select an option", className, buttonClassName } = props;
+
+    const selectedItem = options.find((op) => op.value === selectedKey);
+
+    if (disable) {
+        return <Fragment>{props.children}</Fragment>;
+    }
+    let rootClassName = "relative";
+    let btnComputedClassName = "relative cursor-default text-xs rounded-lg bg-white dark:bg-zinc-900 px-2.5 py-1.5 pr-10 text-left border border-gray-200 dark:border-gray-700 focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 truncate"
+    if (buttonClassName) {
+        btnComputedClassName = btnComputedClassName + " " + buttonClassName;
+    }
+    if (className) {
+        rootClassName = rootClassName + " " + className;
+    }
+    return (
+        <Listbox
+            value={selectedKey}
+            onChange={(newKey) => {
+                onSelect && onSelect(newKey);
+            }}
+        >
+            <div className={rootClassName}>
+                <Listbox.Button className={btnComputedClassName}>
+                    <span className="block truncate dark:text-white">{selectedItem?.label || ""}</span>
+                    { selectedItem === undefined && <span className="block truncate text-gray-400">{placeholder}</span>}
+                    <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                        <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                    </span>
+                </Listbox.Button>
+                <Transition
+                    as={Fragment}
+                    leave="transition ease-in duration-100"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <Listbox.Options className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-zinc-900  py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                        {options.map((op, opIndex) => (
+                            <Listbox.Option
+                                key={op.value}
+                                className={({ active }) =>
+                                    `relative cursor-default select-none py-2 pl-10 pr-4 ${
+                                        active ? "bg-amber-100 text-amber-900 dark:bg-amber-800 dark:text-amber-50" : "text-gray-900 dark:text-gray-50"
+                                    }`
+                                }
+                                value={op.value}
+                            >
+                                {({ selected }) => (
+                                    <>
+                                        <span className={`block truncate ${selected ? "font-medium" : "font-normal"}`}>
+                                            {op.label}
+                                        </span>
+                                        {selected && (
+                                            <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600 dark:text-amber-400">
+                                                <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                            </span>
+                                        )}
+                                    </>
+                                )}
+                            </Listbox.Option>
+                        ))}
+                    </Listbox.Options>
+                </Transition>
+            </div>
+        </Listbox>
+    );
+};
+
+export default DropdownSelect;

package/src/components/modal.tsx

@@ -1,6 +1,9 @@
 import React, { useRef } from "react";
 import styled from "styled-components";
 import { XCircleIcon } from "@heroicons/react/24/outline";
+import { Fragment, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { ExclamationTriangleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
 const Background = styled.div({
     position: "fixed",
@@ -22,33 +25,25 @@ const Container = styled.div`
     }
     max-height: 800px;
     overflow: auto;
-    > div.header {
-        background-color: #f0f0f0;
-        display: flex;
-        padding: 12px;
-        font-size: 14px;
-        align-items: center;
-    }
     > div.container {
-        padding: 1em;
+        padding: 0.5em 1em 1em 1em;
     }
     position: fixed;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    background-color: #fff;
     /* box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.19); */
     border-radius: 4px;
     z-index: 999;
 `;
 interface ModalProps {
     onClose?: () => void;
+    show?: boolean;
     title?: string;
 }
 const Modal: React.FC<ModalProps> = (props) => {
-    const { onClose, title } = props;
+    const { onClose, title, show } = props;
     const prevMouseDownTimeRef = useRef(0);
-
     return (
         <Background
             // This is a safer replacement of onClick handler.
@@ -56,7 +51,7 @@ const Modal: React.FC<ModalProps> = (props) => {
             // at a different element and then released when the mouse is moved on the target element.
             // This case is required to be prevented, especially disturbing when interacting
             // with a Slider component.
-            className="border border-gray-300"
+            className={"border border-gray-300 dark:border-gray-600 " + (show ? "block" : "hidden")}
             onMouseDown={() => (prevMouseDownTimeRef.current = Date.now())}
             onMouseOut={() => (prevMouseDownTimeRef.current = 0)}
             onMouseUp={() => {
@@ -65,17 +60,20 @@ const Modal: React.FC<ModalProps> = (props) => {
                 }
             }}
         >
-            <Container role="dialog" className="shadow-lg" onMouseDown={(e) => e.stopPropagation()}>
-                <div className="header relative h-9">
-                    <header className="font-bold">{title}</header>
-                    <XCircleIcon
-                        className="text-red-600 absolute right-2 w-6 cursor-pointer"
-                        role="button"
-                        tabIndex={0}
-                        aria-label="close dialog"
-                        onClick={onClose}
-                    />
+            <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"
+                    className="rounded-md bg-white dark:bg-zinc-900 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    onClick={() => {
+                        onClose?.();
+                    }}
+                  >
+                    <span className="sr-only">Close</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
                 </div>
+                <div className="px-6 pt-4 text-base font-semibold leading-6 text-gray-900 dark:text-gray-50">{title}</div>
                 <div className="container">{props.children}</div>
             </Container>
         </Background>

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/defaultTab.tsx

@@ -19,7 +19,7 @@ export default function Default(props: DefaultProps) {
     const { tabs, selectedKey, onSelected } = props;
 
     return (
-        <div className="border-b border-gray-200 mb-2" >
+        <div className="border-b border-gray-200 dark:border-gray-700 mb-2" >
             <nav className="-mb-px flex space-x-8" role="tablist" aria-label="Tabs">
                 {tabs.map((tab, tabIndex) => (
                     <span
@@ -31,9 +31,9 @@ export default function Default(props: DefaultProps) {
                         key={tab.key}
                         className={classNames(
                             tab.key === selectedKey
-                            ? 'border-indigo-500 text-indigo-600'
-                            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
-                          'whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm'
+                            ? 'border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-300'
+                            : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:text-gray-400',
+                          'whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm cursor-pointer'
                         )}
                     >{tab.label}</span>
                 ))}

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 overflow-x-auto overflow-y-hidden" onMouseLeave={clearEditStatus}>
-            <nav className="-mb-px flex h-8 border-gray-200 border-l" 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"
@@ -64,9 +64,9 @@ export default function EditableTabs(props: EditableTabsProps) {
                         key={tab.key}
                         className={classNames(
                             tab.key === selectedKey
-                                ? "text-black bg-gray-100"
-                                : "text-gray-500 hover:text-gray-700",
-                            "whitespace-nowrap border-gray-200 py-1 px-2 border-r border-t border-b pr-6 text-sm cursor-pointer"
+                                ? "border rounded-t"
+                                : "text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:bg-gray-50 dark:hover:text-gray-200 dark:hover:bg-gray-800",
+                            "whitespace-nowrap border-gray-200 dark:border-gray-700 py-1 px-2 pr-6 text-sm cursor-pointer dark:text-white"
                         )}
                     />
                 ))}

package/src/components/toolbar/components.tsx

@@ -39,13 +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: ${({ dark }) => dark ? '#4b5563' : '#e5e7eb'};
     /* box-shadow: 0px 1px 3px 1px rgba(136, 136, 136, 0.1); */
     border-radius: 2px;
     overflow: hidden;
@@ -65,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;
@@ -73,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;
@@ -94,9 +96,8 @@ export const ToolbarItemContainerElement = styled.div<{ split: boolean }>`
     &[aria-disabled=false] {
         cursor: pointer;
         :hover, :focus, &.open {
-            background-image: linear-gradient(#FFFFFFCC, #FEFEFECC);
-            --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%);
@@ -104,6 +105,7 @@ export const ToolbarItemContainerElement = styled.div<{ split: boolean }>`
             & svg {
                 text-shadow: 0 0 1.5px var(--shadow-color);
             }
+            background-color: var(--background-color);
         }
     }
     transition: color 100ms, background-image 100ms;

package/src/components/toolbar/index.tsx

@@ -1,19 +1,28 @@
 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;
     --color-hover: #555;
     --blue: #282958;
     --blue-dark: #1d1e38;
+    --dark-mode-background-color: #1f1f1f;
+    --dark-mode-color: #aaa;
+    --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>;
@@ -24,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} />;
@@ -43,6 +54,7 @@ const Toolbar = memo<ToolbarProps>(function Toolbar ({ items, styles }) {
                             openedKey={openedKey}
                             setOpenedKey={setOpenedKey}
                             renderSlot={node => setSlot(node)}
+                            darkModePreference={darkModePreference}
                         />
                     );
                 })}