## Documentation index This index lists every available documentation page and its Markdown source. - [Documentation](https://vara.varavel.com/docs/index.md) - [Introduction](https://vara.varavel.com/docs/introduction/index.md) - [Getting Started](https://vara.varavel.com/docs/getting-started/index.md) - [Installation](https://vara.varavel.com/docs/getting-started/installation/index.md) - [Quick Start](https://vara.varavel.com/docs/getting-started/quick-start/index.md) - [Composing a Landing Page](https://vara.varavel.com/docs/getting-started/composing-landing-page/index.md) - [Fundamentals](https://vara.varavel.com/docs/fundamentals/index.md) - [Project Structure](https://vara.varavel.com/docs/fundamentals/project-structure/index.md) - [Page Generators](https://vara.varavel.com/docs/fundamentals/page-generators/index.md) - [Site Settings](https://vara.varavel.com/docs/fundamentals/site-settings/index.md) - [Search and LLM Output](https://vara.varavel.com/docs/fundamentals/search-and-llms/index.md) - [Customization](https://vara.varavel.com/docs/fundamentals/customization/index.md) - [Functions and Filters](https://vara.varavel.com/docs/fundamentals/functions-and-filters/index.md) - [Templates](https://vara.varavel.com/docs/templates/index.md) - [vara-landing](https://vara.varavel.com/docs/templates/landing/index.md) - [vara-docs](https://vara.varavel.com/docs/templates/docs/index.md) - [vara-docs-raw](https://vara.varavel.com/docs/templates/docs-raw/index.md) - [vara-docs-search-index](https://vara.varavel.com/docs/templates/docs-search-index/index.md) - [vara-docs-llms-txt](https://vara.varavel.com/docs/templates/docs-llms-txt/index.md) - [vara-docs-llms-full-txt](https://vara.varavel.com/docs/templates/docs-llms-full-txt/index.md) - [vara-sitemap-xml](https://vara.varavel.com/docs/templates/sitemap-xml/index.md) - [vara-404](https://vara.varavel.com/docs/templates/404/index.md) - [Components](https://vara.varavel.com/docs/components/index.md) - [Alert](https://vara.varavel.com/docs/components/alert/index.md) - [Badge](https://vara.varavel.com/docs/components/badge/index.md) - [Button](https://vara.varavel.com/docs/components/button/index.md) - [Container](https://vara.varavel.com/docs/components/container/index.md) - [Icon](https://vara.varavel.com/docs/components/icon/index.md) - [Keyboard Key](https://vara.varavel.com/docs/components/kbd/index.md) - [Header](https://vara.varavel.com/docs/components/header/index.md) - [Hero](https://vara.varavel.com/docs/components/hero/index.md) - [Content Split](https://vara.varavel.com/docs/components/content-split/index.md) - [Features](https://vara.varavel.com/docs/components/features/index.md) - [Stats](https://vara.varavel.com/docs/components/stats/index.md) - [FAQ](https://vara.varavel.com/docs/components/faq/index.md) - [Testimonial](https://vara.varavel.com/docs/components/testimonial/index.md) - [Carousel](https://vara.varavel.com/docs/components/carousel/index.md) - [Call to Action](https://vara.varavel.com/docs/components/cta/index.md) - [Footer](https://vara.varavel.com/docs/components/footer/index.md) - [Troubleshooting](https://vara.varavel.com/docs/troubleshooting/index.md) ## Documentation content The documentation for the current page follows, reproduced verbatim. # Customization Vara is designed to look good on its own, but it is meant to be adapted. Because the theme is built with Tailwind CSS and structured around Veta's concepts, most customizations stay small and local to your project. ## Colors Vara uses a small set of design tokens that map to Tailwind utility classes: | Token | Light | Dark | Typical use | | --------------- | ----------- | ----------- | ------------------------ | | `base-100` | white | black | Page and header surfaces | | `base-200` | neutral-100 | neutral-900 | Card and panel surfaces | | `base-300` | neutral-200 | neutral-800 | Hover surfaces | | `base-400` | neutral-300 | neutral-700 | Borders and dividers | | `content` | neutral-950 | neutral-50 | Primary text | | `content-muted` | neutral-500 | neutral-400 | Secondary text | | `info` | blue-500 | blue-500 | Informational accents | | `success` | emerald-500 | emerald-500 | Success accents | | `warning` | orange-500 | orange-500 | Warning accents | | `error` | red-500 | red-500 | Error accents | Components use these tokens directly, so changing them restyles the whole site. Add your own overrides after the theme import in your stylesheet: ```css @import "./_vara/css/base.css"; @theme { --color-info: var(--color-sky-500); } ``` The full token definitions live in `public/_vara/css/base.css`. ## Dark mode Light and dark mode are built in. The theme starts by following the operating system preference, remembers the visitor's choice in `localStorage`, and reacts to system changes while it is set to "system". Landing pages get a theme picker through the `` component, and documentation pages always show one in the header. The picker offers System, Light, and Dark. ## Typography Vara ships with the Geist Sans and Geist Mono variable fonts, self-hosted under `public/_vara/fonts/` so no external requests are needed. Sans is used for interface and content text; mono is used for code, keyboard keys, and metrics. Add a `font-sans` or `font-mono` override in your stylesheet to change the families site-wide. ## Icons The theme bundles an icon set with thousands of SVGs - Lucide icons plus Simple Icons - stored under `templates/vara/icons/`. Use them anywhere with the `` component: ```html ``` Lucide names collide with Simple Icons names on purpose; when that happens, the Simple Icons variant is prefixed with `si-` (for example, `x` is the Lucide version and `si-x` is the brand version). To use an icon in your own template, call the `vara_icon` function with the icon name and optional classes: ``` {{ vara_icon("check", "size-4") | safe }} ``` Missing icons render a visible warning glyph instead of breaking the build. ## Writing content ### Component attributes Component attributes are strings. Quote every value, use `"true"` / `"false"` for booleans, and use the predictable `item_N_*` families for bounded lists of records. Markdown inside a component's body is rendered before the component resolves it, so paired components receive real HTML, not raw Markdown. Set `class` on a component to extend it with your own utilities. ### Headings inside components On documentation pages, headings only join the table of contents and receive anchor links when they live in the page's prose. Components render with a `not-prose` marker, so headings inside them stay out of the TOC on purpose - an accordion question or a card title is embedded content, not a section of the article. Use `class="not-prose"` on your own markup when you want the same opt-out. See [vara-docs](../templates/docs/) for details. ### Links and assets Use root-relative paths for internal links and assets. Vara resolves them with Veta's deployment-aware `url()` helper, so your site keeps working when deployed below a path prefix. When a link opens in a new tab, the theme adds `rel="noopener noreferrer"` automatically. ## Overriding the theme Veta composes the theme and the project into one filesystem, and project files win. To customize the theme without forking it, add files with the same path to your project: ```txt theme/templates/vara-docs.j2 templates/vara-docs.j2 # your override ``` You can override a template, replace a component, or extend the styles. The rest of the theme keeps working as before. ### Adding your own components Components are just templates in `components/`. Add a new file there, and it becomes available as a custom tag in your content: ```html ``` Your components can import the theme's macros and call its functions, so they stay consistent with the rest of the site. Keep domain-specific components in your project - the theme's own collection stays small and general-purpose by design.