Dark Mode screenshots in User Guide (#1717)

* Add Dark Mode screenshots in introduction - except login page

* Add Dark Mode screenshots for Media Library intro + Redo some Light Mode screenshots

* Add Dark Mode screenshot for ML - Adding assets

* Add Dark Mode screenshot for ML - Manage assets

* Add Dark Mode screenshots for ML - Organizing assets + Redo some Light Mode screenshots

* Add Dark Mode screenshot in Plugins introduction

* Add Dark Mode screenshots in Users and Permissions settings configuration

* Add Dark Mode screenshots for Audit logs in Settings

* Add Dark Mode screenshot for Overview + Custom logo settings interface

* Add Dark Mode screenshots in API token settings

* Add Dark Mode screenshot in i18n settings

* Add Dark Mode screenshot in Media Library settings

* Add Dark Mode screenshots in Transfer Tokens settings

* Add Dark Mode screenshot in SSO settings

* Add Dark Mode screenshot for Review Workflows settings

* Add Dark Mode screenshot for Marketplace

* Add Dark Mode screenshots for Users & Permissions + Fix mistake

* Add Dark Mode screenshots to Content-type Builder section + Update a couple Light Mode screenshots

* Add Dark Mode screenshots for Content Manager introduction

* Add Dark Mode screenshots for Content Manager section

* Add Dark Mode screenshot for login page but without SSO activated

* Decrease screenshot size in Config. fields content-types

* Add a workaround to ensure image zoom plugin works with themed images

---------

Co-authored-by: Pierre Wizla <[email protected]>

Author: meganelacheny

docusaurus/docs/user-docs/content-manager/configuring-view-of-content-type.md

@@ -20,7 +20,13 @@ The configurations only apply to the list view of the collection type from which
 Note also that the explanations below explain how to permanently configure which fields are displayed in the table of the list view of your collection type. It is also possible to configure the displayed fields temporarily (see [Introduction to Content Manager](/user-docs/content-manager)).
 :::
 
-![Settings of a list view in the Content Manager](/img/assets/content-manager/content-manager_settings-list-view.png)
+<ThemedImage
+  alt="Settings of a list view in the Content Manager"
+  sources={{
+    light: '/img/assets/content-manager/content-manager_settings-list-view.png',
+    dark: '/img/assets/content-manager/content-manager_settings-list-view_DARK.png',
+  }}
+/>
 
 ### List view settings
 
@@ -29,9 +35,9 @@ Note also that the explanations below explain how to permanently configure which
 
 | Setting name           | Instructions                                                                                       |
 | ---------------------- | -------------------------------------------------------------------------------------------------- |
-| Enable search          | Click on **ON** or **OFF** to able or disable the search.                                          |
-| Enable filters         | Click on **ON** or **OFF** to able or disable filters.                                             |
-| Enable bulk actions    | Click on **ON** or **OFF** to able or disable the multiple selection boxes in the list view table. |
+| Enable search          | Click on **TRUE** or **FALSE** to able or disable the search.                                          |
+| Enable filters         | Click on **TRUE** or **FALSE** to able or disable filters.                                             |
+| Enable bulk actions    | Click on **TRUE** or **FALSE** to able or disable the multiple selection boxes in the list view table. |
 | Entries per page       | Choose among the drop-down list the number of entries per page.                                    |
 | Default sort attribute | Choose the sorting field that will be used by default.                                             |
 | Default sort order     | Choose the sorting type that will be applied by default.                                           |
@@ -50,7 +56,7 @@ Note also that the explanations below explain how to permanently configure which
 | Setting name              | Instructions                                                              |
 | ------------------------- | ------------------------------------------------------------------------- |
 | Label                     | Write the label to be used for the field in the list view table.          |
-| Enable sort on this field | Click on **ON** or **OFF** to able or disable the sort on the field.      |
+| Enable sort on this field | Click on **TRUE** or **FALSE** to able or disable the sort on the field.  |
 
 4. Click on the **Save** button.
 
@@ -71,7 +77,13 @@ Note also that relational fields have a couple limitations when it comes to sort
 
 In the edit view of a content-type, in the right side of the interface, a **Configure the view** button is displayed. It allows to access the configurations that can be set for the edit view of the content-type, such as the entry title, and the display of the fields of the content-type, including the relational ones.
 
-![Configuring the edit view of the Content Manager](/img/assets/content-manager/edit-view-config2.png)
+<ThemedImage
+  alt="Configuring the edit view of the Content Manager"
+  sources={{
+    light: '/img/assets/content-manager/edit-view-config2.png',
+    dark: '/img/assets/content-manager/edit-view-config2_DARK.png',
+  }}
+/>
 
 ### Edit view settings
 

docusaurus/docs/user-docs/content-manager/introduction-to-content-manager.md

@@ -25,7 +25,13 @@ For each available collection type multiple entries can be created which is why
 
 The list view of a collection type displays all entries created for that collection type.
 
-![List view of a collection type in the Content Manager](/img/assets/content-manager/content-manager_list-view.png)
+<ThemedImage
+  alt="List view of a collection type in the Content Manager"
+  sources={{
+    light: '/img/assets/content-manager/content-manager_list-view.png',
+    dark: '/img/assets/content-manager/content-manager_list-view_DARK.png',
+  }}
+/>
 
 From the list view, it is possible to:
 
@@ -44,7 +50,13 @@ Sorting can be enabled for most fields displayed in the list view table (see [Co
 
 Right above the list view table, on the left side of the interface, a **Filters** button is displayed. It allows to set one or more condition-based filters, which add to one another (i.e. if you set several conditions, only the entries that match all the conditions will be displayed).
 
-![Filters in the Content Manager](/img/assets/content-manager/content-manager_filters.png)
+<ThemedImage
+  alt="Filters in the Content Manager"
+  sources={{
+    light: '/img/assets/content-manager/content-manager_filters.png',
+    dark: '/img/assets/content-manager/content-manager_filters_DARK.png',
+  }}
+/>
 
 To set a new filter:
 
@@ -76,7 +88,13 @@ Above the list view table, on the right, a "... currently selected" drop-down me
 Configuring the displayed field of the table in the way detailed below is only temporary: the configurations will be reset as soon as the page is refreshed or when navigating the admin panel outside the Content Manager. For permanent configurations, go to the list view configuration interface by clicking on the settings button ![Cog icon](/img/assets/icons/cog.svg) (see [Configuring the views of a content-type](../content-manager/configuring-view-of-content-type.md)).
 :::
 
-![Displayed fields in the settings of a list view in the Content Manager](/img/assets/content-manager/content-manager_displayed-fields.png)
+<ThemedImage
+  alt="Displayed fields in the settings of a list view in the Content Manager"
+  sources={{
+    light: '/img/assets/content-manager/content-manager_displayed-fields.png',
+    dark: '/img/assets/content-manager/content-manager_displayed-fields_DARK.png',
+  }}
+/>
 
 To temporarily configure the fields displayed in the table:
 
@@ -96,4 +114,10 @@ Unlike collection types which have multiple entries, single types are not create
 
 Clicking on a single type will directly redirect you to the edit view, where you will be able to write the content of your single type (see [Writing content](writing-content.md)).
 
-![Single type in the Content Manager](/img/assets/content-manager/content-manager_single-type.png)
+<ThemedImage
+  alt="Single type in the Content Manager"
+  sources={{
+    light: '/img/assets/content-manager/content-manager_single-type.png',
+    dark: '/img/assets/content-manager/content-manager_single-type_DARK.png',
+  }}
+/>

docusaurus/docs/user-docs/content-manager/managing-relational-fields.md

@@ -24,7 +24,13 @@ I want to assign a category to each of my restaurants, therefore I have establis
 In the Content Manager, from the edit view of my Restaurant entries, I can manage the Category relational field, and choose which entry of Category is relevant for my restaurant.
 </details>
 
-![Relations box in the edit view](/img/assets/content-manager/edit-view_relational-fields2.png)
+<ThemedImage
+  alt="Relational fields in the edit view"
+  sources={{
+    light: '/img/assets/content-manager/edit-view_relational-fields2.png',
+    dark: '/img/assets/content-manager/edit-view_relational-fields2_DARK.png',
+  }}
+/>
 
 The relational fields of a content-type are displayed among regular fields. For each relational field is displayed a drop-down list containing all available entry titles. It allows to choose which entry the relational fields should point to. You can either choose one or several entries depending on the type of relation that was established.
 
@@ -44,7 +50,14 @@ If the [Internationalization plugin](/user-docs/plugins/strapi-plugins#-internat
 
 Many-to-one, one-to-one, and one-way types of relation only allow to choose one entry per relational field.
 
-<img src="/img/assets/content-manager/RF_one-choice2.png" alt="One-choice relational fields" width="30%" />
+<ThemedImage
+  alt="One-choice relational fields"
+  width="40%"
+  sources={{
+    light: '/img/assets/content-manager/RF_one-choice2.png',
+    dark: '/img/assets/content-manager/RF_one-choice2_DARK.png',
+  }}
+/>
 
 To select the only relevant relational field's entry:
 
@@ -61,7 +74,14 @@ To remove the entry selected in the drop-down list, click on the delete button !
 
 Many-to-many, one-to-many, and many-ways types of relation allow to choose several entries per relational field.
 
-<img src="/img/assets/content-manager/RF_multiple-choices2.png" alt="Multiple choices relational fields" width="30%" />
+<ThemedImage
+  alt="Multiple choices relational fields"
+  width="40%"
+  sources={{
+    light: '/img/assets/content-manager/RF_multiple-choices2.png',
+    dark: '/img/assets/content-manager/RF_multiple-choices2_DARK.png',
+  }}
+/>
 
 To select the relevant relational field's entries:
 

docusaurus/docs/user-docs/content-manager/reviewing-content.md

@@ -9,7 +9,13 @@ Using the [review workflows](/user-docs/settings/review-workflows) feature, you
 
 When viewing your content in the Content Manager, you can see the current stage of any item in the **Review Stage** column:
 
-![Review Stage column](/img/assets/content-manager/review-stage-column.png)
+<ThemedImage
+  alt="Review Stage column"
+  sources={{
+    light: '/img/assets/content-manager/review-stage-column.png',
+    dark: '/img/assets/content-manager/review-stage-column_DARK.png',
+  }}
+/>
 
 ## Change review stage
 
@@ -21,6 +27,12 @@ To change the review stage of your content:
 2. In the Information box, click on the *Review stage* drop-down list.
 3. Choose the new review stage of your entry. It is automatically saved.
 
-![Review Stage dropdown](/img/assets/content-manager/review-stage-dropdown.png)
+<ThemedImage
+  alt="Review Stage dropdown"
+  sources={{
+    light: '/img/assets/content-manager/review-stage-dropdown.png',
+    dark: '/img/assets/content-manager/review-stage-dropdown_DARK.png',
+  }}
+/>
 
 <FeedbackPlaceholder />

docusaurus/docs/user-docs/content-manager/saving-and-publishing-content.md

@@ -16,7 +16,13 @@ The possibility to manage drafts for contents comes from the Draft & Publish fea
 
 Your contents can have 2 statuses: draft or published. You can see the current status indicated on the right of the interface, above the Information box.
 
-![Editing draft version](/img/assets/content-manager/editing_draft_version2.png)
+<ThemedImage
+  alt="Editing draft version"
+  sources={{
+    light: '/img/assets/content-manager/editing_draft_version2.png',
+    dark: '/img/assets/content-manager/editing_draft_version2_DARK.png',
+  }}
+/>
 
 By default, each newly created content is a draft. Drafts can be modified and saved at will, using the **Save** button on the top right corner of the edit view, until they are ready to be published.
 
@@ -30,7 +36,13 @@ Before publishing a draft, make sure it doesn't have relations with other non-pu
 
 When a content is not a draft anymore, but has been published, it is indicated on the right of the interface, above the Information box.
 
-![Editing published version](/img/assets/content-manager/editing_published_version2.png)
+<ThemedImage
+  alt="Editing published version"
+  sources={{
+    light: '/img/assets/content-manager/editing_published_version2.png',
+    dark: '/img/assets/content-manager/editing_published_version2_DARK.png',
+  }}
+/>
 
 :::tip
 To schedule publication, i.e. convert a draft to a published entry at a given date and time, you can follow [this technical guide](https://forum.strapi.io/t/schedule-publications/23184) which requires adding custom code to the Strapi application.

docusaurus/docs/user-docs/content-manager/translating-content.md

@@ -10,7 +10,13 @@ sidebar_position: 5
 
 With the [Internationalization plugin](/user-docs/plugins/strapi-plugins#-internationalization-plugin) installed, it is possible to manage content in more than one language, called "locale". To manage content in a specific locale, the latter must be added beforehand through the Internationalization settings (see [Configuring Internationalization locales](../settings/internationalization)).
 
-![Edit view of a localizable content-type](/img/assets/content-manager/content-manager_translate2.png)
+<ThemedImage
+  alt="Edit view of a localizable content-type"
+  sources={{
+    light: '/img/assets/content-manager/content-manager_translate2.png',
+    dark: '/img/assets/content-manager/content-manager_translate2_DARK.png',
+  }}
+/>
 
 In the Content Manager, when the Internationalization plugin is installed, some options are added to the edit view:
 

docusaurus/docs/user-docs/content-manager/writing-content.md

@@ -10,7 +10,13 @@ displayed_sidebar: userDocsSidebar
 
 In Strapi, writing content consists in filling up fields, which are meant to contain specific content (e.g. text, numbers, media, etc.). These fields were configured for the collection or single type beforehand, through the [Content-type Builder](/user-docs/content-type-builder).
 
-![Edit view to write content](/img/assets/content-manager/edit-view2.png)
+<ThemedImage
+  alt="Edit view to write content"
+  sources={{
+    light: '/img/assets/content-manager/edit-view2.png',
+    dark: '/img/assets/content-manager/edit-view2_DARK.png',
+  }}
+/>
 
 ## Filling up fields
 
@@ -45,8 +51,22 @@ There are 2 types of components: non-repeatable and repeatable components.
 
 #### Non-repeatable components
 
-<img src="/img/assets/content-manager/edit-view_component3.png" alt="Writing content for a component" width="80%" />
-<img src="/img/assets/content-manager/edit-view_component2.png" alt="Writing content for a component" width="80%" />
+<ThemedImage
+  alt="Non-repeatable component - No entry yet"
+  width="80%"
+  sources={{
+    light: '/img/assets/content-manager/edit-view_component3.png',
+    dark: '/img/assets/content-manager/edit-view_component3_DARK.png',
+  }}
+/>
+<ThemedImage
+  alt="Non-repeatable component - With entries"
+  width="80%"
+  sources={{
+    light: '/img/assets/content-manager/edit-view_component2.png',
+    dark: '/img/assets/content-manager/edit-view_component2_DARK.png',
+  }}
+/>
 
 Non-repeatable components are a combination of fields that can be used only once.
 
@@ -59,7 +79,14 @@ To delete the non-repeatable component, click on the delete button ![Delete icon
 
 #### Repeatable components
 
-<img src="/img/assets/content-manager/edit-view_component4.png" alt="Writing content for a component" width="80%" />
+<ThemedImage
+  alt="Repeatable component"
+  width="80%"
+  sources={{
+    light: '/img/assets/content-manager/edit-view_component4.png',
+    dark: '/img/assets/content-manager/edit-view_component4_DARK.png',
+  }}
+/>
 
 Repeatable components are also a combination of fields, but they allow the creation of multiple component entries, all following the same combination of fields.
 

docusaurus/docs/user-docs/content-type-builder/configuring-fields-content-type.md

@@ -16,7 +16,14 @@ In the Content-type Builder, fields can be added at the creation of a new conten
 Depending on what content-type or component is being created or edited, not all fields -including components and dynamic zones- are always available.
 :::
 
-<img src="/img/assets/content-type-builder/fields-selection.png" alt="Field selection" width="80%" />
+<ThemedImage
+  alt="Fields selection"
+  width="80%"
+  sources={{
+    light: '/img/assets/content-type-builder/fields-selection.png',
+    dark: '/img/assets/content-type-builder/fields-selection_DARK.png',
+  }}
+/>
 
 ## Regular fields
 

docusaurus/docs/user-docs/content-type-builder/creating-new-content-type.md

@@ -12,7 +12,13 @@ The Content-type Builder allows to create new content-types: single and collecti
 
 ## Creating a new content-type
 
-![Content-type creation](/img/assets/content-type-builder/content-type-creation.png)
+<ThemedImage
+  alt="Content-type creation"
+  sources={{
+    light: '/img/assets/content-type-builder/content-type-creation.png',
+    dark: '/img/assets/content-type-builder/content-type-creation_DARK.png',
+  }}
+/>
 
 Content types are created from the Content-type Builder's Collection types and Single types categories, both displayed in the Content-type Builder sub navigation.
 

docusaurus/docs/user-docs/content-type-builder/introduction-to-content-types-builder.md

@@ -9,7 +9,13 @@ The Content-type Builder is a core plugin of Strapi. It is a feature that is alw
 
 Administrators can access the Content-type Builder from ![CTB icon](/img/assets/icons/content_types_builder.svg) _Content-type Builder_ in the main navigation of the admin panel.
 
-![Content-type Builder interface](/img/assets/content-type-builder/content-types-builder.png)
+<ThemedImage
+  alt="Content-type Builder interface"
+  sources={{
+    light: '/img/assets/content-type-builder/content-types-builder.png',
+    dark: '/img/assets/content-type-builder/content-types-builder_DARK.png',
+  }}
+/>
 
 From the Content-type Builder, administrators can create and manage content-types: collection types and single types but also components.