后台:如何修改文档主题和颜色(MKDocs)

Question

我想在Backstage应用程序中(而不是在每个Docs文件夹中(在全局级别上更改techdocs主题及其颜色。我怎样才能做到这一点？

示例：更改所有代码段的背景颜色。

Answer 1

Backstage允许您自定义整个应用程序。甚至还有一个专门讨论这个主题的部分，我能够对此做出贡献

下面是一个自定义调色板的简单示例：

import { BackstageOverrides } from '@backstage/core-components';
import {
BackstagePaletteOptions,
createTheme,
genPageTheme,
darkTheme,
BackstageTheme,
SimpleThemeOptions,
shapes,
} from '@backstage/theme';
/**
* Create a custom color palette
*/
const customPalleteColors: BackstagePaletteOptions = {
...darkTheme.palette,
primary: {
main: '#d97800',
},
secondary: {
main: '#004ABE',
},
navigation: {
// Sidebar
background: '#000',
indicator: '#F58220',
color: '#fff',
selectedColor: '#fff',
navItem: {
hoverBackground: '#4d4d4d',
},
},
};
/**
* Sets the theme options object
*/
const customThemeOptions: SimpleThemeOptions = {
palette: customPalleteColors,
defaultPageTheme: 'home',
/* Headers pages */
pageTheme: {
home: genPageTheme({colors: ['#FFFFFF', '#FFF'], shape: shapes.wave}),
},
};
/**
* Create a custom theme using the defined options
*/
const myCustomTheme: BackstageTheme = createTheme(customThemeOptions);
/**
* An override forces a style value to be subscripted when we are not using it.
* tokens provided by the theme or for global UI elements that are native to Backstage
*
* @param theme BackstageTheme
* @returns BackstageOverrides
*/
const customThemeOverrides = (theme: BackstageTheme): BackstageOverrides => {
return {
// Overrides for all headers
BackstageHeader: {
header: {
width: 'auto',
background: 'rgba(255,255,255,0.7)',
borderBottom: '1px solid #E7EBF0',
boxShadow: 'none',
},
title: {
color: '#000',
fontSize: 24,
},
subtitle: {
color: `${theme.palette.grey}`,
},
},
};
};
/**
* The final generated theme object
* with custom colors and global overrides
*/
export const customTheme: BackstageTheme = {
...myCustomTheme,
overrides: {
...myCustomTheme.overrides,
...customThemeOverrides(myCustomTheme),
},
};