Support separate config for mermaid dark mode

[sidharthv96]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Description

Currently, there is support to use different themes based on light/dark mode, but the options passed is the same. So if a user wants to set different theme colors for light/dark mode, that is not possible.

Has this been requested on Canny?

No response

Motivation

This feature was requested in Mermaid's discord by users. Upon further investigation, allowing an extra config option like the theme would enable users to pass different options based on the light/dark mode. This would help users who are customising the diagram using themeVariables.

API design

Current type

export type ThemeConfig = {
    mermaid: {
      theme: {
        light: mermaidAPI.Theme;
        dark: mermaidAPI.Theme;
      };
      options: mermaidAPI.Config;
    };
  };

Proposed option 1

This is a non-breaking change, but it differs from the pattern used in theme

export type ThemeConfig = {
    mermaid: {
      theme: {
        light: mermaidAPI.Theme;
        dark: mermaidAPI.Theme;
      };
      options: mermaidAPI.Config;
      optionsDark:  mermaidAPI.Config;
    };
  };

Proposed option 2

By changing the key to config, it aligns with the type mermaidAPI.Config, and also allows us to retain options as a fallback in case config is not provided. This also aligns with the pattern followed in theme.

export type ThemeConfig = {
    mermaid: {
      theme: {
        light: mermaidAPI.Theme;
        dark: mermaidAPI.Theme;
      };
      config: {
         light: mermaidAPI.Config;
         dark: mermaidAPI.Config;
       };
      // Deprecate
      options: mermaidAPI.Config;
    };
  };

or, to ensure only one of config/options is present.

export type ThemeConfig = {
    mermaid: {
      theme: {
        light: mermaidAPI.Theme;
        dark: mermaidAPI.Theme;
      };
      config?: {
        light: mermaidAPI.Config;
        dark: mermaidAPI.Config;
      };
      options?: mermaidAPI.Config;
    } & (
      | {
          config: {light: mermaidAPI.Config; dark: mermaidAPI.Config};
          options?: never;
        }
      | {options: mermaidAPI.Config; config?: never}
    );
  };

Have you tried building it?

Yes, by changing useMermaidConfig to the following, where options is used as a fallback in case config key is not provided.

export function useMermaidConfig(): MermaidConfig {
  const {colorMode} = useColorMode();
  const mermaidThemeConfig = useMermaidThemeConfig();

  const theme = mermaidThemeConfig.theme[colorMode];
  const config = mermaidThemeConfig.config?.[colorMode] ?? mermaidThemeConfig.options;

  return useMemo(
    () => ({startOnLoad: false, ...config, theme}),
    [theme, config],
  );
}

Self-service

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