diff --git a/docs/faq.md b/docs/faq.md
index 3b5f642c..097a25ea 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -137,7 +137,8 @@ the following numbers are displayed:
* API server version
* API version
-
+
+
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`.
-
+
+
<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:
- 
+ 
+ 
* [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
- `number_of_epochs`) and a performance metric (`accuracy`) of three tasks:
+ a parallel coordinates plot which displays the values of selected hyperparameters (`epochs`, `lr`, and `batch_size`)
+ and a performance metric (`accuracy`) of a few tasks:
- 
+ 
+ 
<br/>
diff --git a/docs/img/apps_hpo.png b/docs/img/apps_hpo.png
deleted file mode 100644
index 01529f0d..00000000
Binary files a/docs/img/apps_hpo.png and /dev/null differ
diff --git a/docs/img/compare_parallel_coordinates.png b/docs/img/compare_parallel_coordinates.png
index 4b3b1283..81a265c9 100644
Binary files a/docs/img/compare_parallel_coordinates.png and b/docs/img/compare_parallel_coordinates.png differ
diff --git a/docs/img/compare_parallel_coordinates_dark.png b/docs/img/compare_parallel_coordinates_dark.png
new file mode 100644
index 00000000..dcc24c6d
Binary files /dev/null and b/docs/img/compare_parallel_coordinates_dark.png differ
diff --git a/docs/img/faq_compare_scatter.png b/docs/img/faq_compare_scatter.png
index c79fbc3a..8bb298fb 100644
Binary files a/docs/img/faq_compare_scatter.png and b/docs/img/faq_compare_scatter.png differ
diff --git a/docs/img/faq_compare_scatter_dark.png b/docs/img/faq_compare_scatter_dark.png
new file mode 100644
index 00000000..82e0e4fa
Binary files /dev/null and b/docs/img/faq_compare_scatter_dark.png differ
diff --git a/docs/img/faq_download_console_log.png b/docs/img/faq_download_console_log.png
index f642934c..ccc6dd86 100644
Binary files a/docs/img/faq_download_console_log.png and b/docs/img/faq_download_console_log.png differ
diff --git a/docs/img/faq_download_console_log_dark.png b/docs/img/faq_download_console_log_dark.png
new file mode 100644
index 00000000..f274a8ee
Binary files /dev/null and b/docs/img/faq_download_console_log_dark.png differ
diff --git a/docs/img/faq_server_versions.png b/docs/img/faq_server_versions.png
index 07f1ed02..0c097e2c 100644
Binary files a/docs/img/faq_server_versions.png and b/docs/img/faq_server_versions.png differ
diff --git a/docs/img/faq_server_versions_dark.png b/docs/img/faq_server_versions_dark.png
new file mode 100644
index 00000000..89b6ed6d
Binary files /dev/null and b/docs/img/faq_server_versions_dark.png differ
diff --git a/docs/img/fundamentals_logger_reported_images.png b/docs/img/fundamentals_logger_reported_images.png
deleted file mode 100644
index 8c09a381..00000000
Binary files a/docs/img/fundamentals_logger_reported_images.png and /dev/null differ
diff --git a/docs/img/fundamentals_logger_results.png b/docs/img/fundamentals_logger_results.png
deleted file mode 100644
index 0707bb29..00000000
Binary files a/docs/img/fundamentals_logger_results.png and /dev/null differ
diff --git a/docs/img/fundamentals_models.png b/docs/img/fundamentals_models.png
deleted file mode 100644
index b57c5008..00000000
Binary files a/docs/img/fundamentals_models.png and /dev/null differ
diff --git a/docs/img/pipelines_DAG.png b/docs/img/pipelines_DAG.png
deleted file mode 100644
index de3faf60..00000000
Binary files a/docs/img/pipelines_DAG.png and /dev/null differ
diff --git a/docs/img/pipelines_new_run.png b/docs/img/pipelines_new_run.png
index 67b40acf..4bcda63f 100644
Binary files a/docs/img/pipelines_new_run.png and b/docs/img/pipelines_new_run.png differ
diff --git a/docs/img/pipelines_new_run_dark.png b/docs/img/pipelines_new_run_dark.png
new file mode 100644
index 00000000..d517eef9
Binary files /dev/null and b/docs/img/pipelines_new_run_dark.png differ
diff --git a/docs/pipelines/pipelines.md b/docs/pipelines/pipelines.md
index 2c0e742d..0860087c 100644
--- a/docs/pipelines/pipelines.md
+++ b/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.
- 
+<div class="max-w-75">
+
+ 
+ 
+
+</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
diff --git a/docs/pipelines/pipelines_sdk_function_decorators.md b/docs/pipelines/pipelines_sdk_function_decorators.md
index 97f43e75..5345d116 100644
--- a/docs/pipelines/pipelines_sdk_function_decorators.md
+++ b/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.
-
+<div class="max-w-75">
+
+
+
+
+</div>
## @PipelineDecorator.component
Using the [`@PipelineDecorator.component`](../references/sdk/automation_controller_pipelinedecorator.md#pipelinedecoratorcomponent)
diff --git a/docs/pipelines/pipelines_sdk_tasks.md b/docs/pipelines/pipelines_sdk_tasks.md
index 36eefe5e..f1d03fd8 100644
--- a/docs/pipelines/pipelines_sdk_tasks.md
+++ b/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.
-
+<div class="max-w-75">
+
+
+
+
+</div>
### Additional Configuration
You can connect configuration dictionaries or files to a pipeline controller using
diff --git a/docs/webapp/webapp_reports.md b/docs/webapp/webapp_reports.md
index e84057c6..7e79eb6c 100644
--- a/docs/webapp/webapp_reports.md
+++ b/docs/webapp/webapp_reports.md
@@ -429,7 +429,11 @@ image enclosed in parentheses:
The rendered output should look like this:
-
+<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.
diff --git a/src/css/custom.css b/src/css/custom.css
index 160fad9e..665be87c 100644
--- a/src/css/custom.css
+++ b/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;