docs: add docs for how to create and use custom themes

2020-05-15 17:58:15 +02:00
parent a3be133979
commit af934d4173
1 changed files with 47 additions and 0 deletions
@@ -0,0 +1,47 @@
+# Custom App Themes
+
+Backstage ships with a default theme with a light and dark mode variant. The themes are provided as
+a part of the [@backstage/theme](https://www.npmjs.com/package/@backstage/theme) package, which also includes
+utilities for customizing the default theme, or creating completely new themes.
+
+## Creating a Custom Theme
+
+The easiest way to create a new theme is to use the `createTheme` function exported by the [@backstage/theme](https://www.npmjs.com/package/@backstage/theme) package. You can use it to override so basic parameters of the default theme such as the color palette and font.
+
+For example, you can create a new theme based on the default light theme like this:
+
+```ts
+import { createTheme, lightTheme } from '@backstage/theme';
+
+const myTheme = createTheme({
+  palette: lightTheme.palette,
+  fontFamily: 'Comic Sans MS',
+});
+```
+
+If you want more control over the theme, and for example customize font sizes and margins, you can use the lower-level `createThemeOverrides` function exported by [@backstage/theme](https://www.npmjs.com/package/@backstage/theme) in combination with [createMuiTheme](https://material-ui.com/customization/theming/#createmuitheme-options-args-theme) from [@material-ui/core](https://www.npmjs.com/package/@material-ui/core). See the [@backstage/theme source](https://github.com/spotify/backstage/tree/master/packages/theme/src) and the implementation of the `createTheme` function for how this is done.
+
+You can also create a theme from scratch that matches the `BackstageTheme` type exported by [@backstage/theme](https://www.npmjs.com/package/@backstage/theme). See the [material-ui docs on theming](https://material-ui.com/customization/theming/) for more information about how that can be done.
+
+## Using your Custom Theme
+
+To add a custom theme to your Backstage app, you pass it as configuration to `createApp`.
+
+For example, adding the theme that we created in the previous section can be done like this:
+
+```ts
+import { createApp } from '@backstage/core';
+
+const app = createApp({
+  apis: ...,
+  plugins: ...,
+  themes: [{
+    id: 'my-theme',
+    title: 'My Custom Theme',
+    variant: 'light',
+    theme: myTheme,
+  }]
+})
+```
+
+Note that your list of custom themes overrides the default themes. If you still want to use the default themes, they are exported as `lightTheme` and `darkTheme` from [@backstage/theme](https://www.npmjs.com/package/@backstage/theme).