mirror of
				https://github.com/Redocly/redoc.git
				synced 2025-10-31 15:57:30 +03:00 
			
		
		
		
	docs: document theme options (#1438)
This commit is contained in:
		
							parent
							
								
									040ce72a8a
								
							
						
					
					
						commit
						a5e8e818c8
					
				
							
								
								
									
										59
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										59
									
								
								README.md
									
									
									
									
									
								
							|  | @ -255,9 +255,66 @@ You can use all of the following options with standalone version on <redoc> tag | |||
| * `sortPropsAlphabetically` - sort properties alphabetically. | ||||
| * `suppressWarnings` - if set, warnings are not rendered at the top of documentation (they still are logged to the console). | ||||
| * `payloadSampleIdx` - if set, payload sample will be inserted at this index or last. Indexes start from 0. | ||||
| * `theme` - ReDoc theme. Not documented yet. For details check source code: [theme.ts](https://github.com/Redocly/redoc/blob/master/src/theme.ts). | ||||
| * `theme` - ReDoc theme. For details check [theme docs](#redoc-theme-object). | ||||
| * `untrustedSpec` - if set, the spec is considered untrusted and all HTML/markdown is sanitized to prevent XSS. **Disabled by default** for performance reasons. **Enable this option if you work with untrusted user data!** | ||||
| 
 | ||||
| ### `<redoc>` theme object | ||||
| * `spacing` | ||||
|   * `unit`: 5 # main spacing unit used in autocomputed theme values later | ||||
|   * `sectionHorizontal`: 40 # Horizontal section padding. COMPUTED: spacing.unit * 8 | ||||
|   * `sectionVertical`: 40 # Horizontal section padding. COMPUTED: spacing.unit * 8 | ||||
| * `breakpoints` # breakpoints for switching three/two and mobile view layouts | ||||
|   * `small`: '50rem' | ||||
|   * `medium`: '85rem' | ||||
|   * `large`: '105rem' | ||||
| * `colors` | ||||
|   * `tonalOffset`: 0.3 # default tonal offset used in computations | ||||
| * `typography` | ||||
|   * `fontSize`: '14px' | ||||
|   * `lineHeight`: '1.5em' | ||||
|   * `fontWeightRegular`: '400' | ||||
|   * `fontWeightBold`: '600' | ||||
|   * `fontWeightLight`: '300' | ||||
|   * `fontFamily`: 'Roboto, sans-serif' | ||||
|   * `smoothing`: 'antialiased' | ||||
|   * `optimizeSpeed`: true | ||||
|   * `headings` | ||||
|     * `fontFamily`: 'Montserrat, sans-serif' | ||||
|     * `fontWeight`: '400' | ||||
|     * `lineHeight`: '1.6em' | ||||
|   * `code` # inline code styling | ||||
|     * `fontSize`: '13px' | ||||
|     * `fontFamily`: 'Courier, monospace' | ||||
|     * `lineHeight`: # COMPUTED: typography.lineHeight | ||||
|     * `fontWeight`: # COMPUTED: typography.fontWeightRegular | ||||
|     * `color`: '#e53935' | ||||
|     * `backgroundColor`: 'rgba(38, 50, 56, 0.05)' | ||||
|     * `wrap`: false # whether to break word for inline blocks (otherwise they can overflow) | ||||
|   * `links` | ||||
|     * `color`: # COMPUTED: colors.primary.main | ||||
|     * `visited`: # COMPUTED: typography.links.color | ||||
|     * `hover`: # COMPUTED: lighten(0.2 typography.links.color) | ||||
| * `menu` | ||||
|   * `width`: '260px' | ||||
|   * `backgroundColor`: '#fafafa' | ||||
|   * `textColor`: '#333333' | ||||
|   * `activeTextColor`: # COMPUTED: theme.menu.textColor (if set by user) or theme.colors.primary.main | ||||
|   * `groupItems` # Group headings | ||||
|     * `textTransform`: 'uppercase' | ||||
|   * `level1Items` # Level 1 items like tags or section 1st level items | ||||
|     * `textTransform`: 'none'  | ||||
|   * `arrow` # menu arrow | ||||
|     * `size`: '1.5em' | ||||
|     * `color`: # COMPUTED: theme.menu.textColor | ||||
| * `logo` | ||||
|   * `maxHeight`: # COMPUTED: menu.width | ||||
|   * `maxWidth`: # COMPUTED: menu.width | ||||
|   * `gutter`: '2px' # logo image padding | ||||
| * `rightPanel` | ||||
|   * `backgroundColor`: '#263238' | ||||
|   * `width`: '40%' | ||||
|   * `textColor`: '#ffffff' | ||||
|    | ||||
| ## Advanced usage of standalone version | ||||
| Instead of adding `spec-url` attribute to the `<redoc>` element you can initialize ReDoc via globally exposed `Redoc` object: | ||||
| ```js | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue
	
	Block a user