Blank and Luma Themes

What is Blank Theme?

Blank is Magento's minimal base theme. It provides basic structure without styling.

Theme Location

vendor/magento/theme-frontend-blank/
├── theme.xml
├── registration.php
├── web/
│   ├── css/
│   │   ├── blank.css
│   │   └── source/
│   │       ├── _reset.less
│   │       ├── _layout.less
│   │       └── _typography.less
│   ├── js/
│   └── images/
│       └── logo.svg
├── Magento_Theme/
│   ├── layout/
│   │   └── default.xml
│   └── templates/
│       └── html/
│           ├── header.phtml
│           └── footer.phtml
└── i18n/
    └── en_US.csv

Key Characteristics

• Minimal styling (gray background, basic typography)
• Clean semantic HTML structure
• No JavaScript components
• Ideal for custom theme development
• Smaller file size

When to Use Blank

• Building a completely custom design
• Need full control over styling
• Want minimal overhead
• Starting from scratch with your own CSS/LESS

What is Luma Theme?

Luma is Magento's default styled theme. It extends Blank with modern styling and JavaScript components.

Theme Location

vendor/magento/theme-frontend-luma/
├── theme.xml
│   └── <parent>Magento/blank</parent>
├── registration.php
├── web/
│   ├── css/
│   │   ├── luma.css
│   │   └── source/
│   │       ├── _variables.less
│   │       ├── _layout.less
│   │       ├── _typography.less
│   │       └── _extend.less
│   ├── js/
│   │   └── navigation.js
│   └── images/
│       ├── logo.svg
│       └── ...
├── Magento_Theme/
│   ├── layout/
│   │   └── default.xml
│   └── templates/
│       └── ...
└── i18n/

Key Characteristics

• Modern, clean design
• Responsive layout
• Swiper.js for carousels
• Responsive menu for mobile
• Pre-built UI components
• Extends Blank theme

When to Use Luma

• Quick store setup
• Need a polished look out of the box
• Starting with default styling
• Learning Magento frontend

Side-by-Side Comparison

Inheritance Chain

Magento/luma
    ↓ inherits from
Magento/blank
    ↓ inherits from
Magento/core (base files)

Visual Difference

Blank: Gray background, basic text, minimal styling
Luma: White background, styled header/footer, product grids, carousels

Decision Guide

Choose Blank if:

• Building a completely new design
• Have a design team creating custom styles
• Want maximum flexibility

Choose Luma if:

• Need a quick, polished store
• Want built-in JavaScript components
• Starting with standard e-commerce layout

Customizing Blank Theme

Create child of Blank for custom design:

<!-- theme.xml -->
<theme>
    <title>My Custom Theme</title>
    <parent>Magento/blank</parent>
</theme>

Then add your own CSS/LESS:

// web/css/source/_extend.less
@primary-color: #333;
@secondary-color: #666;

body {
    background-color: #fff;
    color: @primary-color;
}

.header {
    background-color: @primary-color;
}

Customizing Luma Theme

Create child of Luma to override styles:

<!-- theme.xml -->
<theme>
    <title>My Luma Child</title>
    <parent>Magento/luma</parent>
</theme>

Override specific styles:

// web/css/source/_extend.less
@color-primary: #ff6600;

.action.primary {
    background-color: @color-primary;
}

Hybrid Approach

Use Luma as starting point, customize what you need:

1. Start with Luma child
2. Override specific templates
3. Customize LESS variables
4. Add custom CSS