{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"style-your-site","__idx":0},"children":["Style your site"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Redocly provides multiple approaches to customize your documentation's appearance and functionality."," ","Choose the approach that best fits your technical requirements and team capabilities."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"easy-customization-configuration-based","__idx":1},"children":["Easy customization (configuration-based)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customize your project's appearance using configuration options in your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redocly.yaml"]}," file."," ","No CSS knowledge required."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"logo-and-branding","__idx":2},"children":["Logo and branding"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Logo configuration"]}," - Set logos for different color modes using the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/logo"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["logo"]}]}," configuration"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Favicon"]}," - Configure your site's favicon and browser tab appearance"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"colors-and-themes","__idx":3},"children":["Colors and themes"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Color modes"]}," - Enable light/dark mode switching using ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/color-mode"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["colorMode"]}]}," configuration"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Basic color customization"]}," - Set brand colors using CSS variables"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"typography","__idx":4},"children":["Typography"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Font selection"]}," - Choose from built-in font families using configuration options"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Font loading"]}," - Configure web fonts and font display settings"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["When to use:"]}," Perfect for basic branding needs, quick setup, or when you don't have CSS expertise on your team."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"intermediate-customization-css-based","__idx":5},"children":["Intermediate customization (CSS-based)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customize your project's appearance using CSS variables and custom stylesheets."," ","Requires basic to intermediate CSS knowledge."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-styling","__idx":6},"children":["Custom styling"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["CSS variables"]}," - Override ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/css-variables"},"children":["CSS variables"]}," to customize colors, spacing, typography, and component appearance"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Custom stylesheets"]}," - Add custom CSS rules in your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/styles.css"]}," file using the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/styling"},"children":["custom styling guide"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Color mode styling"]}," - Create custom styling for light and dark modes"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"component-styling","__idx":7},"children":["Component styling"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Typography customization"]}," - ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/customize-fonts"},"children":["Customize fonts"]}," with web fonts, custom font stacks, and advanced typography"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Color mode customization"]}," - ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/customize-color-modes"},"children":["Customize color modes"]}," with custom color schemes and mode-specific styling"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Table styling"]}," - ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/customize-tables"},"children":["Customize table appearance"]}," with custom borders, colors, and layouts"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["When to use:"]}," When you need more control over appearance than configuration allows."," ","Also when you want to match specific brand guidelines or need custom styling for specific components."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"complete-styling-setup-example","__idx":8},"children":["Complete styling setup example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Set up custom styling for your project:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"treeview","header":{"controls":{"copy":{}}},"source":"your-project/\n├── @theme/\n│   └── styles.css\n├── static/\n│   └── fonts/\n│       ├── brand-font-regular.woff2\n│       └── brand-font-bold.woff2\n├── redocly.yaml\n└── ...\n","lang":"treeview"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure basic branding in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redocly.yaml"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"redocly.yaml","header":{"title":"redocly.yaml","controls":{"copy":{}}},"source":"logo:\n  image: ./images/logo.svg\n  altText: Your Brand\n  link: https://yourbrand.com\n  srcSet: \"./images/logo-light.svg light, ./images/logo-dark.svg dark\"\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add custom styling in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/styles.css"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"@theme/styles.css","header":{"title":"@theme/styles.css","controls":{"copy":{}}},"source":"/* Custom brand colors */\n:root {\n  --color-primary: #2563eb;\n  --color-primary-hover: #1d4ed8;\n  --sidebar-background-color: #f8fafc;\n  --navbar-background-color: #ffffff;\n}\n\n:root.dark {\n  --color-primary: #60a5fa;\n  --color-primary-hover: #3b82f6;\n  --sidebar-background-color: #1e293b;\n  --navbar-background-color: #0f172a;\n}\n\n/* Custom fonts */\n@font-face {\n  font-family: 'BrandFont';\n  src: url('../static/fonts/brand-font-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-display: swap;\n}\n\n:root {\n  --font-family-headings: 'BrandFont', system-ui, sans-serif;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"advancedtechnical-customization","__idx":9},"children":["Advanced/Technical customization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For complex customization needs that go beyond CSS styling."," ","Requires React and/or advanced web development knowledge."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"component-customization","__idx":10},"children":["Component customization"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Component ejection"]}," - ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/eject-components"},"children":["Eject and customize components"]}," like navbar, footer, search, or 404 pages for extensive brand customization"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-functionality","__idx":11},"children":["Custom functionality"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["React pages"]}," - ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/create-react-page"},"children":["Create React pages"]}," for complex layouts, interactive content, or custom landing pages"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Custom page templates"]}," - ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/custom-page-templates"},"children":["Create custom page templates"]}," for specific page layouts like blog posts or specialized content types"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Markdoc tags"]}," - ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/build-markdoc-tags"},"children":["Build custom Markdoc tags"]}," to add custom functionality and interactive components to your content"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Custom components"]}," - Develop entirely custom React components for specialized use cases"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"common-technical-customization-scenarios","__idx":12},"children":["Common technical customization scenarios"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Extensive navbar branding"]}," ","Eject the navbar component to add custom logo animations, additional navigation elements, or complex brand-specific layouts."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Custom footer with brand elements"]}," ","Eject the footer component to include custom brand messaging, additional links, social media integration, or newsletter signups."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Interactive landing pages"]}," ","Create React pages for marketing-focused landing pages with custom layouts, animations, or interactive elements."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Custom content components"]}," ","Build Markdoc tags for interactive elements like product demos, calculators, or brand-specific content blocks."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["When to use:"]}," When you need functionality that can't be achieved with CSS alone."," ","Also when you require custom interactive elements or need to integrate with external brand systems."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"get-started","__idx":13},"children":["Get started"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Start with easy customization"]}," - Configure your logo, colors, and basic branding through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redocly.yaml"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Add intermediate customization"]}," - Use CSS variables and custom styles for more precise brand control"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Consider technical approaches"]}," - Only when you need functionality beyond what CSS can provide"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Choose the approach that best fits your technical requirements and team capabilities."," ","You can always start simple and add more advanced customization as your needs grow."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":14},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/css-variables"},"children":["CSS variables"]}]}," - Complete dictionary of available CSS variables for styling"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config"},"children":["Configuration options"]}]}," - All available configuration options for easy customization"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/eject-components"},"children":["Eject components"]}]}," - Technical guide to ejecting and customizing components"]}]}]},"frontmatter":{"keywords":{"includes":["theme"]}},"tagList":[],"title":"Style your site","lastModified":"2026-10-01T23:00:57.000Z"}