Skip to content

Getting Started

The Starlight Obsidian Theme is 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 how the theme will display content.

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

  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.