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.

Warning

This theme requires a Starlight version of at least ^0.28.0 - due to the use of the i18next localization system in several components. An Astro version equal or higher than ^4.14.0 is also required.

New features for this plugin will only be added to recent versions of Starlight/Astro, backwards compatibility is not guaranteed. Refer to the CHANGELOG for more information about specific changes. ::

Installation

1. The Starlight Obsidian theme is a Starlight plugin that you can install using your favorite package manager:
   npm

   npm i starlight-theme-obsidian

   yarn

   yarn add starlight-theme-obsidian

   pnpm

   pnpm add 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.

Note

If you want to disable the graph and backlinks components which are added by default, you can do so by applying the following settings:

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({
                   backlinks: false,
                   graph: false
            })],
            title: 'My Docs',
        }),
    ],
})