# 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.

## Admin Theme: Gin

**Gin** is the default admin theme for Varbase, installed by the Varbase Admin Base recipe. Gin provides a modern, accessible administration interface with a clean design and improved editorial experience. Gin is a widely adopted Drupal admin theme and requires no additional configuration for most Varbase projects.

## Sections

### [Understanding Vartheme BS5](https://docs.varbase.vardot.com/11.0.x/developers/theme-development-with-varbase/understanding-vartheme-bs5)

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](https://docs.varbase.vardot.com/11.0.x/developers/theme-development-with-varbase/creating-your-own-theme)

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