facebook / facebook/docusaurus

Support separate config for mermaid dark mode

Aperta
#10,251 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub
feature
Lingua principale
TypeScript
Stelle
66.2k
Fork
10k
Merge medio
1g 3h
PR unite (30g)
52

Descrizione

### 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.

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.