Skip to content
Starlight Obsidian Theme

Getting Started

A Starlight theme inspired by the style of Obsidian Publish websites. This project is in no way affiliated with Obsidian.

Various examples are provided to showcase changes made by the theme.

Prerequisites

You will need to have a Starlight website set up. If you don’t have one yet, you can follow the “Getting Started” guide in the Starlight docs to create one.

Installation

  1. The Starlight Obsidian theme is a Starlight plugin that you can install using your favorite package manager:
    Terminal window
    npm i starlight-theme-obsidian
  2. Configure the plugin in your Starlight configuration in the astro.config.mjs file.
    astro.config.mjs
    import starlight from '@astrojs/starlight'
    import { defineConfig } from 'astro/config'
    import starlightThemeObsidian from 'starlight-theme-obsidian'
    

    export default defineConfig({
        integrations: [
            starlight({
                plugins: [starlightThemeObsidian()],
                title: 'My Docs',
            }),
        ],
    })
  3. Add the Obsidian Theme content schema to your pages to enable type checking on the page’s frontmatter, you will need to define the src/content/config.ts file if it doesn’t exist yet.
    content/docs/config.ts
      import { docsSchema } from '@astrojs/starlight/schema';
      import { defineCollection } from 'astro:content';
      import { pageThemeObsidianSchema } from 'starlight-theme-obsidian/schema';
    

      export const collections = {
        docs: defineCollection({
          schema: docsSchema({
            extend: pageThemeObsidianSchema
          })
        })
      };
  4. Start the development server to preview the theme in action.

That’s it! You should now see the Starlight Obsidian theme applied to your Starlight website.

You can now further configure the theme and the graph component in the sidebar by following the configuration guide.