From 4caeb7ae2e9d82b4155ee5bc8cff7c23bb5e6798 Mon Sep 17 00:00:00 2001 From: Alexey Morozov Date: Sun, 8 Jun 2025 16:37:29 +0300 Subject: [PATCH] Apply dark mode filter to monochrome type style icons: * Allow to return `iconMonochrome: true` for a type style to automatically apply dark theme filter for the icon; --- CHANGELOG.md | 1 + examples/styleCustomization.tsx | 6 +++--- src/diagram/customization.ts | 9 +++++++++ src/templates/standardTemplate.tsx | 16 +++++++++++----- src/widgets/classTree/leaf.tsx | 13 ++++++++----- src/workspace/workspace.tsx | 5 +++-- src/workspace/workspaceContext.ts | 7 ++----- styles/templates/_standard.scss | 4 ++++ styles/theme/_theme.scss | 1 + styles/theme/_themeDark.scss | 3 ++- styles/theme/_themeLight.scss | 1 + styles/widgets/_classTree.scss | 4 ++++ 12 files changed, 49 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a4d0d76..e286d72a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -40,6 +40,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p * `PLACEHOLDER_ELEMENT_TYPE` -> `PlaceholderEntityType`, * `PLACEHOLDER_LINK_TYPE` -> `PlaceholderRelationType`; - Support the ability to expand up the `Dropdown`, `DropdownMenu` and `Toolbar` by setting `direction` to `"up"` e.g. for docking the toolbar to the bottom of the viewport. +- Allow to return `iconMonochrome: true` for a type style to automatically apply dark theme filter for the icon. - Support optional dependency list in `useEventStore()` to re-subscribe to store if needed. #### 🔧 Maintenance diff --git a/examples/styleCustomization.tsx b/examples/styleCustomization.tsx index 2ce7c89d..fb52b1d2 100644 --- a/examples/styleCustomization.tsx +++ b/examples/styleCustomization.tsx @@ -37,11 +37,11 @@ function StyleCustomizationExample() { defaultLayout={defaultLayout} typeStyleResolver={types => { if (types.indexOf('http://www.w3.org/2000/01/rdf-schema#Class') !== -1) { - return {icon: CERTIFICATE_ICON}; + return {icon: CERTIFICATE_ICON, iconMonochrome: true}; } else if (types.indexOf('http://www.w3.org/2002/07/owl#Class') !== -1) { - return {icon: CERTIFICATE_ICON}; + return {icon: CERTIFICATE_ICON, iconMonochrome: true}; } else if (types.indexOf('http://www.w3.org/2002/07/owl#ObjectProperty') !== -1) { - return {icon: COG_ICON}; + return {icon: COG_ICON, iconMonochrome: true}; } else if (types.indexOf('http://www.w3.org/2002/07/owl#DatatypeProperty') !== -1) { return {color: '#00b9f2'}; } else { diff --git a/src/diagram/customization.ts b/src/diagram/customization.ts index b4c5255a..02f8bb97 100644 --- a/src/diagram/customization.ts +++ b/src/diagram/customization.ts @@ -26,6 +26,8 @@ export type LinkTemplateResolver = (linkTypeId: LinkTypeIri) => LinkTemplate | u /** * Common style for a type or set of types to display in various parts of the UI. + * + * @see {@link TypeStyleResolver} */ export interface TypeStyle { /** @@ -36,6 +38,13 @@ export interface TypeStyle { * Icon image URL. */ readonly icon?: string; + /** + * Whether the icon is assumed to be monochrome, so it can be + * inverted for the dark theme. + * + * @default false + */ + readonly iconMonochrome?: boolean; } /** diff --git a/src/templates/standardTemplate.tsx b/src/templates/standardTemplate.tsx index 6439f06a..7875f0dc 100644 --- a/src/templates/standardTemplate.tsx +++ b/src/templates/standardTemplate.tsx @@ -84,9 +84,9 @@ export function StandardEntity(props: StandardEntityProps) { const label = model.locale.formatEntityLabel(data, model.language); const imageUrl = model.locale.selectEntityImageUrl(data); const typesLabel = formatEntityTypes(data, workspace); - const {color: baseColor, icon: iconUrl} = getElementTypeStyle(data.types); + const typeStyle = getElementTypeStyle(data.types); const rootStyle = { - '--reactodia-element-style-color': baseColor, + '--reactodia-element-style-color': typeStyle.color, } as React.CSSProperties; const pinnedProperties = findPinnedProperties() ?? {}; @@ -150,10 +150,16 @@ export function StandardEntity(props: StandardEntityProps) { ); - } else if (iconUrl) { + } else if (typeStyle.icon) { return ( -