Make virtual keyboard text color dynamic based on background

Use white text with dark backgrounds and black text with light background.

ref #661

package.json

@@ -24,6 +24,7 @@
     "sonic-weave": "github:xenharmonic-devs/sonic-weave#v0.0.21",
     "sw-synth": "^0.1.0",
     "temperaments": "^0.5.3",
+    "values.js": "^2.1.1",
     "vue": "^3.3.4",
     "vue-router": "^4.3.0",
     "webmidi": "^3.1.8",

src/components/VirtualKeyInfo.vue

@@ -34,12 +34,12 @@ const props = defineProps<{
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 }
 
-.black-key .key-info {
+.dark .key-info {
   color: white;
   text-shadow: none;
 }
 
-.white-key .key-info {
+.light .key-info {
   color: black;
   text-shadow: none;
 }

src/components/VirtualKeyboardKey.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { LEFT_MOUSE_BTN } from '@/constants'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import Values from 'values.js'
 
 type NoteOff = () => void
 type NoteOnCallback = () => NoteOff
@@ -14,6 +15,8 @@ const props = defineProps<{
 
 const active = ref(false)
 
+const light = computed(() => new Values(props.color).getBrightness() > 50)
+
 const emit = defineEmits(['press', 'unpress'])
 
 let noteOff: NoteOff | null = null
@@ -100,15 +103,15 @@ onUnmounted(() => {
   <td
     :data-key-number="index"
     :style="'background-color:' + color"
-    :class="{ active, 'black-key': color === 'black', 'white-key': color === 'white' }"
+    :class="{ active, light, dark: !light }"
     @touchstart="onTouchStart"
     @touchend="onTouchEnd"
     @touchcancel="onTouchEnd"
     @mousedown="onMouseDown"
     @mouseup="onMouseUp"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
-    >
+  >
     <slot></slot>
   </td>
 </template>