Skip to content

luisFilipePT/shadcn-ui-theme-explorer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

All Contributors

shadcn/ui Theme Explorer released under the MIT license.

All Contributors

PRs welcome! code style: prettier

image

shadcn/ui Theme Explorer

Color the web with beautifully designed themes

Inspired by @peduarte's work on Raycast Theme Explorer, a collection of themes designed to complement shadcn/ui beautifully crafted components.

What’s In This Document

Contributing

This is a Next.js 13 app. If you're unfamiliar with it, check out the Next.js Documentation.

Download the repo and run the development server:

npm run dev

🎨 Upload a theme

  1. Add your theme info to the themes file.
  2. Create a file inside the folder styles/themes with the name of the theme you added in the previous step (if it contains spaces, replace them by -).
  3. Same format as the following example:
.theme-{theme-name}.light {
  --background: 220, 16%, 96%;
  --foreground: 222, 20%, 16%;

  --muted: 215, 14%, 80%;
  --muted-foreground: 222, 20%, 16%;

  --popover: 220, 16%, 96%;
  --popover-foreground: 222, 20%, 16%;

  --border: 222, 20%, 70%;
  --input: 222, 20%, 70%;

  --card: 220, 16%, 96%;
  --card-foreground: 222, 20%, 16%;

  --primary: 222, 20%, 70%;
  --primary-foreground: 220, 16%, 96%;

  --secondary: 215, 14%, 80%;
  --secondary-foreground: 222, 20%, 16%;

  --accent: 215, 14%, 80%;
  --accent-foreground: 222, 20%, 16%;

  --destructive: 0, 80%, 50%;
  --destructive-foreground: 222, 20%, 16%;

  --ring: 222, 20%, 70%;
}

.theme-{theme-name}.dark {
  --background: 220, 16%, 16%;
  --foreground: 222, 20%, 96%;

  --muted: 215, 14%, 25%;
  --muted-foreground: 222, 20%, 96%;

  --popover: 220, 16%, 16%;
  --popover-foreground: 222, 20%, 96%;

  --border: 222, 20%, 40%;
  --input: 222, 20%, 40%;

  --card: 220, 16%, 16%;
  --card-foreground: 222, 20%, 96%;

  --primary: 222, 20%, 40%;
  --primary-foreground: 220, 16%, 16%;

  --secondary: 215, 14%, 25%;
  --secondary-foreground: 222, 20%, 96%;

  --accent: 215, 14%, 25%;
  --accent-foreground: 222, 20%, 96%;

  --destructive: 0, 80%, 50%;
  --destructive-foreground: 222, 20%, 96%;

  --ring: 222, 20%, 40%;
}
  1. Import the file you just created in the global.css file.

❗ Code of Conduct

We expect everyone to abide by our Code of Conduct. Please read it. 🤝

📝 License

Licensed under the MIT License.

💜 Thanks

Thanks to everyone contributing in any manner to this repo and we extend this thanks to everyone working on Open Source.

Sharing is Caring

Contributors ✨

Thanks goes to these wonderful people (emoji key):

ThankGod Eboreime
ThankGod Eboreime

💻 🚧
Daniel Sousa
Daniel Sousa

💻 🎨
Luis Filipe
Luis Filipe

💻 📖 🎨 🤔 🚧 👀
Joana Santos
Joana Santos

💻 📖 🎨 🤔 🚧 👀

This project follows the all-contributors specification. Contributions of any kind are welcome!