https://github.com/pyncz/themage

🧙‍♂️ Generate UI theme by image
https://github.com/pyncz/themage

colors nuxt tailwindcss themes vue

Last synced: about 7 hours ago
JSON representation

🧙‍♂️ Generate UI theme by image

• Host: GitHub
• URL: https://github.com/pyncz/themage
• Owner: pyncz
• Created: 2023-03-27T18:51:44.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-20T10:50:37.000Z (about 1 year ago)
• Last Synced: 2024-04-14T10:37:09.871Z (7 months ago)
• Topics: colors, nuxt, tailwindcss, themes, vue
• Language: Vue
• Homepage: https://themage.vercel.app
• Size: 2.23 MB
• Stars: 52
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# themage

🧙‍♂️ Generate UI theme by image

![themage cover](./public/img/cover.jpg)

A little showcase app for generating UI themes by an image.

Select or drop an image, adjust the theme parameters, get theme variables.

### Tech stack

- ![TypeScript](https://img.shields.io/badge/TypeScript-%232f74c0.svg?&logo=typescript&logoColor=white)

- [![Vue 3](https://img.shields.io/badge/vue%203-%233fb27f.svg?logo=vue.js&logoColor=white)](https://vuejs.org)

- [![Nuxt 3](https://img.shields.io/badge/nuxt%203-%2300c58e.svg?logo=nuxt.js&logoColor=white)](https://v3.nuxtjs.org)

- [![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS%20-%2357a7e1.svg?logo=tailwindcss&logoColor=white)](https://tailwindcss.com)

- [VueUse](https://vueuse.org)

- Icons: [`ionicons`](https://ionic.io/ionicons)

- Validation: [`vuelidate`](https://vuelidate-next.netlify.app)

Under the hood, palette colors are extracted with [`colorthief`](https://lokeshdhakar.com/projects/color-thief) and the themes are generated through a bunch of [`chroma.js`](https://www.vis4.net/chromajs) operations.