diff --git a/packages/theme/src/base/palettes.ts b/packages/theme/src/base/palettes.ts index 5e70afd7b8..db33106094 100644 --- a/packages/theme/src/base/palettes.ts +++ b/packages/theme/src/base/palettes.ts @@ -89,6 +89,7 @@ export const palettes = { tabbar: { indicator: '#9BF0E1', }, + code: {}, }, dark: { type: 'dark' as const, @@ -163,5 +164,6 @@ export const palettes = { tabbar: { indicator: '#9BF0E1', }, + code: {}, }, }; diff --git a/packages/theme/src/base/types.ts b/packages/theme/src/base/types.ts index d62d944741..72a7632dd9 100644 --- a/packages/theme/src/base/types.ts +++ b/packages/theme/src/base/types.ts @@ -82,6 +82,9 @@ export type BackstagePaletteAdditions = { closeButtonColor?: string; warning?: string; }; + code: { + background?: string; + }; }; /** diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts b/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts index e7e47c6fc7..e87e61f9b3 100644 --- a/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts +++ b/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts @@ -108,7 +108,9 @@ export default ({ theme }: RuleOptions) => ` :host > * { /* CODE */ --md-code-fg-color: ${theme.palette.text.primary}; - --md-code-bg-color: ${theme.palette.background.paper}; + --md-code-bg-color: ${ + theme.palette.code.background || theme.palette.background.paper + }; --md-code-hl-color: ${alpha(theme.palette.warning.main, 0.5)}; --md-code-hl-color--light: var(--md-code-hl-color); --md-code-hl-keyword-color: ${