Update example images

docs/guides/frameworks/pytorch/pytorch_abseil.md

@@ -42,29 +42,34 @@ Logger.current_logger().report_scalar(
 These scalars can be visualized in plots, which appear in the [ClearML web UI](../../../webapp/webapp_overview.md), in 
 the task's **SCALARS** tab. 
 
-![image](../../../img/examples_pytorch_mnist_07.png)
+![Scalars](../../../img/examples_pytorch_mnist_07.png#light-mode-only)
+![Scalars](../../../img/examples_pytorch_mnist_07_dark.png#dark-mode-only)
 
 ## Hyperparameters
 
 ClearML automatically logs command line options defined with abseil flags. They appear in **CONFIGURATION** **>** 
 **HYPERPARAMETERS** **>** **TF_DEFINE**.
 
-![image](../../../img/examples_pytorch_abseil_params.png)
+![Hyperparameters](../../../img/examples_pytorch_abseil_params.png#light-mode-only)
+![Hyperparameters](../../../img/examples_pytorch_abseil_params_dark.png#dark-mode-only)
 
 ## Console
 
 Text printed to the console for training progress, as well as all other console output, appear in **CONSOLE**.
 
-![image](../../../img/examples_pytorch_mnist_06.png)
+![Console](../../../img/examples_pytorch_mnist_06.png#light-mode-only)
+![Console](../../../img/examples_pytorch_mnist_06_dark.png#dark-mode-only)
 
 ## Artifacts
 
 Models created by the task appear in the task's **ARTIFACTS** tab. ClearML automatically logs and tracks 
 models and any snapshots created using PyTorch.  
 
-![image](../../../img/examples_pytorch_abseil_models.png)
+![Artifacts](../../../img/examples_pytorch_abseil_models.png#light-mode-only)
+![Artifacts](../../../img/examples_pytorch_abseil_models_dark.png#dark-mode-only)
 
 Clicking on the model name takes you to the [model's page](../../../webapp/webapp_model_viewing.md), where you can view 
 the model's details and access the model.
 
-![image](../../../img/examples_pytorch_abseil_models_2.png)
+![Model](../../../img/examples_pytorch_abseil_models_2.png#light-mode-only)
+![Model](../../../img/examples_pytorch_abseil_models_2_dark.png#dark-mode-only)

docs/guides/reporting/3d_plots_reporting.md

@@ -1,5 +1,5 @@
 ---
-title: 3D Plots Reporting
+title: 3D Plot Reporting
 ---
 
 The [3d_plots_reporting.py](https://github.com/clearml/clearml/blob/master/examples/reporting/3d_plots_reporting.py) 
@@ -28,7 +28,8 @@ Logger.current_logger().report_surface(
 ```
 View the reported surface plot in **PLOTS**.
 
-![Surface plot](../../img/examples_reporting_02.png)
+![Surface plot](../../img/examples_reporting_02.png#light-mode-only)
+![Surface plot](../../img/examples_reporting_02_dark.png#dark-mode-only)
 
 ## 3D Scatter Plot
 
@@ -49,4 +50,5 @@ Logger.current_logger().report_scatter3d(
 ```
 
 View the reported 3D scatter plot in **PLOTS**.
-![3d scatter plot](../../img/examples_reporting_01.png)
+![3d scatter plot](../../img/examples_reporting_01.png#light-mode-only)
+![3d scatter plot](../../img/examples_reporting_01_dark.png#dark-mode-only)

docs/guides/reporting/artifacts.md

@@ -25,8 +25,9 @@ is different). Configure ClearML in any of the following ways:
 When the script runs, it creates a task named `artifacts example` in the `examples` project. 
 
 ClearML reports artifacts in the **ClearML Web UI** **>** task details **>** **ARTIFACTS** tab.
-
-![Task artifacts](../../img/examples_reporting_03.png)
+examples_reporting_03
+![Task artifacts](../../img/examples_reporting_03.png#light-mode-only)
+![Task artifacts](../../img/examples_reporting_03_dark.png#dark-mode-only)
 
 ## Dynamically Tracked Artifacts
 

docs/guides/reporting/clearml_logging_example.md

@@ -27,7 +27,8 @@ for i in range(10):
     logger.report_scalar(title="graph B", series="series B", iteration=i, value=10./(i+1))
 ```
 
-![Separate scalar plots](../../img/colab_explicit_reporting_01.png)
+![Separate scalar plots](../../img/colab_explicit_reporting_01.png#light-mode-only)
+![Separate scalar plots](../../img/colab_explicit_reporting_01_dark.png#dark-mode-only)
 
 ```python
 # report two scalar series on the same graph
@@ -36,7 +37,8 @@ for i in range(10):
     logger.report_scalar(title="unified graph", series="series B", iteration=i, value=10./(i+1))
 ```    
 
-![Unified scalar plots](../../img/colab_explicit_reporting_02.png)
+![Unified scalar plots](../../img/colab_explicit_reporting_02.png#light-mode-only)
+![Unified scalar plots](../../img/colab_explicit_reporting_02_dark.png#dark-mode-only)
 
 ## Plots
 
@@ -63,7 +65,8 @@ logger.report_scatter2d(
 )
 ```
 
-![2d scatter plot](../../img/colab_explicit_reporting_04.png)
+![2d scatter plot](../../img/colab_explicit_reporting_04.png#light-mode-only)
+![2d scatter plot](../../img/colab_explicit_reporting_04_dark.png#dark-mode-only)
 
 ### 3D Plots
 
@@ -83,7 +86,8 @@ logger.report_scatter3d(
 )
 ```
 
-![3d scatter plot](../../img/colab_explicit_reporting_05.png)
+![3d scatter plot](../../img/colab_explicit_reporting_05.png#light-mode-only)
+![3d scatter plot](../../img/colab_explicit_reporting_05_dark.png#dark-mode-only)
 
 To plot a series as a surface plot, use [`Logger.report_surface()`](../../references/sdk/logger.md#report_surface).
 
@@ -101,7 +105,8 @@ logger.report_surface(
 )
 ```
 
-![3d surface plot](../../img/colab_explicit_reporting_06.png)
+![3d surface plot](../../img/colab_explicit_reporting_06.png#light-mode-only)
+![3d surface plot](../../img/colab_explicit_reporting_06_dark.png#dark-mode-only)
 
 ### Confusion Matrices
 
@@ -120,7 +125,8 @@ logger.report_confusion_matrix(
 )
 ```   
 
-![Confusion matrix](../../img/colab_explicit_reporting_03.png)
+![Confusion matrix](../../img/colab_explicit_reporting_03.png#light-mode-only)
+![Confusion matrix](../../img/colab_explicit_reporting_03_dark.png#dark-mode-only)
 
 ### Histograms
 
@@ -140,7 +146,8 @@ logger.report_histogram(
 )
 ```
     
-![Histogram](../../img/colab_explicit_reporting_12.png)
+![Histogram](../../img/colab_explicit_reporting_12.png#light-mode-only)
+![Histogram](../../img/colab_explicit_reporting_12_dark.png#dark-mode-only)
     
 ```python
 # report a two histograms on the same plot
@@ -164,7 +171,8 @@ logger.report_histogram(
 )
 ```
 
-![Two histograms in one plot](../../img/colab_explicit_reporting_07.png)
+![Two histograms in one plot](../../img/colab_explicit_reporting_07.png#light-mode-only)
+![Two histograms in one plot](../../img/colab_explicit_reporting_07_dark.png#dark-mode-only)
 
 ## Media
 
@@ -188,7 +196,8 @@ image_local_copy = StorageManager.get_local_copy(
 logger.report_media(title='audio', series='pink panther', iteration=1, local_path=audio_local_copy)
 ``` 
 
-![Audio sample](../../img/colab_explicit_reporting_08.png)
+![Audio sample](../../img/colab_explicit_reporting_08.png#light-mode-only)
+![Audio sample](../../img/colab_explicit_reporting_08_dark.png#dark-mode-only)
 
 ### HTML
 
@@ -201,7 +210,8 @@ logger.report_media(
 )
 ```
 
-![HTML sample](../../img/colab_explicit_reporting_09.png)
+![HTML sample](../../img/colab_explicit_reporting_09.png#light-mode-only)
+![HTML sample](../../img/colab_explicit_reporting_09_dark.png#dark-mode-only)
 
 ### Images
 
@@ -214,7 +224,8 @@ logger.report_image(
 )
 ```
 
-![Image sample](../../img/colab_explicit_reporting_10.png)
+![Image sample](../../img/colab_explicit_reporting_10.png#light-mode-only)
+![Image sample](../../img/colab_explicit_reporting_10_dark.png#dark-mode-only)
 
 ### Video
 
@@ -227,7 +238,8 @@ logger.report_media(
 )
 ```
 
-![Video sample](../../img/colab_explicit_reporting_11.png)
+![Video sample](../../img/colab_explicit_reporting_11.png#light-mode-only)
+![Video sample](../../img/colab_explicit_reporting_11_dark.png#dark-mode-only)
 
 ## Text
 
@@ -237,4 +249,5 @@ Report text messages by calling [`Logger.report_text()`](../../references/sdk/lo
 logger.report_text("hello, this is plain text")
 ```    
 
-![Text report to console](../../img/colab_explicit_reporting_13.png)
+![Text report to console](../../img/colab_explicit_reporting_13.png#light-mode-only)
+![Text report to console](../../img/colab_explicit_reporting_13_dark.png#dark-mode-only)

docs/guides/reporting/html_reporting.md

@@ -9,7 +9,8 @@ ClearML reports these HTML debug samples in the **ClearML Web UI** **>** task's
 
 When the script runs, it creates a task named `html samples reporting` in the `examples` project.
 
-![image](../../img/examples_reporting_05.png)
+![Debug Samples](../../img/examples_reporting_05.png#light-mode-only)
+![Debug Samples](../../img/examples_reporting_05_dark.png#dark-mode-only)
 
 ## Reporting HTML URLs
 

docs/guides/reporting/hyper_parameters.md

@@ -30,7 +30,8 @@ args = parser.parse_args()
 
 Command line options appears in **HYPERPARAMETERS** **>** **Args**.
 
-![image](../../img/examples_reporting_hyper_param_01.png)
+![Command line options](../../img/examples_reporting_hyper_param_01.png#light-mode-only)
+![Command line options](../../img/examples_reporting_hyper_param_01_dark.png#dark-mode-only)
 
 ## TensorFlow Definitions
 
@@ -50,7 +51,8 @@ flags.DEFINE_string('echo5', '5', 'Text to echo.', module_name='test')
 
 TensorFlow Definitions appear in **HYPERPARAMETERS** **>** **TF_DEFINE**.
 
-![image](../../img/examples_reporting_hyper_param_03.png)
+![TF Defines](../../img/examples_reporting_hyper_param_03.png#light-mode-only)
+![TF Defines](../../img/examples_reporting_hyper_param_03_dark.png#dark-mode-only)
 
 ## Parameter Dictionaries
 
@@ -78,5 +80,6 @@ parameters['float'] = '9.9'
 
 Parameters from dictionaries connected to Tasks appear in **HYPERPARAMETERS** **>** **General**.
 
-![image](../../img/examples_reporting_hyper_param_02.png)
+![Parameter dictionaries](../../img/examples_reporting_hyper_param_02.png#light-mode-only)
+![Parameter dictionaries](../../img/examples_reporting_hyper_param_02_dark.png#dark-mode-only)
 

docs/guides/reporting/image_reporting.md

@@ -50,8 +50,10 @@ Logger.current_logger().report_image(
 ClearML reports these images as debug samples in the **ClearML Web UI**, under the task's
 **DEBUG SAMPLES** tab. 
 
-![Debug samples](../../img/examples_reporting_07.png)
+![Debug samples](../../img/examples_reporting_07.png#light-mode-only)
+![Debug samples](../../img/examples_reporting_07_dark.png#dark-mode-only)
 
 Click a thumbnail to open the image viewer.
 
-![Image viewer](../../img/examples_reporting_07a.png)
+![Image viewer](../../img/examples_reporting_07a.png#light-mode-only)
+![Image viewer](../../img/examples_reporting_07a_dark.png#dark-mode-only)

docs/guides/reporting/media_reporting.md

@@ -40,7 +40,8 @@ Logger.current_logger().report_media(
 
 The reported audio can be viewed in the **DEBUG SAMPLES** tab. Click a thumbnail to open the audio player.
 
-![Audio debug samples](../../img/examples_reporting_08.png)
+![Audio debug samples](../../img/examples_reporting_08.png#light-mode-only)
+![Audio debug samples](../../img/examples_reporting_08_dark.png#dark-mode-only)
 
 
 ## Reporting (Uploading) Media from a Local File
@@ -59,4 +60,5 @@ Logger.current_logger().report_media(
     
 The reported video can be viewed in the **DEBUG SAMPLES** tab. Click a thumbnail to open the video player.
 
-![Video debug samples](../../img/examples_reporting_09.png)
+![Video debug samples](../../img/examples_reporting_09.png#light-mode-only)
+![Video debug samples](../../img/examples_reporting_09_dark.png#dark-mode-only)

docs/guides/reporting/model_config.md

@@ -44,14 +44,16 @@ output_model.update_weights(register_uri=model_url)
 ## WebApp
 The model appears in the task's **ARTIFACTS** tab.
 
-![Task artifacts](../../img/examples_model_logging_artifacts.png)
+![Task artifacts](../../img/examples_model_logging_artifacts.png#light-mode-only)
+![Task artifacts](../../img/examples_model_logging_artifacts_dark.png#dark-mode-only)
 
 Clicking on the model name takes you to the [model's page](../../webapp/webapp_model_viewing.md), where you can view the 
 model's details and access the model.
 
 The model's **LABELS** tab displays its label enumeration.
 
-![Model Labels tab](../../img/examples_model_logging_labels.png)
+![Model Labels tab](../../img/examples_model_logging_labels.png#light-mode-only)
+![Model Labels tab](../../img/examples_model_logging_labels_dark.png#dark-mode-only)
 
 ## Additional Example
 

docs/guides/reporting/pandas_reporting.md

@@ -33,7 +33,8 @@ Logger.current_logger().report_table(
 )
 ```
 
-![image](../../img/examples_reporting_12.png)
+![DataFrame table](../../img/examples_reporting_12.png#light-mode-only)
+![DataFrame table](../../img/examples_reporting_12_dark.png#dark-mode-only)
 
 ## Reporting CSV Files as Tables
 
@@ -50,4 +51,5 @@ Logger.current_logger().report_table(
 )
 ```
 
-![image](../../img/examples_reporting_11.png)
+![CSV table](../../img/examples_reporting_11.png#light-mode-only)
+![CSV table](../../img/examples_reporting_11_dark.png#dark-mode-only)

docs/guides/reporting/plotly_reporting.md

@@ -35,4 +35,5 @@ When the script runs, it creates a task named `plotly reporting` in the examples
 ClearML reports Plotly figures, and displays them in the **ClearML Web UI** **>** task's **PLOTS** 
 tab.
 
-![Web UI task plots](../../img/examples_reporting_13.png)
+![Web UI task plots](../../img/examples_reporting_13.png#light-mode-only)
+![Web UI task plots](../../img/examples_reporting_13_dark.png#dark-mode-only)

docs/guides/reporting/scatter_hist_confusion_mat_reporting.md

@@ -53,9 +53,11 @@ Logger.current_logger().report_histogram(
 )
 ```
 
-![image](../../img/examples_reporting_15.png)
+![Single histogram](../../img/examples_reporting_15.png#light-mode-only)
+![Single histogram](../../img/examples_reporting_15_dark.png#dark-mode-only)
 
-![image](../../img/examples_reporting_15a.png)
+![Double histogram](../../img/examples_reporting_15a.png#light-mode-only)
+![Double histogram](../../img/examples_reporting_15a_dark.png#dark-mode-only)
 
 ## Confusion Matrices
 
@@ -74,7 +76,8 @@ Logger.current_logger().report_confusion_matrix(
 )
 ```
 
-![image](../../img/examples_reporting_16.png)
+![Confusion matrix](../../img/examples_reporting_16.png#light-mode-only)
+![Confusion matrix](../../img/examples_reporting_16_dark.png#dark-mode-only)
 
 ```python
 # report confusion matrix with 0,0 is at the top left
@@ -89,6 +92,9 @@ Logger.current_logger().report_confusion_matrix(
 )
 ```
 
+![Confusion matrix](../../img/examples_reporting_16a.png#light-mode-only)
+![Confusion matrix](../../img/examples_reporting_16a_dark.png#dark-mode-only)
+
 ## 2D Scatter Plots
 
 Report 2D scatter plots by calling [`Logger.report_scatter2d()`](../../references/sdk/logger.md#report_scatter2d). 
@@ -132,4 +138,5 @@ Logger.current_logger().report_scatter2d(
 )
 ```    
 
-![image](../../img/examples_reporting_17.png)
+![Scatter plot](../../img/examples_reporting_17.png#light-mode-only)
+![Scatter plot](../../img/examples_reporting_17_dark.png#dark-mode-only)

docs/guides/reporting/using_artifacts.md

@@ -23,7 +23,8 @@ initialized in the same script.
 
 Artifact details (location and size) can be viewed in ClearML's **web UI > task details > ARTIFACTS tab > OTHER section**. 
 
-![Artifacts in WebApp](../../img/examples_using_artifacts_1.png)
+![Artifacts in WebApp](../../img/examples_using_artifacts_1.png#light-mode-only)
+![Artifacts in WebApp](../../img/examples_using_artifacts_1_dark.png#dark-mode-only)
 
 ## Task 2: Accessing an Artifact