Obsessed with keyboards? Colorcap is a minimalist keycap color editor where you can design your cap, text and board with your favorite color palette. Let's type with colors!
🖥️ Edit cap, text and board colors
🔖 Select keys based on functionality
🎨 Add custom colors
🗑️ Restart keyboard colors
📷 Download keyboard image
⌨️ Change keyboard size
✏️ Text size and alignment option
☀️ Light/dark mode toggle
Click here https://colorcap.netlify.app/ to see it live. Have fun! I would love to hear your comments.
- Vue.js 3 (JavaScript Framework)
- Tailwind CSS 2 (CSS Framework)
- Vuex 4 (State Management)
- Font Awesome (Icons)
- DOM to Image
The main purpose of creating this app is to familiarize myself with the updates of Vue.js. Sadly, there's no compatible Vuetify for the new Vue.js yet so I went with the second best, Tailwind CSS for the design.
I also learned about:
- Difference between Composition API and Options API
- Vue.js 3 and Tailwind CSS compatibility
- Vue.js 3 and Vuex 4 compatibility
- Vuex 4 and Composition API compatibility
P.S. I had a hard time deploying it to Netlify because of some Gitlab errors so I reuploaded it with another repository in Github.
This is how it looks upon clicking the link and toggling it to dark mode:
The developer is still fixing some interface errors from live demo, please hang on.