Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/retypeapp/retype/llms.txt

Use this file to discover all available pages before exploring further.

This reference documents all customizable theme variables for your retype.yml. Each variable can be set independently in base (light mode) and dark (dark mode) sections.
Theme customization requires a Retype Pro license. You can trial Pro features locally by adding start: pro: true to your retype.yml.

​
Basic usage

retype.yml
theme:
  base:
    base-color: "#8839ef"
    base-bg: "#eff1f5"
  dark:
    base-color: "#ca9ee6"
    base-bg: "#303446"
See also the project theme configuration for how to apply these variables.

​
Base variables

Core variables that define the fundamental appearance of your site.
VariableDescriptionDefault baseDefault dark
base-colorBrand color#5495f1#5495f1
base-whitePure white#ffffff#ffffff
base-blackPure black#000000#000000
base-bgMain background colorbase-whitedark-900
base-textPrimary text colorgray-700dark-300
base-text-mutedMuted text colorgray-400gray-400
base-text-strongStrong/bold text colorgray-900base-white
base-borderDefault border colorgray-200dark-650
base-border-hoverBorder color on hovergray-300gray-550
base-border-strongStrong border colorgray-400gray-450
base-linkLink colorbase-500base-500
base-link-hoverLink hover colorbase-800base-300
base-link-weightLink font weight500500
base-item-bg-hoverItem hover backgroundbase-50dark-600
base-item-bg-activeActive item backgroundbase-100dark-550

​
Semantic variants

Semantic color variants used across Retype components. Each variant has a full palette from 50 (lightest) to 900 (darkest).
VariableDescriptionDefault base
baseFoundation brand color#5495f1
primaryPrimary actions and highlights#5495f1
successSuccess states#36ad99
dangerError and destructive actions#e53e3e
warningCaution and notices#edab26
royalSpecial emphasis and premium features#a667e3
Color palette shades follow a consistent pattern:
  • Lower numbers (50–400) are lighter shades mixed with white
  • The 500 shade is the pure base color for that variant
  • Higher numbers (600–900) are darker shades mixed with black

​
Example: customizing semantic colors

theme:
  base:
    primary: "#1e66f5"
    success: "#40a02b"
    danger:  "#d20f39"
    warning: "#df8e1d"
    royal:   "#8839ef"

​
Gray palette

VariableDefault
gray-50#f8f9fc
gray-100#f4f6fc
gray-200#e4e8f1
gray-300#bdc8da
gray-400#8693a9
gray-500#525e78
gray-600#3f4a64
gray-700#2c3047
gray-800#181d2d
gray-900#090d1c

​
Dark mode palette

VariableDefault
dark-300#c4c4c4
dark-400#616161
dark-500#353535
dark-600#2d2d2d
dark-700#272727
dark-800#222222
dark-900#121212
VariableDescriptionDefault baseDefault dark
header-bgHeader backgroundbase-bgbase-bg
header-borderHeader border colorbase-borderbase-border
header-textHeader text colorbase-linkbase-link
header-text-hoverHeader text hoverbase-link-hoverbase-link-hover
VariableDescriptionDefault baseDefault dark
sidebar-left-bgLeft sidebar backgroundbase-bgbase-bg
sidebar-left-borderLeft sidebar borderbase-borderbase-border
sidebar-right-bgRight sidebar backgroundbase-bgbase-bg
sidebar-right-borderRight sidebar borderbase-borderbase-border
VariableDescriptionDefault baseDefault dark
nav-bgNavigation backgroundsidebar-left-bgsidebar-left-bg
nav-item-bg-hoverItem hover backgroundbase-item-bg-hoverbase-item-bg-hover
nav-item-bg-activeActive item backgroundbase-item-bg-activebase-item-bg-active
nav-item-textNavigation textgray-900dark-300
nav-item-text-hoverNavigation hover textbase-item-text-activebase-item-text-active
nav-item-text-activeActive item textbase-item-text-activebase-item-text-active
nav-item-text-active-weightActive item font weightbase-link-weightbase-link-weight
nav-item-border-activeActive item left borderbase-500base-500
nav-item-text-stackStack mode text colorgray-700base-text-strong
nav-item-text-stack-caseStack mode text transformuppercaseuppercase

​
Table of contents

VariableDescriptionDefault baseDefault dark
toc-headingTOC heading colorgray-700dark-400
toc-textTOC text colorgray-700dark-300
toc-text-hoverTOC hover textbase-500base-500
toc-text-activeTOC active textbase-500base-500
toc-border-activeTOC active borderbase-500base-500
toc-heading-caseTOC heading text transformuppercaseuppercase
toc-heading-weightTOC heading font weight600600

​
Body and headings

VariableDescriptionDefault baseDefault dark
body-bgMain content backgroundbase-bgbase-bg
body-textMain content textbase-textbase-text
body-linkBody link colorbase-linkbase-link
body-link-hoverBody link hoverbase-link-hoverbase-link-hover
VariableDescriptionDefault baseDefault dark
heading-textHeading text colorgray-900base-white
heading-weightDefault heading weight700700
heading-h1-font-sizeH1 font size2.5rem2.5rem
heading-h2-font-sizeH2 font size2rem2rem
heading-h3-font-sizeH3 font size1.5rem1.5rem
heading-h4-font-sizeH4 font size1.125rem1.125rem
VariableDescriptionDefault baseDefault dark
footer-textFooter text colorgray-500dark-350
footer-linkFooter link colorbase-linkbase-link
footer-link-hoverFooter link hoverbase-link-hoverbase-link-hover
footer-link-weightFooter link font weightbase-link-weightbase-link-weight
VariableDescriptionDefault baseDefault dark
search-textSearch input textbase-textbase-text
search-placeholderSearch placeholderbase-text-mutedbase-text-muted
search-bgSearch input backgroundheader-bgheader-bg
search-borderSearch borderbase-borderbase-border-hover
search-border-focusSearch focus borderbase-border-hoverbase-border-strong

​
Branding

VariableDescriptionDefault baseDefault dark
branding-label-textLabel text colorbase-500base-500
branding-label-bgLabel backgroundbase-50transparent
branding-label-borderLabel border colorbase-300base-500

​
Component variables

​
Badge

Badge variables follow the pattern badge-{variant}-{property}. Supported variants: base, primary, secondary, success, danger, warning, info, light, dark, ghost, contrast, question. For each variant, the following properties are available:
Property suffixDescription
(no suffix)Background color
-hoverHover background
-textText color
-text-hoverHover text color
-borderBorder color
-border-hoverHover border color
Example: 
theme:
  base:
    badge-primary: "#dbeafe"
    badge-primary-text: "#1e40af"
    badge-primary-border: "#93c5fd"

​
Button

Button variables follow the pattern button-{variant}-{property}. Supported variants: base, primary, secondary, success, danger, warning, info, light, dark, ghost, contrast, question.
Property suffixDescription
(no suffix)Background color
-hoverHover background
-textText color

​
Callout

VariableDescriptionDefault baseDefault dark
callout-base-bgBase callout backgroundbase-whitedark-800
callout-base-borderBase callout borderbase-borderbase-border
callout-primaryPrimary callout accentprimary-500primary-500
callout-successSuccess callout accentsuccess-500success-500
callout-dangerDanger callout accentdanger-500danger-500
callout-warningWarning callout accentwarning-500warning-500
callout-tipTip callout accentsuccess-400success-400
callout-infoInfo callout accentbase-300base-300

​
Card

VariableDescriptionDefault baseDefault dark
card-bgCard backgroundbase-bgbase-bg
card-borderCard bordergray-200dark-700
card-border-hoverCard hover bordergray-400dark-450
card-roundedCard border radius0.5rem0.5rem
card-title-textCard title colorbase-text-strongbase-text-strong

​
Tab

VariableDescriptionDefault baseDefault dark
tab-textTab text colorgray-500dark-350
tab-text-activeActive tab textbase-500base-500
tab-border-activeActive tab underlinebase-500base-500

​
Helper variables

VariableDescriptionDefault baseDefault dark
transparentTransparent valuetransparenttransparent
skeleton-bgSkeleton loading backgroundgray-200dark-600
selection-bgText selection backgroundbase-200base-700
selection-textText selection text colorbase-text-strongbase-white

Build docs developers (and LLMs) love

Get started for freeTalk to us