New option for a different primary color in dark mode (#216)

Author: benbrandt

.changeset/kind-emus-switch.md

@@ -0,0 +1,5 @@
+---
+'docusaurus-theme-redoc': minor
+---
+
+New option for a different primary color in dark mode

packages/docusaurus-theme-redoc/Readme.md

@@ -56,6 +56,11 @@ See [here for full example.](../../website/src/pages/examples/custom-page/index.
    * Highlight color for docs
    */
    primaryColor: '#1890ff',
+   /**
+    * Highlight color for docs in dark mode, if different.
+    * Will default to `primaryColor` if not set.
+    */
+   primaryColorDark: '#25c2a0',
    /**
    * Options to pass to redoc
    * @see https://github.com/redocly/redoc#redoc-options-object
@@ -74,9 +79,14 @@ See [here for full example.](../../website/src/pages/examples/custom-page/index.
 Convenient way to provide the highlighted color used by Redoc.  
 This value will be used as `colors.primary.main` in the `themes` option. Must be an actual color value and not a css variable.
 
+### primaryColorDark (string, hex/rgba value)
+
+Optional way to change the highlighted color used by Redoc in dark mode. Defaults to `primaryColor` if not set.
+This value will be used as `colors.primary.main` in the `themes` option. Must be an actual color value and not a css variable.
+
 ### options (optional, object)
 
-Override redoc options passed to [RedocStandalone](https://redoc.ly/docs/redoc/quickstart/react/) component. See the defaults [here](./src/redocData.ts#L5-L12).  
+Override redoc options passed to [RedocStandalone](https://redoc.ly/docs/redoc/quickstart/react/) component. See the defaults [here](./src/redocData.ts#L5-L12).
 
 Available properties [here](https://github.com/Redocly/redoc#redoc-options-object).  
 You cannot set theme property using this property, use `theme` option below instead.

packages/docusaurus-theme-redoc/src/redocData.ts

@@ -127,24 +127,29 @@ function getThemeOptions(
   }
 }
 
-export function getRedocThemes(customTheme: RedocThemeOverrides): {
+export function getRedocThemes(
+  customTheme: RedocThemeOverrides,
+  customDarkTheme: RedocThemeOverrides = customTheme,
+): {
   darkTheme: RedocThemeOverrides;
   lightTheme: RedocThemeOverrides;
 } {
   return {
     lightTheme: getThemeOptions(customTheme, false),
-    darkTheme: getThemeOptions(customTheme, true),
+    darkTheme: getThemeOptions(customDarkTheme, true),
   };
 }
 
 export function getGlobalData({
   primaryColor,
+  primaryColorDark = primaryColor,
   theme: customTheme,
   options,
 }: ThemeOptions): GlobalData {
   const overrides = getDefaultTheme(primaryColor, customTheme);
+  const overridesDark = getDefaultTheme(primaryColorDark, customTheme);
 
-  const { lightTheme, darkTheme } = getRedocThemes(overrides);
+  const { lightTheme, darkTheme } = getRedocThemes(overrides, overridesDark);
 
   return {
     lightTheme,

packages/docusaurus-theme-redoc/src/types/options.d.ts

@@ -18,6 +18,12 @@ export interface ThemeOptions {
    * ideally this should be all the customization you need
    */
   primaryColor?: string;
+  /**
+   * Primary Color to pass to Redoc Theme in dark mode.
+   * This option is only needed if you want a different primary color in dark
+   * mode, and will default to `primaryColor` if not set.
+   */
+  primaryColorDark?: string;
   /**
    * Options to pass to redoc
    * @see https://github.com/redocly/redoc#redoc-options-object

website/docs/getting-started/theme-options.md

@@ -10,6 +10,11 @@ author_url: https://rohit.page
 Convenient way to provide the highlighted color used by Redoc.  
 This value will be used as `colors.primary.main` in the `themes` option. Must be an actual color value and not a css variable.
 
+### primaryColorDark (string, hex/rgba value)
+
+Optional way to change the highlighted color used by Redoc in dark mode. Defaults to `primaryColor` if not set.
+This value will be used as `colors.primary.main` in the `themes` option. Must be an actual color value and not a css variable.
+
 ### options (optional, object)
 
 Override redoc options passed to [RedocStandalone](https://redoc.ly/docs/redoc/quickstart/react/) component. See the defaults [here](https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-theme-redoc/src/redocData.ts#L5-L12).