1. Default Layout
  2. Installation

Default Layout

Installation

Want something that just "looks good?" The next steps will get the default layout set up for you.

Quick Installation

The quick install option will offer to scaffold the default layout for you. Feel free to skip to the next section if you've already set up your application.

Manual Installation

  1. Add Color Scheme Script

    Add the following script inside the <head> tag of your app.html file.

    src/app.html 
            <head>
  <!-- ... -->
  <script>
    const key = 'svelteness::color-scheme';
    const scheme = localStorage[key];
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (scheme === 'dark' || (scheme !== 'light' && prefersDark)) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  </script>
</head>

  2. Copy Font Files

    Copy the theme font files to your lib folder.

    terminal 
            cp -R node_modules/@svelteness/kit-docs/client/fonts src/fonts

  3. Import Assets

    Import theme polyfills and styles into your layout file.

    routes/__layout-kit-docs.svelte 
            <script>
  import '@svelteness/kit-docs/client/polyfills/index.js';
  import '@svelteness/kit-docs/client/styles/normalize.css';
  import '@svelteness/kit-docs/client/styles/fonts.css';
  import '@svelteness/kit-docs/client/styles/theme.css';
  import '@svelteness/kit-docs/client/styles/vars.css';
</script>

  4. Add Default Layout

    Import KitDocsLayout and add it to your layout markup.

    routes/__layout-kit-docs.svelte 
            <script>
  import { KitDocsLayout } from '@svelteness/kit-docs';

  // ...

  /** @type {import('@svelteness/kit-docs').NavbarConfig} */
  const navbar = {
    links: [{ title: 'Documentation', slug: '/docs', match: /\/docs/ }],
  };
</script>

<KitDocs>
  <KitDocsLayout {navbar} {sidebar}>
    <slot />
  </KitDocsLayout>
</KitDocs>

  5. Set Brand Colors

    Set your brand colors using RGB. You can play around in the browser to find what works.

    routes/docs/__layout.svelte 
            <style>
  :global(:root) {
    --kd-color-brand: 255 64 0;
  }

  :global(:root.dark) {
    --kd-color-brand: 255 83 26;
  }
</style>

Tailwind

The default layout is built with Tailwind. If you're also using Tailwind in your project, we recommend removing certain CSS files so you don't end up with duplicate utility classes.

  1. First, remove the following CSS imports from your layout file:
routes/__layout-kit-docs.svelte 
        - import '@svelteness/kit-docs/client/styles/normalize.css';
- import '@svelteness/kit-docs/client/styles/theme.css';
  1. Next, add our client files to your Tailwind contents config:
tailwind.config.cjs 
        module.exports = {
  content: ['./src/**/*.{html,svelte}', './node_modules/@svelteness/kit-docs/client/**/*.svelte'],
};
  1. Finally, copy over our Tailwind config file from GitHub and adjust values as desired. Ignore the corePlugins and fontFamily settings.
Previous <- Quickstart
Next Configuration ->