Update Hyper-Dataset images (#1029)

docs/hyper_datasets.md

@@ -27,7 +27,8 @@ data lineages can be created, and users can track when and how their data change
 you can view a dataset's version history, as well as its contents, including annotations, metadata, masks, and other 
 information.
 
-![Frame viewer](img/hyperdatasets/web-app/dataset_example_frame_editor.png)
+![Frame viewer](img/hyperdatasets/dataset_example_frame_editor.png#light-mode-only)
+![Frame viewer](img/hyperdatasets/dataset_example_frame_editor_dark.png#dark-mode-only)
 
 The basic premise of Hyper-Datasets is that a user-formed query is a full representation of the dataset used by the ML/DL 
 process. Hyper-Datasets decouple metadata from raw data files, allowing you to manipulate metadata through sophisticated

docs/hyperdatasets/masks.md

@@ -24,7 +24,8 @@ See how to manage dataset version mask labels pythonically [here](dataset.md#man
 
 In the UI, you can view the mapping in a dataset version's [Metadata](webapp/webapp_datasets_versioning.md#metadata) tab.
 
-![Dataset metadata panel](../img/hyperdatasets/dataset_metadata.png)
+![Dataset metadata panel](../img/hyperdatasets/dataset_metadata.png#light-mode-only)
+![Dataset metadata panel](../img/hyperdatasets/dataset_metadata_dark.png#dark-mode-only)
 
 When viewing a frame with a mask corresponding with the version's mask-label mapping, the UI arbitrarily assigns a color 
 to each label. The color assignment can be [customized](webapp/webapp_datasets_frames.md#labels).
@@ -32,12 +33,14 @@ to each label. The color assignment can be [customized](webapp/webapp_datasets_f
 For example:
 * Original frame image:
 
-  ![Frame without mask](../img/hyperdatasets/dataset_pixel_masks_1.png)
+  ![Frame without mask](../img/hyperdatasets/dataset_pixel_masks_1.png#light-mode-only)
+  ![Frame without mask](../img/hyperdatasets/dataset_pixel_masks_1_dark.png#dark-mode-only)
 
 * Frame image with the semantic segmentation mask enabled. Labels are applied according to the dataset version's 
   mask-label mapping:
 
-  ![Frame with semantic seg mask](../img/hyperdatasets/dataset_pixel_masks_2.png)
+  ![Frame with semantic seg mask](../img/hyperdatasets/dataset_pixel_masks_2.png#light-mode-only)
+  ![Frame with semantic seg mask](../img/hyperdatasets/dataset_pixel_masks_2_dark.png#dark-mode-only)
 
 The frame's sources array contains a masks list of dictionaries that looks something like this:
 
@@ -75,11 +78,13 @@ desired sections of the source are visible.
 For example:
 * Original frame:
   
-  ![Maskless frame](../img/hyperdatasets/dataset_alpha_masks_1.png)
+  ![Maskless frame](../img/hyperdatasets/dataset_alpha_masks_1.png#light-mode-only)
+  ![Maskless frame](../img/hyperdatasets/dataset_alpha_masks_1_dark.png#dark-mode-only)
 
 * Same frame with an alpha channel mask, emphasizing the troll doll:
   
-  ![Alpha mask frame](../img/hyperdatasets/dataset_alpha_masks_2.png)
+  ![Alpha mask frame](../img/hyperdatasets/dataset_alpha_masks_2.png#light-mode-only)
+  ![Alpha mask frame](../img/hyperdatasets/dataset_alpha_masks_2_dark.png#dark-mode-only)
 
 
 The frame's sources array contains a masks list of dictionaries that looks something like this:

docs/hyperdatasets/previews.md

@@ -90,8 +90,10 @@ The following is an example of preview metadata.
 
 Here's an example of Previews in the ClearML Enterprise WebApp (UI). Each thumbnail is a Preview:
 
-![Previews](../img/hyperdatasets/web-app/dataset_versions.png)
+![Previews](../img/hyperdatasets/dataset_versions.png#light-mode-only)
+![Previews](../img/hyperdatasets/dataset_versions_dark.png#dark-mode-only)
 
 If the preview's `uri` is for a video, the thumbnail will display the video with video controls:
 
-![Video previews](../img/hyperdatasets/video_preview.png)
+![Video previews](../img/hyperdatasets/video_preview.png#light-mode-only)
+![Video previews](../img/hyperdatasets/video_preview_dark.png#dark-mode-only)

docs/hyperdatasets/single_frames.md

@@ -147,7 +147,8 @@ object annotations, its metadata, and other details.
 
 This image shows a SingleFrame in the ClearML Enterprise WebApp (UI) [frame viewer](webapp/webapp_datasets_frames.md#frame-viewer). 
     
-![image](../img/hyperdatasets/frame_overview_01.png)
+![SingleFrame in WebApp](../img/hyperdatasets/frame_overview_01.png#light-mode-only)
+![SingleFrame in WebApp](../img/hyperdatasets/frame_overview_01_dark.png#dark-mode-only)
 
 </Collapsible>
 

docs/hyperdatasets/webapp/webapp_annotator.md

@@ -7,7 +7,8 @@ Use the Annotations page to access and manage annotation Tasks.
 Use annotation tasks to efficiently organize the annotation of frames in Dataset versions and manage the work of annotators 
 (see [Annotating Images and Videos](#annotating-images-and-video)).
 
-![Annotations page](../../img/annotation_page.png) 
+![Annotations page](../../img/hyperdatasets/annotation_page.png#light-mode-only)
+![Annotations page](../../img/hyperdatasets/annotation_page_dark.png#dark-mode-only) 
 
 Click on an annotation task card to open the frame viewer, where you can view the task's frames and annotate them.
 
@@ -15,7 +16,12 @@ Click on an annotation task card to open the frame viewer, where you can view th
 Click <img src="/docs/latest/icons/ico-bars-menu.svg" alt="Menu" className="icon size-md space-sm" /> on the top right 
 of an annotation task card to open its context menu and access annotation task actions.  
 
-![Annotation task card](../../img/annotation_task_card.png)
+<div class="max-w-75">
+
+![Annotation task card](../../img/hyperdatasets/annotation_task_card.png#light-mode-only)
+![Annotation task card](../../img/hyperdatasets/annotation_task_card_dark.png#dark-mode-only)
+
+</div>
 
 * **Annotate** - Go to annotation task frame viewer
 * **Info** - View annotation task's definitions: dataset versions, filters, and frame iteration specification
@@ -32,7 +38,8 @@ Sort the annotation tasks by either using **RECENT** or **NAME** option.
 
 ## Creating Annotation Tasks
 
-![Annotation task creation modal](../../img/hyperdatasets/annotation_task_01.png)
+![Annotation task creation modal](../../img/hyperdatasets/annotation_task_01.png#light-mode-only)
+![Annotation task creation modal](../../img/hyperdatasets/annotation_task_01_dark.png#dark-mode-only)
 
 **To create an annotation task:**
 
@@ -61,7 +68,7 @@ Sort the annotation tasks by either using **RECENT** or **NAME** option.
             
 1. Click **Create**.
 
-## Annotating Images and Video 
+## Annotating Images and Video
 Annotate images and video by labeling regions of interest in Dataset version frames. The frames presented for annotation 
 depend upon the settings in the annotation task (see [Creating Annotation Tasks](#creating-annotation-tasks)).
 

docs/hyperdatasets/webapp/webapp_datasets.md

@@ -20,7 +20,8 @@ Filter the hyper-datasets to find the one you're looking for more easily. These
   * Filter by the absence of a tag (logical "NOT") by clicking its checkbox twice. An X will appear in the tag's checkbox.
 
 
-![Hyper-Dataset page](../../img/hyperdatasets/datasets_01.png)
+![Hyper-Dataset page](../../img/hyperdatasets/datasets_01.png#light-mode-only)
+![Hyper-Dataset page](../../img/hyperdatasets/datasets_01_dark.png#dark-mode-only)
 
 ## Project Cards
 
@@ -28,7 +29,8 @@ In Project view, project cards display a project's summarized hyper-dataset info
 
 <div class="max-w-50">
 
-![Hyper-Dataset project card](../../img/hyperdatasets/hyperdataset_project_card.png)
+![Hyper-Dataset project card](../../img/hyperdatasets/hyperdataset_project_card.png#light-mode-only)
+![Hyper-Dataset project card](../../img/hyperdatasets/hyperdataset_project_card_dark.png#dark-mode-only)
 
 </div>
 
@@ -45,7 +47,8 @@ In List view, the Hyper-Dataset cards display summarized dataset information:
 
 <div class="max-w-50">
 
-![Hyper-Dataset card](../../img/hyperdatasets/hyperdataset_card.png)
+![Hyper-Dataset card](../../img/hyperdatasets/hyperdataset_card.png#light-mode-only)
+![Hyper-Dataset card](../../img/hyperdatasets/hyperdataset_card_dark.png#dark-mode-only)
 
 </div>
 
@@ -70,9 +73,10 @@ To change the label color coding, hover over a label color, click the hand point
 Click <img src="/docs/latest/icons/ico-bars-menu.svg" alt="Menu" className="icon size-md space-sm" /> on the top right
 of a dataset card to open its context menu and access dataset actions:  
 
-<div class="max-w-50">
+<div class="max-w-75">
 
-![Hyper-Dataset context menu](../../img/webapp_hyperdataset_card_context_menu.png)
+![Hyper-Dataset context menu](../../img/hyperdatasets/webapp_hyperdataset_card_context_menu.png#light-mode-only)
+![Hyper-Dataset context menu](../../img/hyperdatasets/webapp_hyperdataset_card_context_menu_dark.png#dark-mode-only)
 
 </div>
 
@@ -85,6 +89,11 @@ of a dataset card to open its context menu and access dataset actions:
 To create a Hyper-Dataset, click the **+ NEW DATASET** button in the top right of the page, which will open a 
 **New Dataset** modal.
 
-![Hyper-Dataset creation modal](../../img/webapp_hyperdataset_creation.png)
+<div class="max-w-50">
+
+![Hyper-Dataset creation modal](../../img/hyperdatasets/webapp_hyperdataset_creation.png#light-mode-only)
+![Hyper-Dataset creation modal](../../img/hyperdatasets/webapp_hyperdataset_creation_dark.png#dark-mode-only)
+
+</div>
 
 This creates a new Hyper-Dataset that contains a single, empty draft version.

docs/hyperdatasets/webapp/webapp_datasets_frames.md

@@ -7,14 +7,16 @@ of frames and enables viewing SingleFrames and FramesGroups, and editing SingleF
 Before opening the frame viewer, you can filter the frames by applying [simple](webapp_datasets_versioning.md#simple-frame-filtering) or [advanced](webapp_datasets_versioning.md#advanced-frame-filtering) 
 filtering logic. 
 
-![Dataset page](../../img/hyperdatasets/web-app/dataset_versions.png)
+![Dataset page](../../img/hyperdatasets/dataset_versions.png#light-mode-only)
+![Dataset page](../../img/hyperdatasets/dataset_versions_dark.png#dark-mode-only)
 
 ## Frame Viewer
 
 Use the frame viewer to view and edit annotations (ROIs and frame labels), frame details (see [frames](../frames.md)), 
 and frame metadata, as well as view frame masks of your dataset version frames.
 
-![Frame viewer](../../img/hyperdatasets/web-app/dataset_example_frame_editor.png)
+![Frame viewer](../../img/hyperdatasets/dataset_example_frame_editor.png#light-mode-only)
+![Frame viewer](../../img/hyperdatasets/dataset_example_frame_editor_dark.png#dark-mode-only)
 
 ### Frame Viewer Controls
 
@@ -93,13 +95,15 @@ Viewing and editing frames in a FrameGroup is similar to viewing and editing Sin
 Click the FrameGroup in the Hyper-Dataset. In the frame viewer, select SingleFrame to view / modify from 
 a dropdown list in the **Current Source** section.
 
-![Frame dropdown menu in FrameGroup](../../img/hyperdatasets/framegroup_01.png)
+![Frame dropdown menu in FrameGroup](../../img/hyperdatasets/framegroup_01.png#light-mode-only)
+![Frame dropdown menu in FrameGroup](../../img/hyperdatasets/framegroup_01_dark.png#dark-mode-only)
 
 If an annotation applies to all frames in a FrameGroup, it is displayed with a `Multi Source` indicator:
 
 <div class="max-w-50">
 
-![Multi-source ROI](../../img/hyperdatasets/multi_source_annotation.png)
+![Multi-source ROI](../../img/hyperdatasets/multi_source_annotation.png#light-mode-only)
+![Multi-source ROI](../../img/hyperdatasets/multi_source_annotation_dark.png#dark-mode-only)
 
 </div>
 
@@ -171,7 +175,8 @@ Click the color circle in the label name to manually set the label's color.
 
 <div class="max-w-75">
 
-![Set label color](../../img/annotation_label_color.png)
+![Set label color](../../img/hyperdatasets/annotation_label_color.png#light-mode-only)
+![Set label color](../../img/hyperdatasets/annotation_label_color_dark.png#dark-mode-only)
 
 </div>
 
@@ -179,7 +184,8 @@ Click the color circle in the annotation header to manually set the annotation
 
 <div class="max-w-75">
 
-![Set annotation color and opacity](../../img/annotation_label_opacity.png)
+![Set annotation color and opacity](../../img/hyperdatasets/annotation_label_opacity.png#light-mode-only)
+![Set annotation color and opacity](../../img/hyperdatasets/annotation_label_opacity_dark.png#dark-mode-only)
 
 </div>
 :::

docs/hyperdatasets/webapp/webapp_datasets_versioning.md

@@ -5,7 +5,8 @@ title: Dataset Versions
 Use the Dataset versioning WebApp (UI) features for viewing, creating, modifying, and 
 deleting [Dataset versions](../dataset.md#dataset-versioning).
 
-![Dataset versions page](../../img/hyperdatasets/web-app/dataset_versions.png)
+![Dataset versions page](../../img/hyperdatasets/dataset_versions.png#light-mode-only)
+![Dataset versions page](../../img/hyperdatasets/dataset_versions_dark.png#dark-mode-only)
 
 ## Dataset Version History
 The WebApp (UI) presents your dataset version structure in tree view <img src="/docs/latest/icons/ico-tree-view.svg" alt="Tree view" className="icon size-md space-sm" />
@@ -13,11 +14,21 @@ or list view <img src="/docs/latest/icons/ico-list-view.svg" alt="List view" cla
 
 The tree view shows the lineage of the dataset's versions.
 
-![Versions tree view](../../img/hyperdatasets/web-app/dataset_simple_adv_02.png)
+<div class="max-w-50">
+
+![Versions tree view](../../img/hyperdatasets/dataset_simple_adv_02.png#light-mode-only)
+![Versions tree view](../../img/hyperdatasets/dataset_simple_adv_02_dark.png#dark-mode-only)
+
+</div>
 
 The list view lists the dataset's versions chronologically by last update time.
 
-![Versions list view](../../img/hyperdatasets/web-app/dataset_simple_adv_01.png)
+<div class="max-w-50">
+
+![Versions list view](../../img/hyperdatasets/dataset_simple_adv_01.png#light-mode-only)
+![Versions list view](../../img/hyperdatasets/dataset_simple_adv_01_dark.png#dark-mode-only)
+
+</div>
 
 Click <img src="/docs/latest/icons/ico-sort.svg" alt="Sort order" className="icon size-md space-sm" /> to order the 
 dataset versions in ascending or descending order based on their last update time. 
@@ -27,7 +38,12 @@ all versions that match the query.
 
 In tree view, parent versions that do not match the query where a child version does appear in a muted color.
 
-![Dataset version search](../../img/hyperdatasets/hyperdataset_search_2.png)
+<div class="max-w-50">
+
+![Dataset version search](../../img/hyperdatasets/hyperdataset_search_2.png#light-mode-only)
+![Dataset version search](../../img/hyperdatasets/hyperdataset_search_2_dark.png#dark-mode-only)
+
+</div>
 
 ### Version Actions 
 
@@ -43,7 +59,13 @@ Access dataset version actions, by right-clicking a version, or through the menu
 When publishing a version, you can create an additional working copy. The new version is created in a *draft* state, and 
 inherits all the published version's frames. 
 
-![Publish version modal](../../img/hyperdataset_publish_version.png)
+<div class="max-w-75">
+
+![Publish version modal](../../img/hyperdatasets/hyperdataset_publish_version.png#light-mode-only)
+![Publish version modal](../../img/hyperdatasets/hyperdataset_publish_version_dark.png#dark-mode-only)
+
+</div>
+
 :::
 
 ## Version Data
@@ -67,12 +89,14 @@ Use the thumbnail view for a visual preview of the version's frames. You can inc
 and decrease <img src="/docs/latest/icons/ico-zoom-out.svg" alt="Zoom out" className="icon size-md space-sm" /> the size of 
 the previews.
 
-![Frame browser thumbnails](../../img/hyperdatasets/frame_browser_thumbnails.png)
+![Frame browser thumbnails](../../img/hyperdatasets/frame_browser_thumbnails.png#light-mode-only)
+![Frame browser thumbnails](../../img/hyperdatasets/frame_browser_thumbnails_dark.png#dark-mode-only)
 
 Use the table view to list the version's frames in a customizable table. Click <img src="/docs/latest/icons/ico-settings.svg" alt="Setting Gear" className="icon size-md" />
 for column customization options.
 
-![Frame browser list](../../img/hyperdatasets/frame_browser_list.png)
+![Frame browser list](../../img/hyperdatasets/frame_browser_list.png#light-mode-only)
+![Frame browser list](../../img/hyperdatasets/frame_browser_list_dark.png#dark-mode-only)
 
 The dataset version's frames can be filtered by multiple criteria. The resulting frames can be [exported as a JSON file](#exporting-frames). 
 
@@ -88,11 +112,13 @@ Simple frame filtering returns frames containing at least one annotation with a
 * The **FRAMES** tab in the image below contains 101 frames.
 
 
-![Unfiltered version browser](../../img/hyperdatasets/frame_filtering_01.png)
+![Unfiltered version browser](../../img/hyperdatasets/frame_filtering_01.png#light-mode-only)
+![Unfiltered version browser](../../img/hyperdatasets/frame_filtering_01_dark.png#dark-mode-only)
 
 * A simple label filter for `teddy bear` shows three frames, each containing at least one ROI labeled `teddy bear`.
 
-![Filtered version browser](../../img/hyperdatasets/frame_filtering_02.png)
+![Filtered version browser](../../img/hyperdatasets/frame_filtering_02.png#light-mode-only)
+![Filtered version browser](../../img/hyperdatasets/frame_filtering_02_dark.png#dark-mode-only)
 
 </Collapsible>
 
@@ -121,7 +147,8 @@ A frame filter can contain a number of rules. For each frame filter, the rules a
 
 The returned frames are those that match the first rule AND the second rule within the frame filter.
 
-![Multiple rules filter](../../img/hyperdatasets/multiple_rules.png)
+![Multiple rules filter](../../img/hyperdatasets/multiple_rules.png#light-mode-only)
+![Multiple rules filter](../../img/hyperdatasets/multiple_rules_dark.png#dark-mode-only)
 
 Create additional frame filters by clicking <img src="/docs/latest/icons/ico-add.svg" alt="Add new" className="icon size-md space-sm" />. 
 Multiple frame filters are applied with a logical OR operator. 
@@ -130,7 +157,8 @@ For example, the dataset version in the image below has two frame filters. "Fram
 described in the example above. "Frame Filter 2" specifies an ROI rule for the frame to contain an ROI with the label 
 `dog`. So the frames returned are those that match ALL of Frame Filter 1's rules OR ALL of Frame Filter 2's rules.  
 
-![Multiple filters](../../img/hyperdatasets/multiple_filters.png)
+![Multiple filters](../../img/hyperdatasets/multiple_filters.png#light-mode-only)
+![Multiple filters](../../img/hyperdatasets/multiple_filters_dark.png#dark-mode-only)
 
 To clear all filters click <img src="/docs/latest/icons/ico-filter-reset.svg" alt="Clear filters" className="icon size-md" />. 
 
@@ -141,28 +169,33 @@ To clear all filters click <img src="/docs/latest/icons/ico-filter-reset.svg" al
 
 * Create one ROI rule for the `teddy bear` label, which shows the same three frames as the simple frame filter (above).
 
-![Adding an ROI rule](../../img/hyperdatasets/frame_filtering_03.png)
+![Adding an ROI rule](../../img/hyperdatasets/frame_filtering_03.png#light-mode-only)
+![Adding an ROI rule](../../img/hyperdatasets/frame_filtering_03_dark.png#dark-mode-only)
 
 * In the ROI rule, add a second label. Add `partially_occluded`. Only frames containing at least one ROI labeled as both 
   `teddy bear` and `partially_occluded` match the filter.
   
-![Add label to ROI rule](../../img/hyperdatasets/frame_filtering_04.png)
+![Add label to ROI rule](../../img/hyperdatasets/frame_filtering_04.png#light-mode-only)
+![Add label to ROI rule](../../img/hyperdatasets/frame_filtering_04_dark.png#dark-mode-only)
    
 * By opening a frame in the frame viewer, you can see an ROI labeled with both.
 
-![Labeled ROIs in frame viewer](../../img/hyperdatasets/frame_filtering_05.png)
+![Labeled ROIs in frame viewer](../../img/hyperdatasets/frame_filtering_05.png#light-mode-only)
+![Labeled ROIs in frame viewer](../../img/hyperdatasets/frame_filtering_05_dark.png#dark-mode-only)
 
 * To find frames that contain multiple ROIs, each with a different label, use separate ROI rules. Create an ROI rule for
   the `teddy bear` label and, in the same filter, add another ROI rule for the `person` label. This will return all 
   frames that include at least one ROIs with a `person` label AND at least one (other) ROI with a `teddy bear` label. 
 
-![Add multiple ROI Rules](../../img/hyperdatasets/frame_filtering_06.png)
+![Add multiple ROI Rules](../../img/hyperdatasets/frame_filtering_06.png#light-mode-only)
+![Add multiple ROI Rules](../../img/hyperdatasets/frame_filtering_06_dark.png#dark-mode-only)
 
 * You can also exclude certain ROI labels. Create an ROI rule to include `teddy bear` and, in the same filter, an ROI 
   rule to exclude `person`. This will return all frames that include at least one ROI with the label `teddy bear` AND have
   NO ROI with the `person` label
 
-![Add Exclude ROI Rule](../../img/hyperdatasets/frame_filtering_07.png)
+![Add Exclude ROI Rule](../../img/hyperdatasets/frame_filtering_07.png#light-mode-only)
+![Add Exclude ROI Rule](../../img/hyperdatasets/frame_filtering_07_dark.png#dark-mode-only)
 
 </Collapsible>
 
@@ -172,11 +205,13 @@ Filter by metadata using Lucene queries.
 
 * Add a frame rule to filter by the metadata key `dangerous` for the value of `yes`.
   
-![Filter by metadata](../../img/hyperdatasets/frame_filtering_08.png)
+![Filter by metadata](../../img/hyperdatasets/frame_filtering_08.png#light-mode-only)
+![Filter by metadata](../../img/hyperdatasets/frame_filtering_08_dark.png#dark-mode-only)
 
 * Open a frame in the frame viewer to see its metadata.
   
-![Frame metadata in frame viewer](../../img/hyperdatasets/frame_filtering_09.png)
+![Frame metadata in frame viewer](../../img/hyperdatasets/frame_filtering_09.png#light-mode-only)
+![Frame metadata in frame viewer](../../img/hyperdatasets/frame_filtering_09_dark.png#dark-mode-only)
 
 </Collapsible>
 
@@ -186,7 +221,8 @@ Filter by sources using Lucene queries.
 
 * Add a source rule to filter for source URIs with wildcards.
   
-![Filter by source](../../img/hyperdatasets/frame_filtering_10.png)
+![Filter by source](../../img/hyperdatasets/frame_filtering_10.png#light-mode-only)
+![Filter by source](../../img/hyperdatasets/frame_filtering_10_dark.png#dark-mode-only)
 
 Lucene queries can also be used in ROI label filters and frame rules.
 
@@ -204,7 +240,8 @@ Sort the dataset version’s frames by any of the following attributes:
 
 Click <img src="/docs/latest/icons/ico-sort.svg" alt="Sort order" className="icon size-md space-sm" /> to toggle between ascending and descending sort orders.
 
-![Dataset frame sorting](../../img/hyperdatasets/dataset_frame_sorting.png)
+![Dataset frame sorting](../../img/hyperdatasets/dataset_frame_sorting.png#light-mode-only)
+![Dataset frame sorting](../../img/hyperdatasets/dataset_frame_sorting_dark.png#dark-mode-only)
 
 ### Exporting Frames
 
@@ -214,7 +251,12 @@ To export (download) the filtered frames as a JSON file, click <img src="/docs/l
 Click <img src="/docs/latest/icons/ico-bars-menu.svg" alt="Menu" className="icon size-md space-sm" />  to open the
 frame browser configuration settings. 
 
-![Frame browser config menu](../../img/hyperdatasets/frame_browser_menu.png)
+<div class="max-w-75">
+
+![Frame browser config menu](../../img/hyperdatasets/frame_browser_menu.png#light-mode-only)
+![Frame browser config menu](../../img/hyperdatasets/frame_browser_menu_dark.png#dark-mode-only)
+
+</div>
 
 #### Grouping Previews
 
@@ -223,10 +265,11 @@ Use the **Grouping** menu to set how to display frames that share a common prope
 * **Group by URL** - Show a single preview for all FrameGroups with the same context ID. For example, users can set the 
 same `context_id` to multiple FrameGroups that represent frames in a single video.
 * **Sample by Property** - Specify a frame or ROI property whose value to group frames by and set the number of frames 
-to preview for each group. For example, in the image below, frames are grouped by ROI labels. Each group displays six 
+to preview for each group. For example, in the image below, frames are grouped by ROI labels. Each group displays five 
 samples of frames that contain an ROI with the same label.
 
-![Sample by property](../../img/hyperdatasets/dataset_sample_by_roi_property.png)
+![Sample by property](../../img/hyperdatasets/dataset_sample_by_roi_property.png#light-mode-only)
+![Sample by property](../../img/hyperdatasets/dataset_sample_by_roi_property_dark.png#dark-mode-only)
 
 **To sample by property:**
 1. In the **Grouping** menu, click **Sample by Property**
@@ -240,12 +283,18 @@ samples of frames that contain an ROI with the same label.
       to use in grouping by their properties. For example, in a Hyper-Dataset where ROIs have object labels and type labels, 
       view a sample of frames with different types of the same object by grouping frames according to `label.keyword`
       with a match query for the object of interest.
+      <br/>      
+      <div class="max-w-50">
+   
+      ![Sample by Property modal](../../img/hyperdatasets/sample_by_property_modal.png#light-mode-only)
+      ![Sample by Property modal](../../img/hyperdatasets/sample_by_property_modal_dark.png#dark-mode-only)
+      
+      </div>
    
-      ![Sample by Property modal](../../img/hyperdatasets/sample_by_property_modal.png)
-
       The image below shows a sample of 3 frames which have ROIs of each type (`pedestrian`, `rider`, `sitting`) of `person`.
 
-      ![ROI Match Query](../../img/hyperdatasets/roi_match_query.png)
+      ![ROI Match Query](../../img/hyperdatasets/roi_match_query.png#light-mode-only)
+      ![ROI Match Query](../../img/hyperdatasets/roi_match_query_dark.png#dark-mode-only)
       :::note Property N/A group
       If there are frames which have no value for the grouped by property, a sample of them will be provided as a final
       group. If you sample according to an ROI property, this group will NOT include frames that have no ROIS at all.
@@ -273,7 +322,8 @@ Choose the `All sources` option to present all the FrameGroup’s sources in a g
 shows annotations grouped by their respective sources. Additionally, annotation tools  (e.g. create/delete/modify 
 annotations) are not available in this view.    
 
-![All sources preview](../../img/hyperdatasets/preview_all_sources.png)
+![All sources preview](../../img/hyperdatasets/preview_all_sources.png#light-mode-only)
+![All sources preview](../../img/hyperdatasets/preview_all_sources_dark.png#dark-mode-only)
 
 :::note Unavailable Source
 If a FrameGroup doesn't have the selected preview source, the preview displays the "Source not available" message.
@@ -298,7 +348,8 @@ be included in the calculation.
 For example, calculating the distribution for the `label` ROI property, specifying `rois.confidence: 1` for ROI matching 
 will show the label distribution across only ROIs with a confidence level of 1.
 
-![Distribution by ROI property](../../img/hyperdatasets/dataset_version_statistics_roi.png)
+![Distribution by ROI property](../../img/hyperdatasets/dataset_version_statistics_roi.png#light-mode-only)
+![Distribution by ROI property](../../img/hyperdatasets/dataset_version_statistics_roi_dark.png#dark-mode-only)
 
 By default, the ROI label distribution across the entire Hyper-Dataset version is shown.
 The tab displays the following information
@@ -310,7 +361,8 @@ The tab displays the following information
 * The pie chart visualizes this distribution. Hover over a chart segment and its associated property and count will 
 appear in a tooltip and its usage percentage will appear at the center of the chart.
   
-![Version label statistics](../../img/hyperdatasets/dataset_version_statistics.png)
+![Version label statistics](../../img/hyperdatasets/dataset_version_statistics.png#light-mode-only)
+![Version label statistics](../../img/hyperdatasets/dataset_version_statistics_dark.png#dark-mode-only)
 
 ## Metadata 
 The **Metadata** tab presents any additional metadata that has been attached to the dataset version.
@@ -321,7 +373,8 @@ The **Metadata** tab presents any additional metadata that has been attached to
 1. Edit the section contents (JSON format)
 1. Click **OK**
 
-![Version metadata](../../img/hyperdatasets/dataset_version_metadata.png)
+![Version metadata](../../img/hyperdatasets/dataset_version_metadata.png#light-mode-only)
+![Version metadata](../../img/hyperdatasets/dataset_version_metadata_dark.png#dark-mode-only)
 
 ## Info 
 
@@ -339,5 +392,6 @@ The **Info** tab presents a version's general information:
 * Percentage of annotated frames  
 * Version description (editable, hover over element and click <img src="/docs/latest/icons/ico-edit.svg" alt="Edit pencil" className="icon size-md space-sm" />) 
 
-![Version info](../../img/hyperdatasets/dataset_version_info_panel.png)
+![Version info](../../img/hyperdatasets/dataset_version_info_panel.png#light-mode-only)
+![Version info](../../img/hyperdatasets/dataset_version_info_panel_dark.png#dark-mode-only)
 

docs/hyperdatasets/webapp/webapp_dataviews.md

@@ -25,7 +25,8 @@ and choosing one of these options:
 
 The downloaded data consists of the currently displayed table columns.
 
-![Dataview table](../../img/hyperdatasets/webapp_dataviews_table.png)
+![Dataview table](../../img/hyperdatasets/webapp_dataviews_table.png#light-mode-only)
+![Dataview table](../../img/hyperdatasets/webapp_dataviews_table_dark.png#dark-mode-only)
 
 The Dataview table includes the following columns: 
 
@@ -97,11 +98,13 @@ Select multiple Dataviews, then use either the context menu, or the batch action
 operations on the selected Dataviews. The context menu shows the number of Dataviews that can be affected by each action. 
 The same information can be found in the batch action bar, in a tooltip that appears when hovering over an action icon. 
 
-![Dataview table batch operations](../../img/hyperdatasets/webapp_dataviews_context_menu.png)
+![Dataview table batch operations](../../img/hyperdatasets/webapp_dataviews_context_menu.png#light-mode-only)
+![Dataview table batch operations](../../img/hyperdatasets/webapp_dataviews_context_menu_dark.png#dark-mode-only)
 
 ## Creating a Dataview 
 
 Create a Dataview by clicking **+ NEW DATAVIEW**, which opens a 
 **NEW DATAVIEW** window. 
 
-![New Dataview window](../../img/webapp_dataview_new.png)
+![New Dataview window](../../img/hyperdatasets/webapp_dataview_new.png#light-mode-only)
+![New Dataview window](../../img/hyperdatasets/webapp_dataview_new_dark.png#dark-mode-only)

docs/hyperdatasets/webapp/webapp_exp_comparing.md

@@ -29,4 +29,5 @@ on the task that will be the new base.
 * Hover and click <img src="/docs/latest/icons/ico-drag.svg" alt="Pan icon" className="icon size-md space-sm" /> on the new base task and drag it all the way to the left
 
 
-![Dataview comparison](../../img/hyperdatasets/web-app/compare_dataviews.png)
+![Dataview comparison](../../img/hyperdatasets/compare_dataviews.png#light-mode-only)
+![Dataview comparison](../../img/hyperdatasets/compare_dataviews_dark.png#dark-mode-only)

docs/hyperdatasets/webapp/webapp_exp_track_visual.md

@@ -16,7 +16,8 @@ In a task's page, go to the **DATAVIEWS** tab to view all the task's Dataview de
 * [Label enumeration](#label-enumeration)
 * [Iteration controls](#iteration-control)
 
-![Dataview tab](../../img/hyperdatasets/web-app/dataview_tab.png)
+![Dataview tab](../../img/hyperdatasets/dataview_tab.png#light-mode-only)
+![Dataview tab](../../img/hyperdatasets/dataview_tab_dark.png#dark-mode-only)
 
 ### Input