Slack Themes 🎨

A modern web application for browsing, sharing, and generating Slack themes. Built with Next.js, React, TypeScript, and Notion.

Inspired by Slack Themes.

Features

• Browse and search Slack themes
• Generate themes from workspace logos
• Live theme preview with Slack interface simulation
• Responsive design with mobile support
• Keyboard navigation
• Quick theme copying and application

Getting Started

Prerequisites

• Node.js 22.x or higher (lts/jod is recommended via nvm)
• npm, yarn, or pnpm

Installation

1. Clone the repository.

   gh repo clone michaelfromorg/more-slackthemes
   cd slack-themes

2. Install dependencies.

   npm install

3. Start the development server.

   npm run dev

4. Open http://localhost:3000 in your browser.

Project Structure

Within src/.

├── app/                   # Next.js app directory
├── components/
│   ├── layout/            # Layout components
│   ├── themes/            # Theme-related components
│   └── ui/                # shadcn/ui components
├── lib/                   # Utility functions
├── store/                 # State management
└── public/                # Static assets

Technologies

• Language: TypeScript
• Framework: Next.js
• Styling: Tailwind CSS
• Components: shadcn/ui
• State: Zustand
• Colors: chroma.js

Contributing

1. Fork the repository
2. Create your feature branch: git checkout -b feature/your-feature
3. Commit your changes: git commit -m 'A description of the changes'
4. Push to the branch: git push origin feature/your-feature
5. Open a pull request

Development

Building for Production

npm run build

The project will be built to the out directory for static deployment.

Deployment

This is a static site that can be deployed to any static hosting service like Vercel, Netlify, or GitHub Pages. The current deployment uses GitHub Pages.

Need Help?

If you have questions or run into issues, please check the Issues page or create a new issue.

Author

• @michaelfromyeg

---

"Slack Themes" is not affiliated with Slack in any way, shape, or form.