A modern, elegant Starlight theme with enhanced UX and beautiful animations
- Light/Dark Mode: Seamless theme switching with smooth transitions
- Gradient Effects: Subtle gradients and visual depth throughout
- Glass Morphism: Beautiful glass effects and blur backgrounds
- Smooth Animations: 60fps transitions and micro-interactions
- Responsive Design: Perfect experience across all devices
- Accessibility: WCAG compliant with screen reader support
- Performance: Optimized CSS with GPU acceleration
- Header: Sticky navigation with glass effects and gradient backgrounds
- ThemeSelect: Animated theme toggle with rotation effects
- Navigation: Hover effects, active states, and badge system
- Search: Modern modal with blur backdrop and enhanced UX
- Sidebar: Smooth animations and improved navigation
- Mobile Menu: Touch-friendly interface with hamburger animations
npm install @pelagornis/page// astro.config.mjs
import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";
import pagePlugin from "@pelagornis/page";
export default defineConfig({
integrations: [
starlight({
plugins: [pagePlugin()],
title: "My Documentation",
// Add your Starlight configuration here
}),
],
});/* src/styles/global.css */
@import "@pelagornis/page/styles";The theme uses a modern HSL-based color system for easy customization:
:root {
--page-primary: hsl(222.2, 84%, 4.9%);
--page-accent: hsl(210, 40%, 92%);
--page-background: hsl(0, 0%, 100%);
--page-foreground: hsl(222.2, 84%, 4.9%);
/* More color variables available */
}pagePlugin({
navigation: [
{ href: "/guides/", label: "Guides" },
{ href: "/api/", label: "API", badge: "New" },
],
// Customize theme colors, animations, and more
});| Component | Features |
|---|---|
| Header | Sticky navigation, glass effects, gradient backgrounds |
| Hero | Animated backgrounds, floating elements, gradient text |
| Sidebar | Modern styling, hover effects, animated expansion |
| Footer | Transparent design, link hover effects, social icons |
| ThemeSelect | Rotation animations, glass effects, smooth transitions |
| Search | Blur backgrounds, modern modal, enhanced input fields |
| Navigation | Hover effects, active states, badge system |
| SocialIcons | Platform colors, stagger animations, 3D effects |
| MobileMenu | Hamburger animations, touch-friendly interface |
| TwoColumnContent | Enhanced TOC, sticky sidebar, scroll tracking |
| MarkdownContent | Typography improvements, code styling, table design |
- Colors: HSL-based modern palette with light/dark mode support
- Typography: Optimized font sizes, line-heights, and spacing
- Animations: 60fps smooth transitions and micro-interactions
- Gradients: Consistent brand gradient system
- Shadows: Multi-layered shadow system for depth
- Spacing: Consistent spacing scale using CSS custom properties
- Accessibility: WCAG 2.1 AA compliance, screen reader support
- Performance: Optimized CSS, GPU acceleration, lazy loading
- Responsive: Mobile-first design with fluid typography
- Dark Mode: Perfect dark mode with system preference detection
- Internationalization: Multi-language support with RTL compatibility
- Enhanced Sidebar: Improved navigation with better visual hierarchy
- Language Select: Refined language switcher with better UX
- Mobile Experience: Optimized mobile menu and touch interactions
- Performance: Reduced bundle size and improved loading times
- Accessibility: Enhanced keyboard navigation and screen reader support
- TypeScript: Full TypeScript support with improved type safety
- Build Optimization: Faster build times and smaller output
- CSS Architecture: Better organized styles with improved maintainability
- Component Structure: Cleaner component architecture and better reusability
Contributions are welcome! Please feel free to submit a Pull Request.
starlight-theme-page is under MIT license. See the LICENSE file for more info.