paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 17 Packages Projects Releases Wiki Activity

Merge pull request #24397 from JonasStjerne/docs-custom-theme-examples

Browse Source 
docs: fix custom theme examples
This commit is contained in:
Ben Lambert
2024-04-22 11:38:10 +02:00
committed by GitHub
parent b34f9ffb85 6bd9c57927
commit 58c5e072d9
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/getting-started/app-custom-theme.md
+11 -10
View File
@@ -19,7 +19,7 @@ import {
palettes,
} from '@backstage/theme';
const myTheme = createUnifiedTheme({
export const myTheme = createUnifiedTheme({
...createBaseThemeOptions({
palette: palettes.light,
}),
@@ -73,7 +73,7 @@ import {
shapes,
} from '@backstage/theme';
const myTheme = createUnifiedTheme({
export const myTheme = createUnifiedTheme({
...createBaseThemeOptions({
palette: {
...palettes.light,
@@ -158,7 +158,7 @@ import {
palettes,
} from '@backstage/theme';
const myTheme = createUnifiedTheme({
export const myTheme = createUnifiedTheme({
...createBaseThemeOptions({
palette: palettes.light,
typography: {
@@ -210,7 +210,7 @@ import {
palettes,
} from '@backstage/theme';
const myTheme = createUnifiedTheme({
export const myTheme = createUnifiedTheme({
...createBaseThemeOptions({
palette: palettes.light,
typography: {
@@ -248,10 +248,11 @@ const myCustomFont = {
local('My-Custom-Font'),
url(${MyCustomFont}) format('woff2'),
`,
},
};
export const myTheme = createUnifiedTheme({
fontFamily: 'My-Custom-Font',
palette: palettes.light,
components: {
MuiCssBaseline: {
styleOverrides: {
@@ -259,7 +260,7 @@ export const myTheme = createUnifiedTheme({
},
},
},
};
});
```
If you want to utilize different or multiple fonts, then you can set the top level `fontFamily` to what you want for your body, and then override `fontFamily` in `typography` to control fonts for various headings.
@@ -277,7 +278,7 @@ const myCustomFont = {
local('My-Custom-Font'),
url(${MyCustomFont}) format('woff2'),
`,
},
};
const myAwesomeFont = {
fontFamily: 'My-Awesome-Font',
@@ -288,7 +289,7 @@ const myAwesomeFont = {
local('My-Awesome-Font'),
url(${myAwesomeFont}) format('woff2'),
`,
},
};
export const myTheme = createUnifiedTheme({
fontFamily: 'My-Custom-Font',
@@ -314,7 +315,7 @@ export const myTheme = createUnifiedTheme({
},
defaultPageTheme: 'home',
}),
};
});
```
## Overriding Backstage and Material UI components styles
@@ -345,7 +346,7 @@ import {
palettes,
} from '@backstage/theme';
const myTheme = createUnifiedTheme({
export const myTheme = createUnifiedTheme({
...createBaseThemeOptions({
palette: palettes.light,
}),