/keycolor-preview

Keyboard, keycap color preview and customization for mechanical keyboard lovers

Primary LanguageJavaScript

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