@hashtagcms/themes

Beautiful, customizable themes for HashtagCMS with shared core logic

This package contains frontend themes and core JavaScript logic for the HashtagCMS ecosystem. Switch between themes while sharing the same underlying functionality.

✨ Features

• 🎨 Multiple Themes - Choose from Basic or Elegant themes
• 🔧 Customizable - Override variables and extend styles
• 📦 Modular - Use source files or pre-compiled assets
• 🚀 Framework Agnostic - Works with any JavaScript framework
• 📱 Responsive - Mobile-first design
• ♿ Accessible - WCAG compliant

📦 Quick Start

Installation

npm install @hashtagcms/themes

Basic Usage

Import in your SCSS:

@import "~@hashtagcms/themes/src/themes/basic/sass/app";

Import in your JavaScript:

import '@hashtagcms/themes/src/themes/basic/js/app';

Using Pre-compiled Assets

<link rel="stylesheet" href="node_modules/@hashtagcms/themes/dist/themes/basic/app.css">
<script src="node_modules/@hashtagcms/themes/dist/themes/basic/app.js"></script>

💻 CLI Usage

You can interactive copy assets (fonts, images, vendor files) from a theme to your project using the CLI.

# Run the interactive setup
npx @hashtagcms/themes init

The CLI will ask you:

1. Which theme you want to install
2. Where to copy the assets (default: ./resources/assets/fe)

The assets will be copied to <destination>/<theme-name>/.

🎨 Available Themes

Basic Theme

Clean, traditional design perfect for content-focused websites.

• ✅ FontAwesome icons
• ✅ Bootstrap 5 styling
• ✅ Neutral color palette
• ✅ Subscribe form component

Elegant Theme

Modern, sophisticated design with smooth animations.

• ✅ Glass morphism effects
• ✅ Parallax scrolling
• ✅ Gradient text and buttons
• ✅ Card animations
• ✅ Dark color scheme

📚 Documentation

• Getting Started - Installation and basic usage
• Creating Themes - Step-by-step guide to create custom themes
• Theme Structure - Package organization and architecture
• API Reference - Complete API documentation
• FAQ - Frequently asked questions

🚀 Creating a Custom Theme

# 1. Create theme directory
mkdir -p src/themes/my-theme/{js,sass,img}

# 2. Create entry files
touch src/themes/my-theme/js/app.js
touch src/themes/my-theme/sass/app.scss

# 3. Build
npm run build

See the Creating Themes Guide for detailed instructions.

🛠️ Development

Build Commands

# Development build
npm run dev

# Production build
npm run build

# Watch mode
npm run watch

Project Structure

@hashtagcms/themes/
├── src/
│   ├── core/          # Shared JavaScript logic
│   └── themes/        # Individual themes
│       ├── basic/
│       └── elegant/
├── dist/              # Compiled assets
├── docs/              # Documentation
└── package.json

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

How to Contribute

1. Fork the repository
2. Create your theme or feature
3. Test thoroughly
4. Submit a pull request

📄 License

MIT © HashtagCMS

🆘 Support

• 📖 Documentation
• 💬 GitHub Discussions
• 🐛 Report Issues

🌟 Showcase

Using @hashtagcms/themes in your project? We'd love to feature it! Open an issue to share your work.

Made with ❤️ by the HashtagCMS team