UPD: Custom light color detection

This commit is contained in:
Robert Kossessa
2024-02-05 15:42:01 +01:00
parent 1f3b242392
commit 294b168822

View File

@@ -6,7 +6,7 @@
:style="{backgroundColor: color.hex()}">
<div
ref="colorFieldText" class="w-full flex opacity-70"
:class="color.isLight() ? 'text-black selection:bg-black selection:text-white' : 'selection:bg-white selection:text-black'"
:class="!isDark(color) ? 'text-black selection:bg-black selection:text-white' : 'selection:bg-white selection:text-black'"
style="transition: color 0.2s ease-in-out">
<div>
<form @submit.prevent="onSubmitHueInput">
@@ -282,6 +282,13 @@ function shake() {
}, 5)
}
function isDark(color) {
// YIQ equation from http://24ways.org/2010/calculating-color-contrast
const rgb = color.rgb().color;
const yiq = (rgb[0] * 6126 + rgb[1] * 7152 + rgb[2] * 722) / 10000; // Changed r factor from 2126
return yiq < 128;
}
</script>
<style scoped>
.shake {