> For the complete documentation index, see [llms.txt](https://docs.varbase.vardot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.varbase.vardot.com/developers/theme-development-with-varbase.md).

# Theme Development with Varbase

Varbase 11.0.x provides a modern theming system built on established front-end technologies and Drupal's component-based architecture.

## Front-End Theme: Vartheme BS5

**Vartheme BS5** is the default front-end theme for Varbase. It is a Bootstrap 5 based theme that provides responsive design, SCSS compilation, and a component-based architecture using Drupal's Single Directory Components (SDC) system. Vartheme BS5 is installed by the Varbase Starter recipe.

## [Design System Base Install](https://storybook.demo.varbase.vardot.com/)

Uses **Storybook 10** with the Vartheme BS5 starter kit. The Varbase project requires `storybook: ^10` in its `package.json` ([#3583717](https://www.drupal.org/i/3583717)). See [Integration of Varbase With Storybook](/developers/theme-development-with-varbase/integration-of-varbase-with-storybook.md).

## Sections

### [Understanding Vartheme BS5](/developers/theme-development-with-varbase/understanding-vartheme-bs5.md)

Learn about the architecture of Vartheme BS5, including its Bootstrap 5 foundation, SCSS structure, Single Directory Components, and CVA (Class Variance Authority) integration.

### [Creating Your Own Theme](/developers/theme-development-with-varbase/creating-your-own-theme.md)

Step-by-step guide to creating a custom sub-theme that extends Vartheme BS5, including setting up SCSS compilation and customizing Bootstrap variables.

### [Drupal Canvas](/developers/theme-development-with-varbase/drupal-canvas.md)

Build and manage a Vartheme BS5 site visually with **Drupal Canvas**, with no code:

* [**Introduction to Drupal Canvas in Varbase**](/developers/theme-development-with-varbase/drupal-canvas/introduction-to-drupal-canvas-in-varbase.md): what Canvas is and how the editor works.
* [**Component Reference: Vartheme BS5 in Drupal Canvas**](/developers/theme-development-with-varbase/drupal-canvas/vartheme-bs5-components-in-drupal-canvas.md): how a theme component reaches Canvas, and the 46 components with their IDs and slots.
* [**Editing the Header and Footer With Drupal Canvas**](/developers/theme-development-with-varbase/drupal-canvas/editing-the-header-and-footer-with-drupal-canvas.md): the page template and the Administer page template permission.
* [**Managing Multiple Accordions With Drupal Canvas**](/developers/theme-development-with-varbase/drupal-canvas/managing-multiple-accordions-with-drupal-canvas.md): the Accordion components, the Layers panel, and holding any component inside an accordion.
* [**Hero Slider Container and Hero Slide With Drupal Canvas**](/developers/theme-development-with-varbase/drupal-canvas/hero-slider-container-and-hero-slide-with-drupal-canvas.md): a hero carousel, its container settings and one example for each media position.
* [**Building Common Page Types With Drupal Canvas**](/developers/theme-development-with-varbase/drupal-canvas/building-common-page-types-with-drupal-canvas.md): services, products and event pages.
* [**Building Pages With the Drupal Canvas AI Agent**](/developers/theme-development-with-varbase/drupal-canvas/building-pages-with-the-drupal-canvas-ai-agent.md): drafting a page from a prompt.
* [**Default Canvas Patterns**](/developers/theme-development-with-varbase/drupal-canvas/default-canvas-patterns.md): the ready sections shipped with the site template.

### [Troubleshooting Theme Switch Issues](/developers/theme-development-with-varbase/troubleshooting-theme-switch-issues.md)

What to do when Canvas pages still point at the old theme's components after switching themes.

### [Integration of Varbase With Storybook](/developers/theme-development-with-varbase/integration-of-varbase-with-storybook.md)

The `ddev storybook` command, generating stories, and running Storybook on DDEV and Upsun.

### [Add Preloaded Fonts in Vartheme](/developers/theme-development-with-varbase/add-preloaded-fonts-in-vartheme.md)

Preload web fonts in a theme built from Vartheme BS5.

### [Manually Install Needed Theming Tools](/developers/theme-development-with-varbase/manually-install-needed-theming-tools.md)

Install Node.js, npm and Yarn by hand when you do not use the DDEV commands.