Update FAQ, pipeline, and report logo images (#1069)

docs/faq.md

@@ -137,7 +137,8 @@ the following numbers are displayed:
 * API server version
 * API version
 
-![Server version information](img/faq_server_versions.png)
+![Server version information](img/faq_server_versions.png#light-mode-only)
+![Server version information](img/faq_server_versions_dark.png#dark-mode-only)
 
 ClearML Python package information can be obtained by using `pip freeze`.
 
@@ -593,7 +594,8 @@ Due to speed/optimization issues, the console displays only the last several hun
 You can always download the full log as a file using the ClearML Web UI. In the **ClearML Web UI >** task's **CONSOLE** 
 tab, click `Download full log`.
 
-![Download console log](img/faq_download_console_log.png)
+![Download console log](img/faq_download_console_log.png#light-mode-only)
+![Download console log](img/faq_download_console_log_dark.png#dark-mode-only)
 
 <br/>
 
@@ -604,17 +606,19 @@ and accuracy values of several tasks. In the task comparison page, under the **H
 you can visualize tasks' hyperparameter values in relation to performance metrics in a scatter plot or parallel
 coordinates plot:
 * [Scatter plot](webapp/webapp_exp_comparing.md#scatter-plot): View the correlation between a selected hyperparameter and 
-  metric. For example, the image below shows a scatter plot that displays the values of a performance metric (`epoch_accuracy`) 
+  metric. For example, the image below shows a scatter plot that displays the values of a performance metric (`accuracy`) 
   and a hyperparameter (`epochs`) of a few tasks:
   
-  ![Scatter plot comparison](img/faq_compare_scatter.png)
+  ![Scatter plot comparison](img/faq_compare_scatter.png#light-mode-only)
+  ![Scatter plot comparison](img/faq_compare_scatter_dark.png#dark-mode-only)
 
 * [Parallel coordinates plot](webapp/webapp_exp_comparing.md#parallel-coordinates-mode): View the impact of hyperparameters 
   on selected metric(s). For example, the image below shows 
-  a parallel coordinates plot which displays the values of selected hyperparameters (`base_lr`, `batch_size`, and 
+  a parallel coordinates plot which displays the values of selected hyperparameters (`epochs`, `lr`, and `batch_size`) 
-  `number_of_epochs`) and a performance metric (`accuracy`) of three tasks: 
+  and a performance metric (`accuracy`) of a few tasks: 
 
-  ![Parallel Coordinates](img/compare_parallel_coordinates.png)
+  ![Parallel Coordinates](img/compare_parallel_coordinates.png#light-mode-only)
+  ![Parallel Coordinates](img/compare_parallel_coordinates_dark.png#dark-mode-only)
 
 <br/>
 

docs/pipelines/pipelines.md

@@ -103,7 +103,12 @@ You can rerun the pipeline programmatically or via the ClearML Web UI:
 * To launch a new pipeline run in the UI, click **+ NEW RUN** in the [pipeline runs](../webapp/pipelines/webapp_pipeline_table.md) page. This opens a **NEW RUN** modal, where you 
 can set the run's parameters and execution queue.  
 
-  ![Pipeline params UI](../img/pipelines_new_run.png)
+<div class="max-w-75">
+
+  ![Pipeline params UI](../img/pipelines_new_run.png#light-mode-only)
+  ![Pipeline params UI](../img/pipelines_new_run_dark.png#dark-mode-only)
+
+</div>
 
 The new pipeline run will be executed through the execution queue by a ClearML agent. The agent will rebuild 
 the pipeline according to the configuration and DAG that was captured in the original run, and override the original 

docs/pipelines/pipelines_sdk_function_decorators.md

@@ -67,7 +67,12 @@ def main(pickle_url, mock_parameter='mock'):
 When the function is called, a corresponding ClearML Controller Task is created: its arguments are logged as the task's 
 parameters. When launching a new pipeline run from the [UI](../webapp/pipelines/webapp_pipeline_page.md), you can modify their values for the new run.  
 
-![Pipeline new run](../img/pipelines_new_run.png)
+<div class="max-w-75">
+
+![Pipeline new run](../img/pipelines_new_run.png#light-mode-only)
+![Pipeline new run](../img/pipelines_new_run_dark.png#dark-mode-only)
+
+</div>
 
 ## @PipelineDecorator.component
 Using the [`@PipelineDecorator.component`](../references/sdk/automation_controller_pipelinedecorator.md#pipelinedecoratorcomponent) 

docs/pipelines/pipelines_sdk_tasks.md

@@ -42,7 +42,12 @@ These parameters can be programmatically injected into a step's configuration us
 When launching a new pipeline run from the [UI](../webapp/pipelines/webapp_pipeline_table.md), you can modify their 
 values for the new run.  
 
-![Pipeline new run](../img/pipelines_new_run.png)
+<div class="max-w-75">
+
+![Pipeline new run](../img/pipelines_new_run.png#light-mode-only)
+![Pipeline new run](../img/pipelines_new_run_dark.png#dark-mode-only)
+
+</div>
 
 ### Additional Configuration 
 You can connect configuration dictionaries or files to a pipeline controller using 

docs/webapp/webapp_reports.md

@@ -429,7 +429,11 @@ image enclosed in parentheses:
 
 The rendered output should look like this:
 
-![Logo](https://raw.githubusercontent.com/clearml/clearml/master/docs/clearml-logo.svg)
+<img class="light-mode-only" src="https://raw.githubusercontent.com/clearml/clearml/master/docs/clearml-logo.svg" alt="Logo"/>
+
+<img class="dark-mode-only" src="https://raw.githubusercontent.com/clearml/clearml/master/docs/clearml-logo-dark.svg" alt="Logo"/>
+
+<br/>
 
 To add a title to the image, which you can see in a tooltip when hovering over the image, add the title after the image's
 link: 
@@ -439,7 +443,9 @@ link:
 ```
 The rendered output should look like this:
 
-<img src="https://raw.githubusercontent.com/clearml/clearml/master/docs/clearml-logo.svg" alt="Logo with Title" title="ClearML logo"/>
+<img class="light-mode-only" src="https://raw.githubusercontent.com/clearml/clearml/master/docs/clearml-logo.svg" title="ClearML logo"/>
+
+<img class="dark-mode-only" src="https://raw.githubusercontent.com/clearml/clearml/master/docs/clearml-logo-dark.svg" title="ClearML logo"/>
 
 Hover over the image to see its title. 
 

src/css/custom.css

@@ -620,6 +620,15 @@ html[data-theme=dark] .medium-zoom-image.medium-zoom-image--opened {border-radiu
 [data-theme='dark'] img[src$='#light-mode-only'] {
   display: none;
 }
+
+[data-theme='dark'] .light-mode-only {
+  display: none;
+}
+
+[data-theme='light'] .dark-mode-only {
+  display: none;
+}
+
 /* table */
 .markdown table {
   border-spacing: 0;