enyancc / vscode-ext-color-highlight

Extension adds colored border around css/web colors in the editor
GNU General Public License v3.0
262 stars 83 forks source link

fix: enable floating point value display #209

Open C17AN opened 3 months ago

C17AN commented 3 months ago

Description

Fixes an issue where the getColorContrast() function did not work correctly when the rgba values included decimal points.

Problem

Including decimal points in rgba values is not correct syntax, but I have experienced situations where both the text and background turn completely black, making it difficult to verify the input values.

For example, if you incorrectly input something like rgba(0,0,0.1), both the text and background turn black, rendering the values unreadable. (Attached at screenshot)

Solution

In the getColorContrast() function of dynamic-contrast.js, I modified the rgbExp to accept decimal values. Additionally, I changed the calculation to use parseFloat instead of parseInt to handle these values correctly.

Screenshot

AS-IS

image

TO-BE

image

Note

AS-IS (tested with included test/fixture/test.css)

image

TO-BE (tested with included test/fixture/test.css)

image

I have tested this change with your test/fixture/test.css, but If you believe this PR might cause a breaking change, it's perfectly fine not to merge it and to fix the issue in your own way.

Thank you for creating such a great extension.