diff --git a/src/_help/customization-options/color-logo-meta-images.md b/src/_help/customization-options/color-logo-meta-images.md index 48ac9968..16561804 100644 --- a/src/_help/customization-options/color-logo-meta-images.md +++ b/src/_help/customization-options/color-logo-meta-images.md @@ -9,9 +9,9 @@ title: Color, logo and social media image From the "Customize UI" tab in your documentation settings, you can select a color scheme to apply to it, better reflecting your brand. -A preview in light and dark mode allows you to anticipate the readability of the final rendering. +A preview allows you to anticipate the readability of the final rendering. -![](/images/help/color.png) +![Light mode color settings](/images/help/light-mode-settings.png) ## Logo and favicon @@ -19,10 +19,15 @@ You can upload your own logo and favicon on Bump.sh to customize your documentat From the "Customize UI" tab in the documentation settings, you can add your own logo and favicon. -![](/images/help/logo-favicon.png) +![Favicon upload](/images/help/logo-favicon.png) To provide the best image quality, it is recommended to adhere to the following dimensions for your logo: 140px*36px. Other dimensions will be adjusted by our renderer. +## Dark mode + +By default, we apply filters to make your light mode color and logo blend in dark mode. To ensure brand consistency, you can define a custom logo and color dedicated to dark mode. + +![Dark mode settings](/images/help/dark-mode-settings.png) ## Social media image @@ -36,7 +41,7 @@ By default, Bump.sh will automatically generate a social media image that can be In case you don't have a visual you could use, Bump.sh will automatically generate a meta image that will display your documentation name, logo and API type. First generation of this new social media image may take a bit, but any modification or change will start the generation process. -![](/images/help/meta-image-example.png) +![Meta image example](/images/help/meta-image-example.png) > The social media image will be modified each time you change the name or the logo. {: .info} @@ -47,7 +52,7 @@ From the "Customize UI" tab in the documentation settings, you can add your own It is advisable not to exceed a width of 1200px and to maintain the height between 600px and 700px for better integration on most platforms. -![](/images/help/meta-image.png) +![Meta image upload](/images/help/meta-image.png) ## Hub customization diff --git a/src/_help/hubs/customize-ui.md b/src/_help/hubs/customize-ui.md index 2d700df8..a2106ea9 100644 --- a/src/_help/hubs/customize-ui.md +++ b/src/_help/hubs/customize-ui.md @@ -10,17 +10,23 @@ It is also possible to modify the settings of a documentation within a hub to cu You can customize the visual appearance of your hub and its documentation by adding your logo and favicon directly from this section. By default, Bump.sh automatically generates a social media visual for you (when you share the URL of your hub or documentation on one of them). However, you can still choose your own image by uploading it at this step. -![](/images/help/hubs-customization.png) +![Light mode color settings](/images/help/hubs-customization.png) You can also customize the general color scheme of your hub. -![](/images/help/color-scheme.png) +![Light mode color settings](/images/help/light-mode-settings.png) + +## Dark mode + +By default, we apply filters to make your light mode color and logo blend in dark mode. To ensure brand consistency, you can define a custom logo and color dedicated to dark mode. + +![Dark mode settings](/images/help/dark-mode-settings.png) ## Operations sorting Finally, you can choose to apply a general sorting parameter to all the documentations in your hub with the Group by operations (by path or tag) and Navigation options. -![](/images/help/operations.png) +![Operations sorting settings](/images/help/operations.png) ## Documentation listing diff --git a/src/images/help/dark-mode-settings.png b/src/images/help/dark-mode-settings.png new file mode 100644 index 00000000..e99a8517 Binary files /dev/null and b/src/images/help/dark-mode-settings.png differ diff --git a/src/images/help/light-mode-settings.png b/src/images/help/light-mode-settings.png new file mode 100644 index 00000000..92529634 Binary files /dev/null and b/src/images/help/light-mode-settings.png differ