Apply dark mode filter to monochrome type style icons

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

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 {

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;
 }
 
 /**

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) {
                     <img src={imageUrl} className={`${CLASS_NAME}__thumbnail-image`} />
                 </div>
             );
-        } else if (iconUrl) {
+        } else if (typeStyle.icon) {
             return (
-                <div className={`${CLASS_NAME}__thumbnail`} aria-hidden='true'>
-                    <img src={iconUrl} className={`${CLASS_NAME}__thumbnail-icon`} />
+                <div className={`${CLASS_NAME}__thumbnail`}
+                    aria-hidden='true'>
+                    <img src={typeStyle.icon}
+                        className={cx(
+                            `${CLASS_NAME}__thumbnail-icon`,
+                            typeStyle.iconMonochrome ? `${CLASS_NAME}__thumbnail-icon--monochrome` : undefined
+                        )}
+                    />
                 </div>
             );
         }

src/widgets/classTree/leaf.tsx

@@ -58,9 +58,9 @@ export class Leaf extends React.Component<LeafProps, State> {
             `${CLASS_NAME}__toggle-collapsed`
         );
 
-        const {color, icon} = getElementTypeStyle([node.iri]);
+        const typeStyle = getElementTypeStyle([node.iri]);
         const providedStyle = {
-            '--reactodia-element-style-color': color,
+            '--reactodia-element-style-color': typeStyle.color,
         } as React.CSSProperties;
 
         const selected = Boolean(selectedNode && selectedNode.iri === node.iri);
@@ -86,10 +86,13 @@ export class Leaf extends React.Component<LeafProps, State> {
                     />
                     <a className={bodyClass} href={node.iri} onClick={this.onClick}>
                         <div className={`${CLASS_NAME}__icon-container`}>
-                            {icon ? (
+                            {typeStyle.icon ? (
                                 <img role='presentation'
-                                    className={`${CLASS_NAME}__icon`}
-                                    src={icon}
+                                    className={cx(
+                                        `${CLASS_NAME}__icon`,
+                                        typeStyle.iconMonochrome ? `${CLASS_NAME}__icon--monochrome` : undefined
+                                    )}
+                                    src={typeStyle.icon}
                                 />
                             ) : (
                                 <div className={node.derived.length === 0

src/workspace/workspace.tsx

@@ -289,15 +289,16 @@ export class Workspace extends React.Component<WorkspaceProps> {
         let processedStyle = this.cachedTypeStyles.get(types);
         if (!processedStyle) {
             const customStyle = this.resolveTypeStyle(types);
-            const icon = customStyle ? customStyle.icon : undefined;
+
             let color: string;
             if (customStyle && customStyle.color) {
                 color = hcl(customStyle.color).toString();
             } else {
                 const hue = getHueFromClasses(types, TYPE_STYLE_COLOR_SEED);
                 color = hcl(hue, 40, 75).toString();
             }
-            processedStyle = {icon, color};
+
+            processedStyle = {...customStyle, color};
             this.cachedTypeStyles.set(types, processedStyle);
         }
         return processedStyle;

src/workspace/workspaceContext.ts

@@ -6,6 +6,7 @@ import type { Translation } from '../coreUtils/i18n';
 import type { ElementIri, ElementTypeIri } from '../data/model';
 
 import type { CanvasApi } from '../diagram/canvasApi';
+import type { TypeStyle } from '../diagram/customization';
 import type { Element } from '../diagram/elements';
 import type { LayoutFunction } from '../diagram/layout';
 import type { SharedCanvasState } from '../diagram/sharedCanvasState';
@@ -213,15 +214,11 @@ export enum WorkspaceEventKey {
 /**
  * Represents a computed style to display an element in various parts of the UI.
  */
-export interface ProcessedTypeStyle {
+export interface ProcessedTypeStyle extends Omit<TypeStyle, 'color'> {
     /**
      * CSS color string.
      */
     readonly color: string;
-    /**
-     * Icon image URL.
-     */
-    readonly icon: string | undefined;
 }
 
 /** @hidden */

styles/templates/_standard.scss

@@ -134,6 +134,10 @@ $standard-new-entity-stripe: theme.$element-background-color;
     object-fit: contain;
   }
 
+  &__thumbnail-icon--monochrome {
+    filter: theme.$monochrome-icon-filter;
+  }
+
   &__photo {
     border-bottom: 1px solid;
     border-color: $standard-template-color;

styles/theme/_theme.scss

@@ -159,6 +159,7 @@ $canvas-overlay-color: var(--reactodia-canvas-overlay-color);
 $canvas-underlay-color: var(--reactodia-canvas-underlay-color);
 $element-background-color: var(--reactodia-element-background-color);
 $link-stroke-color: var(--reactodia-link-stroke-color);
+$monochrome-icon-filter: var(--reactodia-monochrome-icon-filter);
 $viewport-dock-margin: var(--reactodia-viewport-dock-margin);
 
 /* Halo and Selection */

styles/theme/_themeDark.scss

@@ -59,8 +59,9 @@
   --reactodia-canvas-underlay-color: rgba(28, 28, 28, 0.6);
   --reactodia-element-background-color: #242526;
   --reactodia-link-stroke-color: var(--reactodia-color-emphasis-1000);
+  --reactodia-monochrome-icon-filter: invert(1);
 
-  --reactodia-selection-icon-filter: invert(100%);
+  --reactodia-selection-icon-filter: invert(1);
   --reactodia-selection-multiple-box-shadow: 0 0 7px 7px rgba(170, 170, 170, 0.13);
 
   --reactodia-navigator-background-fill: var(--reactodia-color-gray-900);

styles/theme/_themeLight.scss

@@ -59,6 +59,7 @@
   --reactodia-canvas-underlay-color: rgba(255, 255, 255, 0.7);
   --reactodia-element-background-color: #fafaf9;
   --reactodia-link-stroke-color: var(--reactodia-color-emphasis-1000);
+  --reactodia-monochrome-icon-filter: /* unset */;
 
   --reactodia-selection-icon-filter: /* unset */;
   --reactodia-selection-multiple-box-shadow: 0 0 7px 7px rgba(51, 51, 51, 0.13);

styles/widgets/_classTree.scss

@@ -83,6 +83,10 @@
     height: 100%;
   }
 
+  &__icon--monochrome {
+    filter: theme.$monochrome-icon-filter;
+  }
+
   &__default-icon-leaf,
   &__default-icon-parent {
     @include codicon("symbol-method");