Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Syntax highlighting of inherited variables has very low contrast in dark themes #150

Open
Minh-Trng opened this issue Mar 15, 2024 · 3 comments

Comments

@Minh-Trng
Copy link

Variables that are inherited from a base contract are shown in dark blue. This does not work well with dark themes (either default or the one that comes with the extension (see variable eigenPodManager):

  • Default Dark Modern:
    image

  • Solidity Visual Developer Dark
    image

Definitely works slightly better on the second one, but both are straining to the eyes imo

@alexbabits
Copy link

I agree++. I was looking for a way to change the color of dark blue semantic highlighting for inherited things to something more visible.

The documents currently seem to say that the colors are set in stone: https://marketplace.visualstudio.com/items?itemName=tintinweb.solidity-visual-auditor

"
Solidity-va.deco.statevars ... decorate statevars in code view (golden, green, blue boxes)
Solidity-va.deco.arguments ... enable/disable or select the mode for semantic highlighting of function arguments. (default: 'enable' = 'color and arrow')
Solidity-va.deco.argumentsMode ... select the mode for semantic highlighting of function arguments (may require a reload)
Solidity-va.deco.argumentsSuffix ... a custom Suffix/Symbol that is appended to the decoration when performing semantic highlighting for function arguments
"

@alexbabits
Copy link

alexbabits commented Mar 27, 2024

Fix: Change Inherited State Var color (you can also change other colors if you want):

  1. Locate the extension on your machine. I'm using WSL and I found mine simply at home/.vscode-server/extensions/tintinweb.solidity-visual-auditor-0.2.0. If you are viewing this later, the version or naming might be slightly different.
  2. Go into src/features/deco.js
  3. Search for darkblue. Line 627 has the darkblue CSS decoration style, change it to whatever color you want, like aqua.
  4. Reload your project in VSCode and the color should update.

For some reason there is no color on my inherited functions, which were also dark blue. (But I think this is a general bug with VSCode because inherited functions sometimes simply don't register properly).

Find CSS colors here: https://www.w3.org/wiki/CSS/Properties/color/keywords

@Minh-Trng
Copy link
Author

@alexbabits great find! Will leave the issue open, so you can do a PR that changes the defaults if you want to :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants