Getting Started

Starlight Theme Page is a modern Starlight theme inspired by starlight-theme-black.

Quick Start

📦 npm 🚀 pnpm 🧶 Yarn

npm install @pelagornis/page

pnpm add @pelagornis/page

yarn add @pelagornis/page

2. Astro Configuration

Add the plugin to your astro.config.mjs file:

import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";
import pagePlugin from "@pelagornis/page";

export default defineConfig({
  integrations: [
    starlight({
      plugins: [pagePlugin()],
    }),
  ],
});

3. Add Styles

Add styles to your src/styles/global.css file:

@import "@pelagornis/page/styles";

Key Features

🎨 Modern Design

Clean and intuitive interface providing the best user experience

🌙 Dark Mode Support

Automatic theme switching and perfect dark mode support

📱 Responsive

Perfect user experience across all devices from mobile to desktop

Customization

Color Changes

You can easily change theme colors using CSS variables:

:root {
  --page-accent: hsl(220, 100%, 50%);
  --page-accent-hover: hsl(220, 100%, 40%);
  --page-bg: hsl(0, 0%, 100%);
  --page-text: hsl(0, 0%, 10%);
}

Navigation Links

You can configure navigation links in the plugin settings:

pagePlugin({
  navLinks: [
    {
      label: "Blog",
      link: "/blog/",
      badge: "New",
    },
  ],
});

Component Examples

Code Blocks

npm install @pelagornis/page

Next Steps

Your theme is now set up! Try clicking the theme toggle button in the header or hover over the logo.