anhthang / keycolor-preview

Keyboard, keycap color preview and customization for mechanical keyboard lovers

KeyColor - Keyboard & Keycap Color Preview

Keyboard information, layouts, styles are based on the data from the QMK Configurator with some of my modifications.

🥳 Why I'm here

This project popped up in my mind when I ordered Canoe Gen 2 and wanted to see what it looks like when combined with the keysets I have. So if you have the same concern, here it is for you. Hope this helps people who are in the mechanical keyboard community in order to build a favorite keyboard.

🎉 Feature

• 3D keycap viewer (except KAT profile)
• Different font, text display per keycap profile
• Support displaying characters of other languages
  • Hiragana (GMK Bento, Mecha-01, Sumi...)
  • Hangul (GMK Hanguk)
  • Cyrillics (GMK Yuri)
• Multiple colorway selections for alphas, modifiers
• Use SVG icons for novelties like Esc, Enter (SA Oblivion)

🎨 TODO

• Keyboard cases
• Auto resize in small screens
• 3D features
  • Artisan keycaps 😆
  • Keycap legend

📬 Pull Request

You are welcome.

• Add new keyboards:

  • Add new items at public/keyboards.json
  • Add new keyboard info at the public/keyboards folder following the data from QMK
  • Key code is required for layout, don't need any label here. Or you can use default layout (see keyboards/percent/canoe)

• Add new default layouts:

  • Add new files into public/layouts

• Add a new colorway:

  • Clone a new colorway from QMK or look at src/scss/colorways.scss and other files in the same folder

📝 Credits

• SA, Cherry keycap models are Copyright (c) 2017 Josh Hinnebusch (thanks eli#1111 for helping me convert .sldprt to .stl)

• DSA keycap models are Copyright (c) 2017 Kael Ruland

• Logo, Favicon made by Flat Icons