Update XGBoost images

docs/guides/frameworks/xgboost/xgboost_metrics.md

@@ -13,7 +13,8 @@ the `examples` project.
 ClearML automatically captures scalars logged with XGBoost, which can be visualized in plots in the 
 ClearML WebApp, in the task's **SCALARS** tab.
 
-![Scalars](../../../img/examples_xgboost_metric_scalars.png)
+![Scalars](../../../img/examples_xgboost_metric_scalars.png#light-mode-only)
+![Scalars](../../../img/examples_xgboost_metric_scalars_dark.png#dark-mode-only)
 
 ## Models
 
@@ -21,14 +22,17 @@ ClearML automatically captures the model logged using the `xgboost.save` method,
 
 View saved snapshots in the task's **ARTIFACTS** tab.
 
-![Artifacts tab](../../../img/examples_xgboost_metric_artifacts.png) 
+![Artifacts tab](../../../img/examples_xgboost_metric_artifacts.png#light-mode-only)
+![Artifacts tab](../../../img/examples_xgboost_metric_artifacts_dark.png#dark-mode-only) 
 
 To view the model details, click the model name in the **ARTIFACTS** page, which will open the model's info tab. Alternatively, download the model.
 
-![Model info panel](../../../img/examples_xgboost_metric_model.png)
+![Model info panel](../../../img/examples_xgboost_metric_model.png#light-mode-only)
+![Model info panel](../../../img/examples_xgboost_metric_model_dark.png#dark-mode-only)
 
 ## Console
 
 All console output during the script's execution appears in the task's **CONSOLE** page.
 
-![Console output](../../../img/examples_xgboost_metric_console.png)
+![Console output](../../../img/examples_xgboost_metric_console.png#light-mode-only)
+![Console output](../../../img/examples_xgboost_metric_console_dark.png#dark-mode-only)

docs/guides/frameworks/xgboost/xgboost_sample.md

@@ -18,25 +18,30 @@ classification dataset using XGBoost
 The feature importance plot and tree plot appear in the task's page in the **ClearML web UI**, under 
 **PLOTS**.
 
-![Feature importance plot](../../../img/examples_xgboost_sample_06.png)
+![Feature importance plot](../../../img/examples_xgboost_sample_06.png#light-mode-only)
+![Feature importance plot](../../../img/examples_xgboost_sample_06_dark.png#dark-mode-only)
 
-![Tree plot](../../../img/examples_xgboost_sample_06a.png)
+![Tree plot](../../../img/examples_xgboost_sample_06a.png#light-mode-only)
+![Tree plot](../../../img/examples_xgboost_sample_06a_dark.png#dark-mode-only)
 
 
 ## Console
 
 All other console output appear in **CONSOLE**.
 
-![image](../../../img/examples_xgboost_sample_05.png)
+![Console log](../../../img/examples_xgboost_sample_05.png#light-mode-only)
+![Console log](../../../img/examples_xgboost_sample_05_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 XGBoost. 
 
-![image](../../../img/examples_xgboost_sample_10.png)
+![Artifacts](../../../img/examples_xgboost_sample_10.png#light-mode-only)
+![Artifacts](../../../img/examples_xgboost_sample_10_dark.png#dark-mode-only)
 
 Clicking on the model's 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_xgboost_sample_03.png)
+![Model details](../../../img/examples_xgboost_sample_03.png#light-mode-only)
+![Model details](../../../img/examples_xgboost_sample_03_dark.png#dark-mode-only)