Installation

Installing Mod in a SvelteKit App

How to install Mod for use in a SvelteKit app.

To use Mod with SvelteKit, you will want to decide how you want Mod's files loaded in your app. There are two options:

Global

This will load Mod's CSS and JavaScript globally in your app for all pages.

Global CSS and ESM JavaScript

This will load Mod's CSS globally and set up your JavaScript to load via ESM. This is the recommended approach for SvelteKit sites.

Using Global CSS and JavaScript

To start installing Mod in your app, first, you'll want to copy the required Mod files into your app. Use the table below to know where files should go:

Paths for Plus Users

If you've purchased a copy of Mod Plus, you will want to use the plus file variants (e.g., mod-light-plus.min.css) below.

Type	File in mod(-plus).zip	Target path in app	What is it?
File	mod-light(-plus).min.css	static/css/mod-light(-plus).min.css	The light-themed version of Mod.
File	mod-dark(-plus).min.css	static/css/mod-dark(-plus).min.css	The dark-themed version of Mod.
File	mod(-plus).iife.min.js	static/js/mod(-plus).iife.min.js	The IIFE version of the JavaScript for Mod's interactive components. Use this if you want to load Mod's JavaScript globally in your app.
File	fonts/lucide.woff2	static/fonts/lucide.woff2	The icon font used by Mod, Lucide.
File	fonts/mod-brand-icons.woff2	static/fonts/mod-brand-icons.woff2	The icon font for brand logos used by Mod.

Once you have the files copied over to your app, next, we want to add a hook that will give us access to the theme cookie in our app:

src/hooks.server.js

export const handle = async ({ event, resolve }) => {
  const theme = event.cookies.get('theme') || 'light';
  return await resolve(event, {
    transformPageChunk: ({ html }) => html.replace(/%theme%/g, theme) // Note the global flag
  });
};

Above, we use this hook function handle to access the inbound request event. From it, we get our cookie via event.cookies.get(), falling back to a default of light if our theme cookie is undefined.

Next, we return a call to the resolve() method passed to our hook, passing the event as the first argument and then options object with a transformPageChunk method that receives the HTML for the current page being rendered. Inside of that method, we replace any match on the text %theme% and then replace it with the value of our theme variable we defined above.

After you've added the cookie hook, next, you'll want to update your src/app.html file to include Mod's imports:

src/app.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">    
		<link rel="stylesheet" href="/css/mod-%theme%(-plus).min.css">
		<script src="/js/mod(-plus).iife.min.js"></script>
		%sveltekit.head%
	</head>
	<body data-mod-theme="%theme%" data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>
	</body>
</html>

Above, first, we include Mod's font, Inter, via a Google CDN link (optional and can be replaced with static assets in the app).

After this, depending on the theme we want to use (light or dark), we load Mod's CSS file conditionally based on the value of the theme variable we set in our src/hooks.server.js file. We use the text %theme% to match the expectation of our hook's transformPageChunk method. In the event that the theme cookie is not set, we fall back to light as a default.

After this, we load Mod's JavaScript file (here, using the IIFE variant to enable global JavaScript).

Finally, on our body tag, we set the data-mod-theme attribute to the value of our %theme% variable we defined in our hook.

Once this is complete, Mod should be loaded globally in your SvelteKit app. If you have a page that uses Mod components that rely on JavaScript, you can include a <script> tag in your page template:

src/pages/index.astro

<div class="mod-command-palette">
  <!-- HTML for Mod's command palette component... -->
</div>

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    if (window.mod) {
      window.mod.command_palette();
    }
  });
</script>

Inside of the <script> tag, we import the onMount function from svelte. Next, we call this function, and inside, we check to see if window.mod is defined, and if it is, call to the window.mod.command_palettte(); method.

Using Global CSS and ESM JavaScript