Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Description

Currently in Docusaurus theme toggler is used to switch between light and dark theme. There is an exposed API with react context from contexts/colorMode.tsx. Due to the exposed API being a react context provider and a react hook this limits the usage to the code within the react application. If we look into what is needed to toggle the theme, it is essentially is setting html data attribute here and storing it in local storage here.

I would like to propose to expose this API as a regular function that can be used outside of the react application.

Has this been requested on Canny?

No response

Motivation

Internally at Meta we use docusaurus for internal and external documentation. Some pages can be embedded via an iframe on other internal non docusaurus sites or electron applications. Due to the default docusaurus theme being light, the background color is not set. This way when the iframe host is in a dark theme the iframed docusaurus site has a dark background while the text content is also dark color and it becomes unreadable. I'm currently working around it by providing the parent's theme as an url query param and manually setting html data attribute to appropriate theme in the docusaurus sites.

Since the embedded pages can also be custom docusaurus pages (src/pages/*). They can have a custom layout and swizzling a builtin docusaurus component to inject code that would interact with color context won't work.

API design

No response

Have you tried building it?

No response

Self-service

• I'd be willing to contribute this feature to Docusaurus myself.