Update pipeline images, pytorch lightning, sklearn matplotlib

docs/guides/frameworks/pytorch_lightning/pytorch_lightning_example.md

@@ -16,7 +16,8 @@ The test loss and validation loss plots appear in the task's page in the ClearML
 Resource utilization plots, which are titled **:monitor: machine**, also appear in the **SCALARS** tab. All of these 
 plots are automatically captured by ClearML. 
 
-![PyTorch Lightning scalars](../../../img/examples_pytorch_lightning_scalars.png)
+![PyTorch Lightning scalars](../../../img/examples_pytorch_lightning_scalars.png#light-mode-only)
+![PyTorch Lightning scalars](../../../img/examples_pytorch_lightning_scalars_dark.png#dark-mode-only)
 
 
 ## Hyperparameters
@@ -24,13 +25,15 @@ plots are automatically captured by ClearML.
 ClearML automatically logs command line options defined with argparse and TensorFlow Definitions, which appear in 
 **CONFIGURATIONS > HYPERPARAMETERS > Args** and **TF_DEFINE** respectively. 
 
-![PyTorch Lightning parameters](../../../img/examples_pytorch_lightning_params.png)
+![PyTorch Lightning parameters](../../../img/examples_pytorch_lightning_params.png#light-mode-only)
+![PyTorch Lightning parameters](../../../img/examples_pytorch_lightning_params_dark.png#dark-mode-only)
 
 ## Artifacts
 
 Models created by the task appear in the task's **ARTIFACTS** tab.
 
-![PyTorch Lightning model](../../../img/examples_pytorch_lightning_model.png)
+![PyTorch Lightning model](../../../img/examples_pytorch_lightning_model.png#light-mode-only)
+![PyTorch Lightning model](../../../img/examples_pytorch_lightning_model_dark.png#dark-mode-only)
 
 Clicking on a 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.
@@ -39,5 +42,6 @@ the model's details and access the model.
 
 All other console output appears in **CONSOLE**.
 
-![PyTorch Lightning console](../../../img/examples_pytorch_lightning_console.png)
+![PyTorch Lightning console](../../../img/examples_pytorch_lightning_console.png#light-mode-only)
+![PyTorch Lightning console](../../../img/examples_pytorch_lightning_console_dark.png#dark-mode-only)
 

docs/guides/frameworks/scikit-learn/sklearn_matplotlib_example.md

@@ -15,4 +15,5 @@ The example does the following:
 
 The learning curve plots appear in the **ClearML web UI** under **PLOTS**.
 
-![image](../../../img/examples_sklearn_matplotlib_example_01.png)
+![Learning Curve](../../../img/examples_sklearn_matplotlib_example_01.png#light-mode-only)
+![Learning Curve](../../../img/examples_sklearn_matplotlib_example_01_dark.png#dark-mode-only)

docs/guides/pipeline/pipeline_controller.md

@@ -222,20 +222,23 @@ ClearML pipeline page: https://app.clear.ml/pipelines/462f48dba7b441ffb34bddb783
 The pipeline run's page contains the pipeline's structure, the execution status of every step, as well as the run's 
 configuration parameters and output.
 
-![Pipeline DAG](../../img/examples_pipeline_from_tasks_DAG.png)
+![Pipeline DAG](../../img/examples_pipeline_from_tasks_DAG.png#light-mode-only)
+![Pipeline DAG](../../img/examples_pipeline_from_tasks_DAG_dark.png#dark-mode-only)
 
 To view a run's complete information, click **Full details** on the bottom of the **Run Info** panel, which will open 
 the pipeline's [controller task page](../../webapp/webapp_exp_track_visual.md).
 
 Click a step to see its summary information.
 
-![Pipeline step info](../../img/examples_pipeline_from_tasks_step_info.png)
+![Pipeline step info](../../img/examples_pipeline_from_tasks_step_info.png#light-mode-only)
+![Pipeline step info](../../img/examples_pipeline_from_tasks_step_info_dark.png#dark-mode-only)
 
 ### Console
 
 Click **DETAILS** to view a log of the pipeline controller's console output.
 
-![Pipeline console](../../img/examples_pipeline_from_tasks_console.png)
+![Pipeline console](../../img/examples_pipeline_from_tasks_console.png#light-mode-only)
+![Pipeline console](../../img/examples_pipeline_from_tasks_console_dark.png#dark-mode-only)
 
 Click on a step to view its console output. 
 

docs/guides/pipeline/pipeline_decorator.md

@@ -87,22 +87,26 @@ ClearML pipeline page: https://app.clear.ml/pipelines/462f48dba7b441ffb34bddb783
 The pipeline run's page contains the pipeline's structure, the execution status of every step, as well as the run's 
 configuration parameters and output.
 
-![Pipeline DAG](../../img/examples_pipeline_from_decorator_DAG.png)
+![Pipeline DAG](../../img/examples_pipeline_from_decorator_DAG.png#light-mode-only)
+![Pipeline DAG](../../img/examples_pipeline_from_decorator_DAG_dark.png#dark-mode-only)
 
 To view a run's complete information, click **Full details** on the bottom of the **Run Info** panel, which will open the 
 pipeline's [controller task page](../../webapp/webapp_exp_track_visual.md).
 
 Click a step to see an overview of its details.
 
-![Pipeline step info](../../img/examples_pipeline_from_decorator_step_info.png)
+![Pipeline step info](../../img/examples_pipeline_from_decorator_step_info.png#light-mode-only)
+![Pipeline step info](../../img/examples_pipeline_from_decorator_step_info_dark.png#dark-mode-only)
 
 ## Console and Code
 
 Click **DETAILS** to view a log of the pipeline controller's console output.   
 
-![Pipeline console](../../img/examples_pipeline_from_decorator_console.png)
+![Pipeline console](../../img/examples_pipeline_from_decorator_console.png#light-mode-only)
+![Pipeline console](../../img/examples_pipeline_from_decorator_console_dark.png#dark-mode-only)
 
 Click on a step to view its console output. You can also view the selected step's code by clicking **CODE**
 on top of the console log.
 
-![Pipeline step code](../../img/examples_pipeline_from_decorator_code.png)
+![Pipeline step code](../../img/examples_pipeline_from_decorator_code.png#light-mode-only)
+![Pipeline step code](../../img/examples_pipeline_from_decorator_code_dark.png#dark-mode-only)

docs/guides/pipeline/pipeline_functions.md

@@ -116,22 +116,26 @@ ClearML pipeline page: https://app.clear.ml/pipelines/462f48dba7b441ffb34bddb783
 The pipeline run's page contains the pipeline's structure, the execution status of every step, as well as the run's 
 configuration parameters and output.
 
-![Pipeline DAG](../../img/pipeline_from_functions_DAG.png)
+![Pipeline DAG](../../img/pipeline_from_functions_DAG.png#light-mode-only)
+![Pipeline DAG](../../img/pipeline_from_functions_DAG_dark.png#dark-mode-only)
 
 To view a run's complete information, click **Full details** on the bottom of the **Run Info** panel, which will open the 
 pipeline's [controller task page](../../webapp/webapp_exp_track_visual.md).
 
 Click a step to see an overview of its details.
 
-![Pipeline step info](../../img/pipeline_from_functions_step_info.png)
+![Pipeline step info](../../img/pipeline_from_functions_step_info.png#light-mode-only)
+![Pipeline step info](../../img/pipeline_from_functions_step_info_dark.png#dark-mode-only)
 
-## Console and Code
+### Console and Code
 
 Click **DETAILS** to view a log of the pipeline controller's console output.   
 
-![Pipeline console](../../img/pipeline_from_functions_console.png)
+![Pipeline console](../../img/pipeline_from_functions_console.png#light-mode-only)
+![Pipeline console](../../img/pipeline_from_functions_console_dark.png#dark-mode-only)
 
 Click on a step to view its console output. You can also view the selected step's code by clicking **CODE**
 on top of the console log.
 
-![Pipeline step code](../../img/pipeline_from_functions_code.png)
+![Pipeline step code](../../img/pipeline_from_functions_code.png#light-mode-only)
+![Pipeline step code](../../img/pipeline_from_functions_code_dark.png#dark-mode-only)