Update images (#997)

docs/webapp/settings/webapp_settings_access_rules.md

@@ -34,7 +34,12 @@ Access privileges can be viewed, defined, and edited in the **Access Rules** tab
    button
 1. Click **SAVE**
 
-![Access rule creation dialog](../../img/settings_access_rules.png)
+<div class="max-w-50">
+
+![Access rule creation dialog](../../img/settings_access_rules.png#light-mode-only)
+![Access rule creation dialog](../../img/settings_access_rules_dark.png#dark-mode-only)
+
+</div> 
 
 Access is inherited according to resource hierarchy. For example, if a user is given access to a project, the user will 
 also have access to the project's contents (tasks, models, etc.). A user who is granted access to a specific task will 

docs/webapp/settings/webapp_settings_admin_vaults.md

@@ -67,4 +67,5 @@ The **Administrator Vaults** table lists all currently defined vaults, and the f
 
 Hover over a vault in the table to **Download**, **Edit**, or **Delete** a vault.  
 
-![Admin vaults](../../img/settings_admin_vaults.png)
+![Admin vaults](../../img/settings_admin_vaults.png#light-mode-only)
+![Admin vaults](../../img/settings_admin_vaults_dark.png#dark-mode-only)

docs/webapp/settings/webapp_settings_id_providers.md

@@ -145,4 +145,5 @@ The **Provider Connections** table lists all currently defined connections, and
 
 Hover over a connection in the table to **Edit** or **Delete** it.  
  
-![Identity provider chart](../../img/settings_identity_chart.png)
+![Identity provider chart](../../img/settings_identity_chart.png#light-mode-only)
+![Identity provider chart](../../img/settings_identity_chart_dark.png#dark-mode-only)

docs/webapp/settings/webapp_settings_profile.md

@@ -60,7 +60,8 @@ ClearML Hosted Service users can be members of multiple workspaces, which are li
 To switch to another workspace, click on the **SWITCH TO WORKSPACE** button next to the name of the workspace you want 
 to switch to. 
  
-![Workspace configuration page](../../img/settings_workspace_configuration.png)
+![Workspace configuration page](../../img/settings_workspace_configuration.png#light-mode-only)
+![Workspace configuration page](../../img/settings_workspace_configuration_dark.png#dark-mode-only)
 
 ### ClearML App Credentials
 
@@ -80,7 +81,12 @@ You can create credentials for any workspace that you are a member of.
 The dialog displays new credentials, formatted as a ready-to-copy configuration file section (including server configuration 
 information).
 
-![ClearML credentials](../../img/settings_configuration_creation.png)
+<div class="max-w-75">
+
+![ClearML credentials](../../img/settings_configuration_creation.png#light-mode-only)
+![ClearML credentials](../../img/settings_configuration_creation_dark.png#dark-mode-only)
+
+</div>
 
 You can edit the labels of credentials in your own workspace, or credentials that you created in other workspaces.
 
@@ -161,4 +167,5 @@ Fill in values using any of ClearML supported configuration formats: HOCON / JSO
 * Click the toggle atop the vault to enable / disable the configurations
 * Once enabled, the configurations will be merged to the configuration file during ClearML and ClearML Agent usage 
 
-![Configuration vault](../../img/settings_configuration_vault.png)
+![Configuration vault](../../img/settings_configuration_vault.png#light-mode-only)
+![Configuration vault](../../img/settings_configuration_vault_dark.png#dark-mode-only)

docs/webapp/settings/webapp_settings_resource_configs.md

@@ -8,7 +8,8 @@ reservations for different user groups to prioritize workload usage across avail
 Under the **Resource Configuration** section, administrators define the available resources and the way in which they 
 will be allocated to different workloads. 
 
-![Resource configuration page](../../img/resource_configuration.png)
+![Resource configuration page](../../img/resource_configuration.png#light-mode-only)
+![Resource configuration page](../../img/resource_configuration_dark.png#dark-mode-only)
 
 The Resource Configuration settings page shows the [currently provisioned](#applying-resource-configuration) configuration: 
 the defined resource pools, resource profiles, and the resource allocation architecture. 
@@ -25,7 +26,12 @@ versa).
 The resource pool cards are displayed on the top of the Resource Configuration settings page. Each card displays the 
 following information: 
 
-![Resource pool card](../../img/resource_configuration_pool_card.png)
+<div class="max-w-50">
+
+![Resource pool card](../../img/resource_configuration_pool_card.png#light-mode-only)
+![Resource pool card](../../img/resource_configuration_pool_card_dark.png#dark-mode-only)
+
+</div>
 
 * Pool name
 * Number of resources currently in use out of the total available resources
@@ -45,7 +51,17 @@ R&D team and DevOps team both have pending jobs - run the R&D team's jobs first
 The resource profile cards are displayed on the bottom of the Resource Configuration settings page. Each card displays 
 the following information: 
 
-![Resource profile card](../../img/resource_configuration_profile_card.png)
+<div class="max-w-50">
+
+![Resource profile card](../../img/resource_configuration_profile_card.png#light-mode-only)
+
+</div>
+
+<div class="max-w-50">
+
+![Resource profile card](../../img/resource_configuration_profile_card_dark.png#dark-mode-only)
+
+</div>
 
 * Profile name
 * <img src="/docs/latest/icons/ico-resource-number.svg" alt="Number of resources" className="icon size-md space-sm" /> - Number
@@ -61,18 +77,21 @@ You have GPUs spread across a local H100 and additional bare metal servers, as w
 by an autoscaler). Assume that currently most of your resources are already assigned to jobs, and only 16 resources are available: 8 in the 
 H100 resource pool and 8 in the Bare Metal pool:
 
-![Example resource pools](../../img/resource_example_pools.png)
+![Example resource pools](../../img/resource_example_pools.png#light-mode-only)
+![Example resource pools](../../img/resource_example_pools_dark.png#dark-mode-only)
 
 Teams' jobs have varying resource requirements of 0.5, 2, 4, and 8 GPUs. Resource profiles are defined to reflect these:
 
-![Example resource profiles](../../img/resource_example_profile.png)
+![Example resource profiles](../../img/resource_example_profile.png#light-mode-only)
+![Example resource profiles](../../img/resource_example_profile_dark.png#dark-mode-only)
 
 The different jobs will be routed to different resource pools by connecting the profiles to the resource pools. Jobs 
 enqueued through the profiles will be run in the pools where there are available resources in order of their priority. 
 For example, the H100 pool will run jobs with the following precedence: 2 GPU jobs first, then 4 GPU ones, then 8 GPU, 
 and lastly 0.5 GPU. 
 
-![Example profile priority](../../img/resource_example_profile_priority.png)
+![Example profile priority](../../img/resource_example_profile_priority.png#light-mode-only)
+![Example profile priority](../../img/resource_example_profile_priority_dark.png#dark-mode-only)
 
 Resource policies are implemented for two teams:
 * Dev team
@@ -81,21 +100,33 @@ Resource policies are implemented for two teams:
 Each team has a resource policy configured with 8 reserved resources and a 16 resource limit. Both teams make use of the
 4xGPU profile (i.e. each job running through this profile requires 4 resources). 
 
-![Example resource policy](../../img/resource_example_policy.png)
+![Example resource policy](../../img/resource_example_policy.png#light-mode-only)
+![Example resource policy](../../img/resource_example_policy_dark.png#dark-mode-only)
 
 The Dev team is prioritized over the Research team by placing it higher in the Resource Profile's Policies Priority list:
 
-![Example resource policy priority](../../img/resource_example_policy_priority.png)
+<div class="max-w-75">
+
+![Example resource policy priority](../../img/resource_example_policy_priority.png#light-mode-only)
+![Example resource policy priority](../../img/resource_example_policy_priority_dark.png#dark-mode-only)
+
+</div>
 
 Both the Dev team and the Research team enqueue four 4-resource jobs each: Dev team jobs will be allocated resources 
 first. The `4xGPU` resource profile is connected to two resource pools: `Bare Metal Low END GPUs` (with the 
 `4 GPU Low End` link) and `H100 Half a Superpod` (with the `4 GPU H100 link`). 
 
-![Example resource profile-pool connections](../../img/resource_example_profile_pool_links.png)
+![Example resource profile-pool connections](../../img/resource_example_profile_pool_links.png#light-mode-only)
+![Example resource profile-pool connections](../../img/resource_example_profile_pool_links_dark.png#dark-mode-only)
 
 Resources are assigned from the `Bare Metal` pool first (precedence set on the resource profile card):
 
-![Example resource pool precedence](../../img/resource_example_pool_priority.png)
+<div class="max-w-50">
+
+![Example resource pool precedence](../../img/resource_example_pool_priority.png#light-mode-only)
+![Example resource pool precedence](../../img/resource_example_pool_priority_dark.png#dark-mode-only)
+
+</div>
 
 If the first pool cannot currently satisfy the profile’s resource requirements, resources are assigned from the next 
 listed pool. Let's look at the first pool in the image below. Notice that the pool has 8 available resources, therefore 
@@ -103,7 +134,8 @@ it can run two 4-resource jobs.
 
 <div class="max-w-50">
 
-![Example resource pool card](../../img/resource_example_pool_card.png)
+![Example resource pool card](../../img/resource_example_pool_card.png#light-mode-only)
+![Example resource pool card](../../img/resource_example_pool_card_dark.png#dark-mode-only)
 
 </div>
 

docs/webapp/settings/webapp_settings_storage_credentials.md

@@ -7,7 +7,8 @@ To enable ClearML to delete task artifacts stored in cloud storage when a task i
 * [AWS S3 Storage](#aws-s3-storage)
 * [Azure](#azure)
 
-![Storage Credentials page](../../img/webapp_settings_storage_credentials.png)
+![Storage Credentials page](../../img/webapp_settings_storage_credentials.png#light-mode-only)
+![Storage Credentials page](../../img/webapp_settings_storage_credentials_dark.png#dark-mode-only)
 
 ## Google Cloud Storage
 Set up credentials for Google Cloud buckets: 

docs/webapp/settings/webapp_settings_usage_billing.md

@@ -7,7 +7,8 @@ The **Billing & Usage** section displays your ClearML workspace usage informatio
 * Available storage
 * Number of monthly API calls  
 
-![Billing and Usage free](../../img/settings_billing_usage_free.png)
+![Billing and Usage free](../../img/settings_billing_usage_free.png#light-mode-only)
+![Billing and Usage free](../../img/settings_billing_usage_free_dark.png#dark-mode-only)
 
 To add users to your workspace, click **INVITE USERS** in the **USERS** section. This will redirect you to the 
 **USER MANAGEMENT** page, where you can invite users (see details [here](webapp_settings_users.md#inviting-new-teammates)).
@@ -20,7 +21,8 @@ for additional plans information.
 With the ClearML Pro plan, the **Billing & Usage** page additionally shows estimated charges for the current billing 
 period and provides access to billing information.
 
-![Billing and Usage pro](../../img/settings_billing_usage.png)
+![Billing and Usage pro](../../img/settings_billing_usage.png#light-mode-only)
+![Billing and Usage pro](../../img/settings_billing_usage_dark.png#dark-mode-only)
 
 **To Upgrade your account to ClearML Pro**, click **UPGRADE** in the top right corner of the page. This will open a 
 wizard where you will be able to read the terms and conditions and input your billing information. 

docs/webapp/settings/webapp_settings_users.md

@@ -19,7 +19,8 @@ Each row of the table includes:
 * If the user's invitation is pending, the date the user was added
 * [User groups](#user-groups) (ClearML Enterprise feature)
 
-![Users table](../../img/settings_user_table.png)
+![Users table](../../img/settings_user_table.png#light-mode-only)
+![Users table](../../img/settings_user_table_dark.png#dark-mode-only)
 
 ### Inviting New Teammates
 
@@ -69,7 +70,8 @@ Each row of the table includes:
 
 Hover over a service account in the table to **Edit** or **Delete** it.
 
-![Service accounts](../../img/settings_service_accounts.png)
+![Service accounts](../../img/settings_service_accounts.png#light-mode-only)
+![Service accounts](../../img/settings_service_accounts_dark.png#dark-mode-only)
 
 ### Creating a Service Account
 
@@ -133,7 +135,8 @@ In addition to the service account-specific configuration vault, [administrator
 be applied to service accounts. See all the vaults applied to the account in the **Applied administrator vaults** below 
 the configuration vault.   
 
-![Service Account Config Vault](../../img/settings_service_account_config_vault.png)
+![Service Account Config Vault](../../img/settings_service_account_config_vault.png#light-mode-only)
+![Service Account Config Vault](../../img/settings_service_account_config_vault_dark.png#dark-mode-only)
 
 ### Deleting Service Account
 Deleting a service account will revoke its credentials, causing agents using the account's credentials to fail. 
@@ -161,7 +164,8 @@ The system includes three pre-configured groups that can't be removed:
 
 The user group table lists all the active user groups. Each row includes a group's name, description, member list, and ID. 
 
-![User Management Page](../../img/settings_user_management_table.png)
+![User Management Page](../../img/settings_user_management_table.png#light-mode-only)
+![User Management Page](../../img/settings_user_management_table_dark.png#dark-mode-only)
 
 ### Creating a User Group
 
@@ -173,7 +177,12 @@ The user group table lists all the active user groups. Each row includes a group
    the <img src="/docs/latest/icons/ico-trash.svg" alt="Trash can" className="icon size-md" /> button
 1. Click **SAVE**
 
-![User group creation dialog](../../img/settings_user_group.png)
+<div class="max-w-50">
+
+![User group creation dialog](../../img/settings_user_group.png#light-mode-only)
+![User group creation dialog](../../img/settings_user_group_dark.png#dark-mode-only)
+
+</div>
 
 ### Editing a User Group