Developer portal theme
The fonts, colors, spacing, and styles are controlled within the theme.ts
file.
The file defines a JSON configuration variable named theme
.
The default values are defined as such. Notice the use of arrow functions to calculate certain values, like the section horizontal and vertical spacing.
import { lighten, readableColor, desaturate, darken, transparentize } from 'polished';
import { theme as userTheme } from 'Content/theme';
export const defaultTheme = {
spacing: {
unit: 5,
sectionHorizontal: ({ spacing }) => spacing.unit * 8,
sectionVertical: ({ spacing }) => spacing.unit * 8,
},
breakpoints: {
xs: 0,
small: '550px',
medium: '900px',
large: '1200px',
},
colors: {
tonalOffset: 0.2,
primary: {
main: '#4b1fb8',
light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main),
dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main),
contrastText: ({ colors }) => readableColor(colors.primary.main),
},
success: {
main: '#00aa13',
light: ({ colors }) => lighten(colors.tonalOffset, colors.success.main),
dark: ({ colors }) => darken(colors.tonalOffset, colors.success.main),
contrastText: ({ colors }) => readableColor(colors.success.main),
},
error: {
main: '#e53935',
light: ({ colors }) => lighten(colors.tonalOffset, colors.error.main),
dark: ({ colors }) => darken(colors.tonalOffset, colors.error.main),
contrastText: ({ colors }) => readableColor(colors.error.main),
},
warning: {
main: '#d4ad03',
light: ({ colors }) => lighten(colors.tonalOffset, colors.warning.main),
dark: ({ colors }) => darken(colors.tonalOffset, colors.warning.main),
contrastText: '#ffffff',
},
text: {
primary: '#424242',
secondary: '#4e566d',
},
brand: {
success: '#e6eef8',
warning: '#fcf9e9',
danger: '#fce9ed',
attention: '#ebfbe9',
},
responses: {
success: {
color: ({ colors }) => colors.success.main,
backgroundColor: ({ colors }) => transparentize(0.9, colors.success.main),
},
error: {
color: ({ colors }) => colors.error.main,
backgroundColor: ({ colors }) => transparentize(0.9, colors.error.main),
},
redirect: {
color: '#ffa500',
backgroundColor: ({ colors }) => transparentize(0.9, colors.responses.redirect.color),
},
info: {
color: '#87ceeb',
backgroundColor: ({ colors }) => transparentize(0.9, colors.responses.info.color),
},
},
http: {
get: '#6bbd5b',
post: '#248fb2',
put: '#9b708b',
options: '#d3ca12',
patch: '#e09d43',
delete: '#e27a7a',
basic: '#999',
link: '#31bbb6',
head: '#c167e4',
},
navbar: {
main: ({ colors }) => colors.primary.main,
contrastText: ({ colors }) =>
((userTheme as any).colors &&
(userTheme as any).colors.navbar &&
(userTheme as any).colors.navbar.main &&
readableColor(colors.navbar.main)) ||
colors.primary.contrastText,
},
footer: {
main: ({ colors }) => colors.primary.main,
contrastText: ({ colors }) =>
((userTheme as any).colors &&
(userTheme as any).colors.footer &&
(userTheme as any).colors.footer.main &&
readableColor(colors.footer.main)) ||
colors.primary.contrastText,
},
},
menu: {
backgroundColor: '#fafafa',
width: '260px',
},
tocPanel: {
width: '240px',
},
typography: {
fontSize: '14px',
lineHeight: '1.5em',
fontWeightRegular: '400',
fontWeightBold: '600',
fontWeightLight: '300',
fontFamily: 'Roboto, sans-serif',
headings: {
fontFamily: 'Roboto, sans-serif',
fontWeight: '600',
},
heading1: {
fontSize: '1.85714em',
fontWeight: '600',
fontFamily: ({ typography }) => typography.headings.fontFamily,
lineHeight: ({ typography }) => typography.lineHeight,
color: ({ colors }) => colors.primary.main,
capitalize: true,
},
heading2: {
fontSize: '1.57143em',
fontWeight: '600',
color: ({ colors }) => colors.text.primary,
fontFamily: ({ typography }) => typography.headings.fontFamily,
lineHeight: ({ typography }) => typography.lineHeight,
capitalize: false,
},
heading3: {
fontSize: '1.27em',
fontWeight: '600',
color: ({ colors }) => colors.text.primary,
fontFamily: ({ typography }) => typography.headings.fontFamily,
lineHeight: ({ typography }) => typography.lineHeight,
capitalize: false,
},
rightPanelHeading: {},
code: {
fontSize: '14px',
fontFamily: 'Courier, monospace',
fontWeight: ({ typography }) => typography.fontWeightRegular,
color: '#e53935',
backgroundColor: 'rgba(38, 50, 56, 0.04)',
wrap: false,
},
links: {
color: ({ colors }) => colors.primary.main,
visited: ({ typography }) => typography.links.color,
hover: ({ typography }) => lighten(0.2, typography.links.color),
},
},
rightPanel: {
backgroundColor: '#263238',
width: '40%',
textColor: '#ffffff',
},
codeSample: {
backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor),
},
schema: {
nestedBackground: '#fafafa',
linesColor: theme =>
lighten(
theme.colors.tonalOffset,
desaturate(theme.colors.tonalOffset, theme.colors.primary.main),
),
defaultDetailsWidth: '75%',
typeNameColor: theme => theme.colors.text.secondary,
typeTitleColor: theme => theme.schema.typeNameColor,
requireLabelColor: theme => theme.colors.error.main,
labelsTextSize: '0.9em',
nestingSpacing: '1em',
arrow: {
size: '1.1em',
color: theme => theme.colors.text.secondary,
},
},
codeBlock: {
backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor),
tokens: {},
},
};
You may override any of the values in your theme.ts
definition.