{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"customize-styles","__idx":0},"children":["Customize styles"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can apply custom styling to change the appearance of your project."," ","For example, things like typography, colors, and spacing."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The core theme is built using ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/css-variables"},"children":["CSS variables"]},"."," ","You can override those variables to add custom styling while benefiting from the theme's existing structure."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"create-a-theme-stylesheet","__idx":1},"children":["Create a theme stylesheet"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You need a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/styles.css"]}," file to customize the styling of your project."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To add a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/styles.css"]}," file to your project:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add a folder named ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme"]}," to the root of your project."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.css"]}," file inside the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme"]}," folder."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Your project structure should look similar to the following example file tree:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"treeview","data-title":"Example file structure with styles.css file","header":{"title":"Example file structure with styles.css file","controls":{"copy":{}}},"source":"your-awesome-project/\n├── @theme/\n│   └── styles.css\n├── other-content.md\n├── redocly.yaml\n└── sidebars.yaml\n","lang":"treeview"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"override-css-variables","__idx":2},"children":["Override CSS variables"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add custom styling to your project by overriding CSS variables in your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/styles.css"]}," file."," ","The following example shows a complete custom styling setup:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"@theme/styles.css","header":{"title":"@theme/styles.css","controls":{"copy":{}}},"source":"/* Light mode styling (default) */\n:root {\n  /* Brand colors */\n  --color-primary: #2563eb;\n  --color-primary-hover: #1d4ed8;\n  \n  /* Layout colors */\n  --navbar-bg-color: #ffffff;\n  --sidebar-background-color: #f8fafc;\n  --content-background-color: #ffffff;\n  \n  /* Typography */\n  --h1-text-color: #1f2937;\n  --text-color: #374151;\n  --link-text-color: #2563eb;\n  \n  /* Spacing and borders */\n  --border-color: #e5e7eb;\n  --spacing-unit: 1rem;\n}\n\n/* Dark mode styling */\n:root.dark {\n  /* Brand colors for dark mode */\n  --color-primary: #60a5fa;\n  --color-primary-hover: #3b82f6;\n  \n  /* Layout colors */\n  --navbar-bg-color: #0f172a;\n  --sidebar-background-color: #1e293b;\n  --content-background-color: #0f172a;\n  \n  /* Typography */\n  --h1-text-color: #f1f5f9;\n  --text-color: #cbd5e1;\n  --link-text-color: #60a5fa;\n  \n  /* Spacing and borders */\n  --border-color: #374151;\n}\n\n/* Custom font configuration */\n@font-face {\n  font-family: 'CustomBrand';\n  src: url('../static/fonts/custom-brand.woff2') format('woff2');\n  font-weight: 400;\n  font-display: swap;\n}\n\n:root {\n  --font-family-headings: 'CustomBrand', system-ui, sans-serif;\n  --font-family-body: 'Inter', system-ui, sans-serif;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When you save this file and run your project in development mode, the styling changes will be visible immediately."," ","Toggle between color modes to see the differences."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Steps for customizing your project styling:"]}]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Choose elements to style"]}," - Identify which components or sections you want to customize (see ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/customize-tables"},"children":["table styling"]}," or ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/customize-fonts"},"children":["font customization"]}," for specific guides)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Find the CSS variables"]}," - Use browser developer tools or the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/css-variables"},"children":["CSS variables reference"]}," to identify the relevant variables"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Override variables"]}," - Add your custom values to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/styles.css"]}," file"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Test in both modes"]}," - Ensure your styling works well in both light and dark modes using ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/customize-color-modes"},"children":["color mode customization"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"restore-legacy-link-styling","__idx":3},"children":["Restore legacy link styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you want links to look like they did previously (no underline by default, underline on hover), add the following overrides in your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/styles.css"]}," file:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"@theme/styles.css","header":{"title":"@theme/styles.css","controls":{"copy":{}}},"source":":root {\n  --link-decoration: none;\n  --link-decoration-visited: none;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you prefer no underlines in any link state, including hover:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"@theme/styles.css","header":{"title":"@theme/styles.css","controls":{"copy":{}}},"source":":root {\n  --link-decoration: none;\n  --link-decoration-hover: none;\n  --link-decoration-visited: none;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"style-products-individually","__idx":4},"children":["Style products individually"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When your project has multiple products configured, a product-specific CSS class is automatically added to the root element (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<html>"]},") based on the current product."," ","You can use this class to apply different styling to each product within the same project."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The product class follows the format ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["product-{product-name}"]},", where the product name is converted to kebab-case (lowercase with hyphens)."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For example:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Product name \"Example One\" becomes the class ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["product-example-one"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Product name \"API Documentation\" becomes the class ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["product-api-documentation"]},"."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Ad-blocker filter lists hide the class names ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["product-ad"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["product-ads"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["product-inlist-ad"]}," on every website."," ","To keep such pages visible, Realm appends an underscore to these class names."," ","For example, a product named \"Ads\" gets the class ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["product-ads_"]}," instead of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["product-ads"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To style a specific product, use the product class selector in your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/styles.css"]}," file:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"@theme/styles.css","header":{"title":"@theme/styles.css","controls":{"copy":{}}},"source":"/* Default styling for all products */\n:root {\n  --navbar-bg-color: #ffffff;\n  --navbar-text-color: #1f2937;\n}\n\n/* Product-specific styling for \"Example One\" */\n:root.product-example-one {\n  --navbar-bg-color: #e3f2fd;\n  --navbar-border-color: #2196f3;\n  --navbar-text-color: #1976d2;\n}\n\n/* Product-specific styling for \"Example Two\" that also hides the product picker for this product */\n:root.product-example-two {\n  --navbar-bg-color: #f3e5f5;\n  --navbar-border-color: #9c27b0;\n  --navbar-text-color: #7b1fa2;\n\n  [data-component-name='Product/ProductPicker'] {\n    display: none;\n  }\n}\n\n/* Combine product classes with dark mode */\n:root.dark.product-example-one {\n  --navbar-bg-color: #0d47a1;\n  --navbar-border-color: #42a5f5;\n  --navbar-text-color: #90caf9;\n}\n\n:root.dark.product-example-two {\n  --navbar-bg-color: #4a148c;\n  --navbar-border-color: #ba68c8;\n  --navbar-text-color: #ce93d8;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tips for product-specific styling:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Find the product class name"]}," - use browser developer tools to inspect the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<html>"]}," element and see which product class is currently applied."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Combine with color modes"]}," - use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":root.dark.product-{product-name}"]}," to style products differently in dark mode."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Override CSS variables"]}," - product-specific styles work best when overriding CSS variables, allowing the theme to handle the rest."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Test all products"]}," - make sure to test your styling across all products in your project to ensure consistency."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"apply-custom-classes-or-ids","__idx":5},"children":["Apply custom classes or IDs"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can apply custom CSS classes or IDs included in your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.css"]}," file using Markdoc annotation syntax."," ","Apply them to many Markdown or Markdoc block level elements such as table cells, list items, quotes, and headers."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To apply a custom class to a Markdown element:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the custom class to your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.css"]}," file, as in the following example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"styles.css","header":{"title":"styles.css","controls":{"copy":{}}},"source":".highlight, p:has(.highlight) {\n  background-color: yellow;\n  color: red;\n }\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the annotation syntax to the element in the Markdown document, as in the following example:"]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"title":"lists.md","language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Introduction to unordered list:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["unordered list item 1"]},{"$$mdtype":"Tag","name":"li","attributes":{"class":"highlight"},"children":["unordered list item 2 "]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["unordered list item 3"]}]},{"$$mdtype":"Tag","name":"p","attributes":{"class":"highlight"},"children":["Introduction to ordered list: "]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["ordered list item 1"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["ordered list item 2"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["ordered list item 3"]}]}],"rawContent":"\n  Introduction to unordered list:\n\n  - unordered list item 1\n  - unordered list item 2 {% class=\"highlight\" %}\n  - unordered list item 3\n\n  Introduction to ordered list: {% class=\"highlight\" %}\n\n  1. ordered list item 1\n  1. ordered list item 2\n  1. ordered list item 3\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Rendered output:"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Introduction to unordered list:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["unordered list item 1"]},{"$$mdtype":"Tag","name":"li","attributes":{"class":"highlight"},"children":["unordered list item 2 "]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["unordered list item 3"]}]},{"$$mdtype":"Tag","name":"p","attributes":{"class":"highlight"},"children":["Introduction to ordered list: "]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["ordered list item 1"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["ordered list item 2"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["ordered list item 3"]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"use-css-utility-classes-for-layout","__idx":6},"children":["Use CSS utility classes for layout"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can use CSS utility classes to arrange elements on the page, such as placing diagrams side-by-side."," ","This approach provides more flexibility than using tables and ensures diagrams are responsive."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To place diagrams side-by-side:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add a utility class like ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".side-by-side"]}," to your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/styles.css"]}," file:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"@theme/styles.css","header":{"title":"@theme/styles.css","controls":{"copy":{}}},"source":".side-by-side {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  align-items: flex-start;\n}\n\n.side-by-side > * {\n  flex: 1 1 300px; /* Adjust the 300px to your preferred minimum width */\n}\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use a wrapper element with the class in your Markdown:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"markdoc","header":{"controls":{"copy":{}}},"source":"# Side-by-side diagrams\n\n<div class=\"side-by-side\">\n\n```mermaid\ngraph TD;\n  A-->B;\n```\n\n```mermaid\ngraph TD;\n  C-->D;\n```\n\n</div>\n","lang":"markdoc"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You may need to restart the Webview or commit your changes to your branch to see the updates."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":7},"children":["Examples"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the examples in this section as starter themes to quickly add styling to your project."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Request examples"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Have a request for a styling example?"," ","Please use the feedback form at the bottom of the page and tell us."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"example-theme---full-corporate","__idx":8},"children":["Example theme - \"Full corporate\""]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The \"Full corporate\" styling uses a business font, has teal accents, and is deliberate about spacing."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"@theme/styles.css","header":{"title":"@theme/styles.css","controls":{"copy":{}}},"source":":root {\n  --teal-primary-1: #62D7A6;\n  --teal-primary-2: #9BB0A5;\n  --dark-green-primary-1: #384B42;\n  --dark-green-primary-2: #005A23;\n  --font-family-base: Times New Roman;\n\n  --md-container-max-width: 860px;\n  --md-container-padding-vertical: 18px;\n  --md-container-padding-horizontal: 5px;\n  --md-paragraph-margin-vertical: 6px;\n  --h1-margin-top: 12px;\n  --h2-margin-top: 8px;\n\n  --menu-item-bg-color-active: var(--teal-primary-1);\n  --toc-item-border-color-active: var(--teal-primary-1);\n  --breadcrumbs-text-color-active: var(--teal-primary-1);\n\n  --navbar-bg-color: var(--teal-primary-2);\n  \n  --search-trigger-color: var(--dark-green-primary-1);\n\n  --link-color-primary: var(--teal-primary-1);\n  --link-color-visited: var(--dark-green-primary-2);\n\n}\n\n:root.dark {\n  --teal-primary-dark: #CDFBE4;\n  --text-color-dark: #22232B;\n\n  --navbar-text-color: #364133;\n\n  --menu-item-color-active: var(--text-color-dark);\n  --menu-item-text-color: var(--teal-primary-dark);\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following screenshots show the styling rules applied:"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Light mode","disable":false},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/full-corporate-light-a819289a2373c79c.jpeg","alt":"Screenshot of Redocly project with the full corporate styling example applied in light mode.","framed":true,"withLightbox":true},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Dark mode","disable":false},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/full-corporate-dark-af81f6ca1e6fc883.jpeg","alt":"Screenshot of Redocly project with the full corporate styling example applied in dark mode.","framed":true,"withLightbox":true},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"example-theme---trendy-startup","__idx":9},"children":["Example theme - \"Trendy startup\""]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The styling for the \"Trendy startup\" example combines shocking pink and teeny tiny font sizes."," ","Note the increased specificity used to style ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".menu-item-type-separator"]}," in dark mode."," ","This approach can be used for styling elements that may not have a CSS variable defined yet."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"@theme/styles.css","header":{"title":"@theme/styles.css","controls":{"copy":{}}},"source":":root {\n  --font-size-base: 12px;\n  --font-size-sm: 10px;\n  --font-size-lg: 14px;\n  --font-size-xl: 20px;\n\n  --pink-primary-1: #F15483;\n  --pink-primary-2: #FAAEBD;\n  --pink-primary-3: #FFE3ED;\n  --purple-primary: #905B9F;\n\n  --h1-text-color: var(--pink-primary-1);\n  --heading-text-color: var(--pink-primary-2);\n  \n  --search-trigger-bg-color: var(--pink-primary-3);\n  --sidebar-bg-color: var(--pink-primary-3);\n\n  --toc-item-text-color-active: var(--purple-primary);\n  --breadcrumbs-text-color-active: var(--purple-primary);\n}\n\n:root.dark {\n  --purple-primary-dark: #BD9BF4;\n\n  --menu-item-text-color: #22232B;\n  \n  --toc-item-text-color-active: var(--purple-primary-dark);\n  --breadcrumbs-text-color-active: var(--purple-primary-dark);\n}\n\n:root.dark .menu-item-type-separator {\n  --menu-item-text-color: #22232B;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following screenshots show the styling rules applied:"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Light mode","disable":false},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/trendy-startup-light-f5f240358e0e38de.jpeg","alt":"Screenshot of Redocly project with the trendy startup styling example applied in light mode.","framed":true,"withLightbox":true},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Dark mode","disable":false},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/trendy-startup-dark-a1c99cb53cedf99c.jpeg","alt":"Screenshot of Redocly project with the trendy startup styling example applied in dark mode.","framed":true,"withLightbox":true},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"example-theme---personal-wellness","__idx":10},"children":["Example theme - Personal wellness"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The \"Personal wellness\" example uses styling that emphasizes pastel colors and lots of space between elements."," ","Note that the only spacing change in the following example is for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--spacing-unit"]},", but space between elements is increased throughout the theme."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"@theme/styles.css","header":{"title":"@theme/styles.css","controls":{"copy":{}}},"source":":root {\n  --pastel-green: #d2e7d6;\n  --pastel-green-secondary: #00A84E;\n  --pastel-blue: #94B5E3;\n  --pastel-purple: #B9C3FC;\n  --pastel-active: #FFDF82;\n  --text-color-dark-green: #3B4A3F;\n\n  --navbar-bg-color: var(--pastel-green);  \n  --navbar-item-bg-color-hover: var(--pastel-active);\n  --navbar-item-bg-color-active: var(--pastel-active);\n  --navbar-border-color: var(--pastel-purple);\n  --search-trigger-border-color: var(--pastel-purple);\n  --search-input-placeholder-color: var(--pastel-purple);\n\n  --sidebar-bg-color: var(--pastel-blue);\n  --menu-item-bg-color-hover: var(--pastel-active);\n  --menu-item-bg-color-active: var(--pastel-active);\n\n  --toc-bg-color: var(--pastel-blue);\n  --toc-border-color: var(--pastel-purple);\n  \n  --text-color-secondary: var(--text-color-dark-green);\n  --link-color-primary: var(--pastel-green-secondary);\n  --link-color-visited: var(--pastel-purple);\n\n  --spacing-unit: 6px;\n}\n\n:root.dark {\n  --pastel-green-dark: #728576;\n  --pastel-green-secondary: #00A84E;\n  --pastel-blue-dark: #2F4858;\n  --pastel-purple: #B9C3FC;\n  --pastel-active-dark: #386C5F;\n  --text-color-light-grey: #ECFEEF;\n\n  --navbar-bg-color: var(--pastel-green-dark);\n  --navbar-item-text-color-active: var(--pastel-green-dark);\n  --navbar-item-text-color-hover: var(--pastel-green-dark);\n  --navbar-item-bg-color-hover: var(--pastel-green);\n  --navbar-item-bg-color-active: var(--pastel-green);\n\n  --sidebar-bg-color: var(--pastel-blue-dark);\n  --menu-item-color-active: var(--pastel-green-dark);\n  --menu-item-color-hover: var(--pastel-green-dark);\n  --menu-item-bg-color-active: var(--pastel-green);\n  --menu-item-bg-color-hover: var(--pastel-green);\n  --toc-bg-color: var(--pastel-blue-dark);\n\n  --text-color-secondary: var(--text-color-light-grey);\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following screenshots show the styling rules applied:"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Light mode","disable":false},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/personal-wellness-light-5c530d42c7369140.jpeg","alt":"Screenshot of Redocly project with the personal wellness styling example applied in light mode.","framed":true,"withLightbox":true},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Dark mode","disable":false},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/personal-wellness-dark-5a2608f1d24edd8a.jpeg","alt":"Screenshot of Redocly project with the personal wellness styling example applied in dark mode.","framed":true,"withLightbox":true},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":11},"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/customize-color-modes"},"children":["Customize color modes"]}]}," - Create custom styling for light and dark modes with mode-specific color schemes and advanced CSS rules"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding"},"children":["Style your site"]}]}," - Explore all available branding and customization approaches from basic configuration to advanced component ejection"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/color-mode"},"children":["Color mode"]}]}," - Understand how the color mode feature works and its CSS variable-based implementation"]},{"$$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 comprehensive styling customization"]}]}]},"frontmatter":{},"tagList":["admonition","img","markdoc-example","tab","tabs"],"title":"Customize styles","lastModified":"2026-10-01T23:00:57.000Z"}