Implementing Styling and Theming

Without styling, an h1 element within a component will look the same as another h1 element from another component. Svelte allows you to use Cascading Style Sheets (CSS), a language used for styling and formatting web content, to style your elements, giving them a different look and feel.

In this chapter, we will start by talking about different ways to style a Svelte component. We will then see some examples, including integrating a popular CSS framework, Tailwind CSS, into Svelte.

Following that, we will talk about themes. When you have a set of styles consistently applied throughout Svelte components, you’ll see an overall styling theme in your components. We will talk about how to synchronize the styles across components, as well as how to let users of the components customize them.

By the end of the chapter, you will have learned various methods of styling and will be comfortable in choosing the right approach and applying the right...

Technical requirements

You can find the code used in this chapter on GitHub: https://github.com/PacktPublishing/Real-World-Svelte/tree/main/Chapter02.

Styling Svelte components in six different ways

In a Svelte component, you have elements that define the structure and content. With styling, you can change the look and feel of the elements beyond the browser default.

Svelte components can be styled in six different ways. Let’s explore the different ways to apply a style to elements within a Svelte component.

Styling with the style attribute

Firstly, you can add inline styles to an element with the style attribute:

<div style="color: blue;" />

The preceding snippet will turn the color of the text within div to blue.

Similar to the style attribute in HTML elements, you can add multiple CSS styling declarations:

<div style="color: blue; font-size: 2rem;" />

The syntax of adding multiple CSS styling declarations in Svelte is the same as you would do in HTML. In the preceding snippet, we change the text within div to be blue in color and 2 rem in size.

The value of the style...

Styling Svelte with Tailwind CSS

Tailwind CSS is a utility-first CSS framework. It comes with predefined classes, such as flex, pt-4, and text-center, which you can use directly in your markup:

<div class="flex pt-4 text-center" />

We are going to use Vite’s Svelte template as a base to set up Tailwind CSS. If you are not familiar with setting up Vite’s Svelte template, here are the quick steps to set it up:

1. Run the Vite setup tool:

   npm create vite@latest my-project-name -- --template svelte

   This will generate a new folder named my-project-name containing the basic files necessary for a Svelte project.

2. Step into the my-project-name folder and install the dependencies:

   cd my-project-name
   npm install

3. Once the dependencies are installed, you can start the development server:

   npm run dev

With the Svelte project up and running, let’s look at what we need to do to set up Tailwind CSS.

Setting up Tailwind CSS

Tailwind CSS has...

Theming Svelte components with CSS custom properties

Let’s take a quick knowledge check on CSS custom properties:

• You define CSS custom properties like any other CSS properties, except that the name of the CSS custom property starts with two dashes:

  --text-color: blue;

• To reference the CSS custom property, use the var() function:

  color: var(--text-color);

• CSS custom properties cascade like any other CSS properties:

  .foo {
    --text-color: blue;
  }
  div {
    --text-color: red;
  }

  The value of the --text-color CSS custom property for <div> elements is red, except for the <div> elements with a class named foo.

• The value of CSS custom properties is inherited from their parent:

  <div>
    <span />
  </div>

  If the value of --text-color for <div> in the preceding example is red, then without other CSS rules applied to <span>, the value of --text-color for <span> is also red.

Defining CSS custom properties...

Summary

In this chapter, we went through six different methods to style a Svelte component. So, do you know which method you are going to use to style your Svelte component? You should now know to choose the approach that is best suited for the scenario.

We then saw how to use Tailwind CSS in a Svelte project. It takes some initial setup to get Tailwind up and running at the beginning, but CSS frameworks such as Tailwind CSS usually come with predefined CSS classes, and most of the time, you use a class attribute or the class: directive to apply them.

Finally, we covered how we can use the CSS custom property to theme Svelte components and how to allow component users to customize the style of a component. You can now create and share Svelte components while allowing others to have different styling than the default styles that you’ve created.

In the next chapter, we will look at how to manage the props and states of a Svelte component.