Gentle Themer 🎨

A lightweight, intelligent theming widget that automatically adapts websites with beautiful fonts and color palettes. Works seamlessly with both Tailwind CSS and vanilla CSS sites.

🌟 Live Demo

Try the interactive demo →

See Gentle Themer in action with a full Tailwind CSS demo page. Use the widget controls to instantly transform the entire page with beautiful themes!

✨ Features

• 🔄 Universal Compatibility: Automatically detects and works with both Tailwind CSS and vanilla CSS
• 🧠 Intelligent Analysis: Smart element detection with contrast verification
• 🎨 Beautiful Palettes: 10+ curated color schemes with light/dark variants
• 🔤 Premium Fonts: 16+ Google Fonts across sans-serif, serif, and display categories
• ⚡ Zero Configuration: Drop in one script tag and you're ready to go
• 🎛️ User Controls: Auto-cycle, manual randomization, and reset options
• 📱 Responsive Widget: Clean, accessible floating widget interface

🚀 Quick Start

CDN (Recommended)

<!-- Include both config and main script -->
<script src="https://stylespinjs.com/cdn/gentle-themer.min.js"></script>

Self-Hosted

<!-- Include config first, then main script -->
<script src="config.js"></script>
<script src="gentle-themer.js"></script>

NPM Installation

npm install gentle-themer

Download Files

Download the latest release from the GitHub releases page or clone this repository.

That's it! The widget will automatically appear in the bottom-right corner of your website.

🎯 How It Works

1. Detection: Automatically detects if your site uses Tailwind CSS
2. Analysis: Intelligently identifies text, background, and action elements
3. Application: Applies themes using appropriate method (Tailwind classes or CSS)
4. Verification: Ensures proper contrast ratios for accessibility

🎨 Available Themes

Light Themes

• Slate Gray
• Ocean Blue
• Fresh Green
• Royal Purple
• Sunset Orange
• Rose Pink
• Electric Cyan
• Golden Amber
• Ocean Teal
• Deep Indigo

Dark Themes

• Slate Dark
• Blue Dark
• Green Dark

🔤 Included Fonts

Sans-Serif

• Inter, Poppins, Manrope, Public Sans, Lato, Montserrat, Work Sans, Rubik, DM Sans

Serif

• Lora, Playfair Display, Merriweather

Display

• Oswald, Bebas Neue

Monospace

• JetBrains Mono

🛠️ Development

Build Commands

# Install dependencies
npm install

# Build CDN bundle
npm run build-cdn

# Create minified version
npm run build

# Serve locally for testing
npm run serve

File Structure

gentle-themer/
├── dist/
│   ├── gentle-themer.min.js      # Production minified
│   └── gentle-themer.bundle.js   # Development bundle
├── config.js                     # Configuration file
├── gentle-themer.js              # Main script
├── landing.html                  # Demo page
├── package.json                  # Package configuration
└── README.md                     # Documentation

🎛️ Widget Controls

• 🎲 Random: Apply a random theme combination
• ▶️ Auto-Cycle: Automatically cycle through themes (3.5s intervals)
• 🔄 Rescan: Re-analyze page and revert to original state

💻 Browser Support

• Chrome/Chromium 88+
• Firefox 85+
• Safari 14+
• Edge 88+

🎯 Use Cases

• Agencies: Quickly demonstrate different design directions to clients
• Developers: Test design system flexibility and contrast ratios
• Content Creators: Add visual variety to presentations and demos
• Accessibility Testing: Verify readability across different color schemes

🔧 Configuration

The widget uses the configuration defined in config.js. You can customize:

• Available fonts and their properties
• Color palettes for both Tailwind and CSS modes
• Auto-cycle timing interval
• Tailwind class mappings

📝 License

MIT License - feel free to use in personal and commercial projects.

🤝 Contributing

Contributions are welcome! This is a portfolio project and I'd love to see it grow with community input.

How to Contribute

1. Fork this repository
2. Clone your fork locally
3. Create a feature branch (git checkout -b feature/amazing-feature)
4. Make your changes
5. Test your changes with the demo page
6. Commit your changes (git commit -m 'Add amazing feature')
7. Push to your branch (git push origin feature/amazing-feature)
8. Open a Pull Request

Ideas for Contributions

• 🎨 New color palettes
• 🔤 Additional font combinations
• 🌍 Better international font support
• 📱 Mobile widget improvements
• ⚡ Performance optimizations
• 🎯 Framework integrations (React, Vue, etc.)
• 📚 Documentation improvements
• 🐛 Bug fixes

All contributions, big or small, are appreciated!

📞 Support

• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions
• 📚 Documentation: stylespinjs.com
• 📧 Email: alex@stylespinjs.com

🎯 Portfolio Project

This is a portfolio project showcasing:

• Advanced JavaScript DOM manipulation
• CSS-in-JS and Tailwind CSS integration
• Responsive widget design
• Accessibility considerations
• Modern build tools and deployment

Feel free to explore the code, use it in your projects, and contribute improvements!

---

Made with ❤️ for the web development community

Perfect for agencies, developers, content creators, and anyone who needs quick, beautiful theming options.