I like the new Arduino IDE. I had never used VS Code before, but now that I have used it in order to create my Code Clarity via color theme for the Arduino IDE, I think it is a good platform.
In the Arduino 1.x IDE, I used the theme capability to make the code easier to read by adjusting the colors, and easier on the eyes by using the dark theme as a base.
The different parts of code stand out, and are more easily perceived because of colors. IDE 1.8 was color coded with:
- Integer Numbers in Dark Blue
- Built-In C primitives are Light Blue
- Parentheses and Brackets are Dark Tan
- Variables are White
- Comments are Light Purple
- Mathematical Functions, Colon, and Commas are FF0000 Red in order to make them very easily seen.
- C Keywords are Dark Purple/Magenta.
- The Cursor is FF00FF Pink, and the only item this color in order to make it easily found.
- Floating point numbers were FF0000 Red, in order to make them obviously not integer.
Color Coding the different parts of the C language, definitely made coding less fatiguing. Clarity via colors is something I highly recommend for beginners, but it helps me too, a part time programmer who is pretty good with the basics.
When I came back to do some coding recently, I saw that the IDE 2 was released. I wondered if the old theme system would still work on it, but I found out that the underlying VS Code was quite different. After figuring out how to make my own theme is VS Code for use in the Arduino IDE, it turns out that VS Code recognizes, and allows, color differences with more distinctions than the Arduino 1.8 IDE, allowing for more clarity via color.
So I made a theme in VS Code for the purpose of bringing it to the Arduino IDE 2. Starting with the theme "Neon Shimmer Alpha", I created a theme which was easier on the eyes, more beautiful, and provided greater programming clarity than I had in the 1.8 IDE
As you can see in the top picture, many of the different parts of C are now identified via color.
- Integer Numbers are Yellow, including floating point numbers, but the Decimal Point is FF0000 red for clarity.
- Built-In C primitives are Turquoise
- Parentheses and Brackets alternate between 4 different colors as randomly determined by VS Code. This helps you be more sure of which set of Parentheses or Brackets belong with each other.
- Variables are Green if they are Global, Blue if they are Local. This one color distinction I find very helpful, especially when looking at code that I haven't seen for a while, or came from somebody else.
- Comments are Light Purple when bracketed with /* */, Orange when following //. This helps me easily see if there are sections of code I have block commented out for debugging purposes as I scroll, which probably need to be revisited.
- Mathematical Functions and Statement Terminators are FF0000 Red in order to make them very easily seen.
- Logical Operators || and && are Light Orange.
- C Keywords are Dark Purple/Magenta.
- The Cursor is FF00FF Pink, and the only item this color in order to make it easily found.
- Meta Functions are Yellow Green
- C Entity Names and Functions are Purple.
- There is also color ff487c italicized for Variable Parameter, as was already included in the Neon Shimmer Alpha theme.
So I applied the theme to the Arduino IDE 2, and it was close, but there is much more Green Yellow because Parenthesis, Global Variables, and Local Variables, are all seen as Meta Function Definitions. The distinction between Global and Local variables, which I consider this to be one of the most helpful color distinctions, is gone.
Also, the Parentheses and Brackets do not alternate between 4 different colors so as to help see which 2 belong together.
It still looks pretty good, and I will happily use it, but I would really like it if the Global and Local Variables could be seen as distinct by the IDE so that they could have distinct colors. The code in my theme which is already there for these distinctions, and recognized by VS Code, is:
{
"name": "Variables",
"scope": "variable.other.local",
"settings": {
"foreground": "#008cff"
}
},
{
"name": "Variables",
"scope": "variable.other.global",
"settings": {
"foreground": "#0fda0f"
}
},
It would also be very nice if the Parentheses and Brackets would randomly alternate between 4 different colors so as to help see which belong together.
Other than these 3 items, the theme works pretty much as it did in VS Code, which makes it workable to use VS Code to create themes for the Arduino IDE. Good job.
My themes for the 1.8 and 2 IDEs are not published anywhere. If anyone would like to get them, let me know. Maybe I could put them up on github.
