facebook / facebook/docusaurus

Support separate config for mermaid dark mode

Offen
#10,251 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
feature
Vorherrschende Sprache
TypeScript
Sterne
66.2k
Forks
10k
Ø Merge
1 T. 3 Std.
Gemergte PRs (30 T.)
52

Beschreibung

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#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

```ts
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`

```ts
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`.

```ts
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.

```ts
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.

```ts
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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.