diff --git a/.changeset/slimy-ravens-end.md b/.changeset/slimy-ravens-end.md new file mode 100644 index 0000000000..65e02079b1 --- /dev/null +++ b/.changeset/slimy-ravens-end.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-techdocs': minor +'@backstage/theme': minor +--- + +Adds support for custom background colors in code blocks and inline code within TechDocs. diff --git a/packages/theme/report.api.md b/packages/theme/report.api.md index b380ce9fd1..0c9e87e958 100644 --- a/packages/theme/report.api.md +++ b/packages/theme/report.api.md @@ -81,6 +81,9 @@ export type BackstagePaletteAdditions = { closeButtonColor?: string; warning?: string; }; + code: { + background?: string; + }; }; // @public @deprecated 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..c419d5f71b 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: ${