> For the complete documentation index, see [llms.txt](https://front-of-house.gitbook.io/svbstrate/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://front-of-house.gitbook.io/svbstrate/theming.md).

# Theming

Svbstrate accepts an optional theme config that allows you to specify *design tokens*, as well as other handy things like aliases, variants, and custom properties. Check out the simple example below:

<pre class="language-javascript"><code class="lang-javascript"><strong>import { createTheme } from '@svbstrate/core';
</strong><strong>
</strong><strong>const theme = createTheme({
</strong>    breakpoints: [
        '400px',
        '800px',
        '1200px'
    ],
    tokens: {
        color: {
            primary: '#ff4567',
            secondary: '#333',
        },
    },
    aliases: {
        c: ['color'],
        p: ['padding'],
    },
    macros: {
        cover: {
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
        },
    },
    variants: {
        size: {
            small: {
                p: 20,
            },
            big: {
                p: 40,
            }
        }
    }
})
</code></pre>