Astro Theme Switcher

A production-ready, token-based themeable design system for Astro. Build beautiful websites with runtime theme switching, semantic design tokens, and a comprehensive component library. Perfect for developers and agencies who need a flexible, extensible theming solution.

Features

  • Token-Based Theme System - Semantic design tokens with runtime theme switching
  • Light/Dark Mode - Separate mode toggle for each color theme
  • Premium Themes - Aurora and Obsidian themes with custom typography
  • Component Library - Production-ready, theme-aware UI components (Button, Card, Alert, Badge, Input, Pricing Table)
  • Astro - Lightning-fast static site generation
  • React - Interactive components (ThemeSwitcher, ModeToggle)
  • Tailwind CSS v4 - Fully integrated with semantic tokens
  • Framer Motion - Smooth scroll reveal animations with spring physics
  • Astro Icons - Beautiful icon component library with Tabler icon set
  • MDX - Write JSX in your Markdown documents
  • Tailwind Typography - Beautiful typography styles for markdown content

Getting Started

Installation

  1. Clone the repository 
    git clone https://github.com/jonnysmillie/astro-theme-switcher.git
cd astro-theme-switcher
  2. Install dependencies 
    npm install
  3. Start the development server 
    npm run dev
  4. Open your browser - Navigate to http://localhost:4321

Available Scripts

  • npm install - Installs dependencies
  • npm run dev - Starts local dev server at localhost:4321
  • npm run build - Build your production site to ./dist/
  • npm run preview - Preview your build locally
  • npm run astro - Run CLI commands like astro add, astro check

Styling

Tailwind CSS

This project uses Tailwind CSS v4 for styling. All components use Tailwind utility classes.

Global Styles:

  • Located in src/styles/global.css
  • Imports Tailwind CSS
  • Includes Tailwind Typography plugin for markdown styling

Configuration:

  • tailwind.config.mjs - Tailwind configuration with Typography plugin

Sass

Sass is installed and ready to use. You can use Sass in component <style> blocks. See src/components/SassExample.astro for a complete example.

Components

ScrollReveal

A React component using Framer Motion for scroll-triggered animations with the following props:

  • delay - Animation delay in seconds (default: 0)
  • direction - Animation direction: "up" | "down" | "left" | "right" (default: "up")
  • distance - Distance to travel in pixels (default: 50)
  • scale - Enable scale animation (default: false)

Icons

Use Tabler icons with astro-icon. Browse available icons at Tabler Icons.