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. View the demo.
✨ 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
🚀 Astro - Lightning-fast static site generation
⚛️ React - Interactive components (ThemeSwitcher, ModeToggle)
🎨 Tailwind CSS v4 - Fully integrated with semantic tokens
📝 MDX - Write JSX in your Markdown documents
🎯 Astro Icons - Beautiful icon component library with Tabler icon set
📖 Tailwind Typography - Beautiful typography styles for markdown content
🛠️ Tech Stack
Integrations
@astrojs/react** ^4.4.2 - React integration for Astro
@astrojs/mdx** ^4.3.13 - MDX support for writing JSX in Markdown
@astrojs/netlify** ^6.6.4 - Netlify adapter for deployment
@astrojs/sitemap** ^3.3.2 - Automatic sitemap generation
astro-icon** ^1.1.5 - Icon component library
Styling
tailwindcss** ^4.1.18 - Utility-first CSS framework
@tailwindcss/vite** ^4.1.18 - Tailwind CSS Vite plugin
@tailwindcss/typography** ^0.5.19 - Typography plugin for beautiful markdown styling
sass** ^1.97.2 - CSS preprocessor
UI & Animation
framer-motion** ^12.24.7 - Production-ready motion library for React
react** ^19.2.3 - UI library
react-dom** ^19.2.3 - React DOM renderer
Icons
@iconify-json/tabler** ^1.2.26 - Tabler icon set for astro-icon
📁 Project Structure
/
├── public/
│ └── favicon.svg
├── src/
│ ├── assets/ # Static assets (images, SVGs)
│ ├── components/ # Reusable Astro components
│ │ ├── CTA.astro # Call-to-action section
│ │ ├── Features.astro # Features showcase
│ │ ├── Footer.astro # Site footer
│ │ ├── Header.astro # Site header/navigation
│ │ ├── Hero.astro # Hero section
│ │ ├── ScrollReveal.tsx # Scroll animation component
│ │ └── SassExample.astro # Sass usage example
│ ├── layouts/
│ │ └── Layout.astro # Base page layout
│ ├── pages/ # Routes (file-based routing)
│ │ ├── index.astro # Homepage
│ │ ├── about.astro # About page
│ │ ├── blog/ # Blog pages (Content Collections)
│ │ ├── components.astro # Component showcase
│ │ ├── contact.astro # Contact page
│ │ ├── features.astro # Features page
│ │ ├── landing.astro # Landing page template
│ │ ├── theme.astro # Theme documentation
│ │ └── example.mdx # MDX example page
│ └── styles/
│ ├── global.css # Global styles & Tailwind imports
│ └── themes.css # Theme CSS variables
├── astro.config.mjs # Astro configuration
├── tailwind.config.mjs # Tailwind configuration
└── package.json
🚀 Getting Started
Prerequisites
Node.js 18+
npm, pnpm, or yarn
Installation
Clone the repository
git clone https://github.com/jonnysmillie/astro-theme-switcher.git
cd astro-theme-switcher
Install dependencies
npm install
Start the development server
npm run dev
Open your browser
Navigate to http://localhost:4321