Written by: Geoffrey Callaghan

how to create a sapper theme

How To Create A Sapper Theme

Creating a Sapper theme involves designing a set of reusable components, styles, and configurations that can be shared across multiple Sapper projects. Sapper, built on top of Svelte, allows you to create powerful web applications with a similar component-based architecture. Here’s a step-by-step guide to help you create a Sapper theme:

Step 1: Set Up Your Environment

  1. Install Node.js and npm: Ensure you have Node.js and npm (or Yarn) installed. You can download and install from nodejs.org.

  2. Create a New Sapper Project: Use the Sapper template to create a new project.

    npx degit "sveltejs/sapper-template#rollup" sapper-theme
    cd sapper-theme
    npm install

Step 2: Organize Your Theme Directory

  1. Create a theme Directory: Inside your Sapper project, create a directory for your theme components, styles, and utilities.

    mkdir theme
    cd theme
    mkdir components styles utils
  2. Create a package.json for Your Theme: Initialize the theme directory as a separate npm package.

    npm init -y

Step 3: Develop Theme Components

  1. Create a Button Component: Create a simple Button component as an example.

    <!-- theme/components/Button.svelte -->
      export let className = '';
      export let onClick = () => {};
    <button class="btn {className}" on:click={onClick}>
      .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        background-color: #0070f3;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s;
      .btn:hover {
        background-color: #005bb5;

Step 4: Create a Theme Layout

  1. Create a Layout Component: Add a layout component that includes a header and footer.

    <!-- theme/components/Layout.svelte -->
      import Header from './Header.svelte';
      import Footer from './Footer.svelte';
    <Header />
    <slot />
    <Footer />
  2. Create Header and Footer Components:

    <!-- theme/components/Header.svelte -->
      export let title = 'My Sapper Theme';
      header {
        background-color: #0070f3;
        color: white;
        padding: 10px;
    <!-- theme/components/Footer.svelte -->
      <p>&copy; 2024 My Sapper Theme</p>
      footer {
        background-color: #0070f3;
        color: white;
        padding: 10px;
        text-align: center;

Step 5: Configure Your Theme

  1. Export Components and Styles: Create an index file to export your components and styles.

    // theme/index.js
    export { default as Button } from './components/Button.svelte';
    export { default as Layout } from './components/Layout.svelte';

Step 6: Using Your Theme in a Sapper Project

  1. Create a New Sapper Project: Create another Sapper project that will use the theme.

    npx degit "sveltejs/sapper-template#rollup" my-sapper-site
    cd my-sapper-site
    npm install
  2. Install Your Theme Locally: Link your theme package for local development.

    npm link ../sapper-theme

    Then add your theme as a dependency in my-sapper-site.

    npm install sapper-theme
  3. Use Theme Components and Layouts: Use the components and layouts from the theme in your project.

    <!-- src/routes/index.svelte -->
      import { Button, Layout } from 'sapper-theme';
      let count = 0;
      const increment = () => count += 1;
      <h2>Welcome to My Sapper Site</h2>
      <Button on:click={increment}>Clicked {count} {count === 1 ? 'time' : 'times'}</Button>

Step 7: Publish and Share Your Theme

  1. Publish Your Theme to npm: If you want to share your theme, publish it to npm.

    cd theme
    npm publish --access public

Final Steps

  1. Test Your Theme: Test the theme in different projects to ensure it works as expected.

  2. Document Your Theme: Provide clear documentation on how to use and customize your theme in a README.md file.

By following these steps, you can create a reusable Sapper theme that includes components, styles, and configurations for shared functionality. This allows you to maintain a consistent design across multiple Sapper projects.