Last updated 9 months ago

Advanced theming

NOTE: ReDoc doesn’t load any fonts by default so you have take care of it yourself
NOTE: Theme is not yet documented, see the default theme for details

In addition to ReDoc's core theme, there are the following config options available:

overrides: {
  DownloadButton: {
    custom: string; // custom css string
  }
  NextSectionButton: {
    custom: string; // custom css string
  }
}
menu: {
  breakPath: boolean // break path into multiple lines if it does not fit in the left nav
}
typography: {
  heading1: {
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    lineHeight?: string;
    color?: string;
    transform?: string;
  }
  heading2: {
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    lineHeight?: string;
    color?: string;
    transform?: string;
  };
  heading3: {
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    lineHeight?: string;
    color?: string;
    transform?: string;
  };
  rightPanelHeading: {
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    lineHeight?: string;
    color?: string;
    transform?: string;
  };
  fieldName: {
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    lineHeight?: string;
    color?: string;
    transform?: string;
  };
  tokens: {
    // colors of tokens from prism (code highlighting, check token names in chrome inspectors)
    boolean: {
      color?: string;
    };
    number: {
      color?: string;
    }
    string: {
      color?: string;
    }
    operator: {
      color?: string;
    }
    // ...  any token or even combination
    "property.string": {
      color?: string;
    }
  };
}

Example theme

theme: {
  overrides: {
    DownloadButton: {
      custom: `
        background-color: green;
        color: white;
	 &:hover {
          color: red;
        }
        // ...
      `,
    }
  },
  typography: {
    heading1: {
      transform: 'uppercase',
    },
    rightPanelHeading: {
      transform: 'uppercase'
    },
    fieldName: {
      fontWeight: 'bold'
    }
  }
}