Is it possible to override theme in redocOptions?

[joshtemple]

No description provided.

[rohit-gohri]

Not in redocOptions because then there would be no point of this plugin, it's supposed to provide compatibility with docusaurus theme and dark mode. But you can make your own ApiDoc component and specify that to be used by the plugin:
https://github.com/rohit-gohri/redocusaurus/tree/main/packages/docusaurus-plugin-redoc#apidoccomponent-default-themeapidoc

If you want then I can export the getThemeOptions helper directly so you can make your own theme with Dark mode support?

[joshtemple]

That's okay, I had some suggestions for making the theming more consistent with Docusaurus but I'm realizing it's probably better for me to submit those as pull requests here rather than customizing my own.

[rohit-gohri]

That would be great

[bash83]

@joshtemple any luck with the PR? I saw you had a PR moving the font weight around but not about overriding the theme.

@rohit-gohri You seem to be stripping the "theme" property from the redocOptions in "/docusaurus-theme-redoc/src/index.ts". Is there a way to make it optional for the user to either specify the "primaryColor" or provide a baseTheme object?

I just spent hours trying to set things up on my machine to create a PR but failed miserably to setup my environment (quite a noob when it comes to TS, node, and docusaurus).

(trying to implement something similar to https://davidgoss.co/blog/api-documentation-redoc-docusaurus/)

[rohit-gohri]

You can already override primaryColor, just pass it in the theme options. See example here:

redocusaurus/example/docusaurus.config.js

Lines 27 to 30 in 4f36105

	theme: {
	primaryColor: '#1890ff',
	redocOptions: { hideDownloadButton: false },
	},

[rohit-gohri]

Let me know if this solves your problem @bash83, if not then I'll try to add a baseTheme option

[bash83]

@rohit-gohri I’m actually trying to override the font but figured why not allow user to override any value (I know this might complicate things with dark/light theme but it’s on user to sort it out)

[rohit-gohri]

If you want to override all the values you can just swizzle the component and customize everything, it's just a React component:

npm run swizzle -- docusaurus-theme-redoc Redoc --danger

Let me know if you face any problems with that.

You can also just directly specify your own component with the apiDocComponent option.

[rohit-gohri]

Swizzle now works without --danger flag:

JSX Component:

yarn docusaurus swizzle docusaurus-theme-redoc Redoc

TSX Component:

yarn docusaurus swizzle docusaurus-theme-redoc Redoc --typescript

I have abstracted away the theme merging logic out of the component, so customizing them should be more straightforward now:

redocusaurus/packages/docusaurus-theme-redoc/src/theme/Redoc/Redoc.tsx

Lines 10 to 15 in 5245a57

	const {
	lightTheme,
	darkTheme,
	redocOptions = null,
	} = usePluginData<GlobalData>('docusaurus-theme-redoc');
	const theme = isDarkTheme ? darkTheme : lightTheme;

You get two theme configs from plugin data: lightTheme and darkTheme, you can just merge this over your custom baseTheme before passing it to Redoc