Installation

In your Svelte application, use your favorite package manager to install sterling-svelte.

npm install @geoffcox/sterling-svelte

yarn add @geoffcox/sterling-svelte

Add sterling-svelte components. You can import each component from their .svelte file or multiple at once from the library root.

<script>
  import Button from '@geoffcox/sterling-svelte/Button.svelte';
  import { Checkbox } from '@geoffcox/sterling-svelte';
</script>

<div>
  <Button>Hello sterling-svelte</Button>
  <Checkbox>Ready</Checkbox>
</div>

Apply the Sterling theme (optional)

If you don't have your own theme for sterling-svelte, it is recommended to use the Sterling theme.

Add the sterling-svelte-themes package

npm install @geoffcox/sterling-svelte-themes

yarn add @geoffcox/sterling-svelte-themes

In the root of your application (+layout.svelte), import the Sterling theme.

import '@geoffcox/sterling-svelte-themes/sterling.css';

Set either light-mode or dark-mode at the <html> or <body> root.

<html class="light-mode"></html>

Automatic light and dark modes (optional)

Import the applyLightDarkMode action in the script section.

import { applyLightDarkMode } from '@geoffcox/sterling-svelte';

// Just like this site does, you can provide UI to toggle this between modes.
let mode = $state('auto');

Use applyLightDark mode on the top-level div of your application.

Recommended: Specify atDocumentRoot: true to apply the class at the root of the HTML document. This ensure styles are applied to floating UI appending to the <body> children.

<div use:applyLightDarkMode={{atDocumentRoot: true, mode}}>
  ...
</div>

How to use the Sterling theme in a REPL

If you are in the Svelte playground or another project where you cannot import CSS from Svelte components, you can use this alternative:

<svelte:head>
  <link href="https://unpkg.com/@geoffcox/sterling-svelte-themes/css/sterling.css" rel="stylesheet">
</svelte:head>