"Challenge accepted."
- Internet
Removing color from variables is a bit too far for me though, I expect the declaration and any subsequent access to be visually consistent.
But colors help me separate “this whole thing is a string” from “this is a string but with code inside it”. Comments being gray doesn’t make them less visible for me, just visibly different which is all I’m looking for.
99% of the colors don’t actually matter to me. It’s the distinguishing of conceptual elements that are adjacent to each other that matters more to me.
I really like the idea of color representing scope and relatedness, rather than syntax.
(And of course white background always. Dark mode is depressing.)
Im always surprised by the number of people who will delcare one absolutely better than the other without consideration for this factor. Sure, people have some general preferences, but I thnk it's 90% about the ambient light.
If it's pitch black most people will prefer dark and if it's bright daylight people will prefer light.
Twice during the last couple of years, I’ve done this poll online:
When reading a code block in your chosen viewing mode (light or dark),
which of these should the code block always do?
- Match my chosen mode
- Have a dark background
- Have a light background
... and, each time, “Match my chosen mode” won with well over 75% of the votes (about 150–200 total votes in each case). Accordingly, I’ve styled my site’s code blocks to handle both dark- and light-mode viewing. I also provide a switch that enables one to toggle back and forth just in case the chosen system mode doesn’t match how one wants to view code blocks (e.g., some people prefer to see code blocks in dark mode even if they’re otherwise using light mode).I'm not being facetious. The author is trying to show comparisons to the reader of various syntax highlighting schemes, but any difference between them is overwhelmed by the massive contrast between the bright yellow background and the black background of the code samples.
It's funny that in the first example where the author asked the viewers to find the function definition, I was able to do so faster with the colorful syntax highlighting he considered wrong.
To recognize different elements of code is more than just colors, but actual syntaxes of the language and the general shapes of code blocks.
It's a matter of taste, and in my decades of programming, I've found colleagues and many teams trying for all kinds of fancy themes only to come back with a "boring" one, like Material Theme, which is also my main driver nowadays.
I think the author had some good ideas, particularly around literals (what he called constants), rejection of the requirement for equal brightness, and emphasizing comments. The author is more than welcome to bring his version of perfect syntax highlighting to the market of ideas. Its adoption should prove it if his idea wins.
The author later asks what color class definitions were. I think this fundamentally gets wrong how syntax highlighting helps humans. I don't have a clue what color anything is in my favored highlighting, but my brain does incredible pattern recognition to help me digest code in it without me consciously knowing what color does what.
So his arguments for why there's a problem don't hold up, but that doesn't mean there is not in fact a problem.
I am however in that weird minority that prefers light themes, and I do also prefer minimal syntax highlighting. The author does have a point to an extent, but I don't think there's any one objectively better way to do it I think it's all personal preference.
I don't like the rainbow highlighting, too distracting for me, and doesn't work particularly well with light themes. I did try the author's alabaster theme in VSCode though and it highlights the wrong things for me.
(In C#) if I have var result = await SomeMethodName(param, param, param); It put both "result" and "SomeMethodName" in blue, the rest being black. I'd actually prefer it the other way around, highlight the programming language's keywords (var and await in this case) and leave my own names (result and SomeMethodName) unhighlighted.
The theme was also inconsistent. The post says we shouldn't highlight PL keywords, but the proposed theme does highlight some keywords while ignoring others.
I do agree that it is harder to see the return misspelling with the more detailed syntax highlighting, but when I'm coding I'm mainly focused on the actual tokens I'm writing, and you better believe I pick up on if the syntax highlighting is showing my token as wrongly being a keyword rather than an identifier, or the wrong type of identifier. Even if I don't actually know what the colors are, it will look wrong.
Rainbow vomit syntax highlighting logically seems like a bad idea, but like many things, even though it's hard to prove that it's better, I think a lot of people will agree that it really is better. Especially with tree-sitter and LSPs giving more detailed syntax highlighting; I can feel the benefits of 'oh, that's the wrong identifier color, isn't it?' to the point where if I run into an edge case that breaks highlighting it becomes immediately noticeable.
I am able to parse the status quo example way better than his ideas.
My theory is helped by his use of a yellow background on black text, which is horrific to read.
Many games (especially gacha games where one may be tracking multiple orthogonal "levels" on any given piece of inventory) compress tremendous amounts of data into a character or gear item portrait; ticks on the top, dots on the side, colored frames, etc. - all so we can pick things out in a crowd without needing to set a custom sort order.
And yet our IDEs, citing silly things like "render optimizations" and "consistency with ANSI escape codes," allow each character to have just a single foreground color, a single background color, and maybe a squiggly underline. Why stop there?
Give me the freedom to add arbitrary overlays and decorations on any given token. Give me <ruby>-style elements [0] that will let me put a little colored dot or emoji at the top right of any token that meets a certain requirement... say, a utility function, or a reference from the file that's open at the top right of my screen.
Let us swim in rainbows with sparkles flying past our eyes. We're strong swimmers.
[0] https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
Same. It sort of killed the article for me. I also thought that in his resulting theme the limitation of colors would eventually trip me up. Having numbers and strings be the same color is terrible - I have noticed mistakes in the oast where numbers were erroneously attributed as strings for being enclosed in quotation marks precisely because my theme gives those different colors.
It lost me after this part:
> Here’s a quick test. Try to find the function definition here:
I found them instantly with more color, and struggled with less, and found the same for all the subsequent examples as well.
Same. I noticed this on a Whatsapp group I have with old friends. About 8 people, so each gets a specific color in their name, and that's how I identify who is talking on a glance.
Once one of them switched thier phone number, and had to leave and reenter the group. This caused the colors of everyone to change.
For a couple of weeks it was hell. I was used to Person A to be pink, Person B to be yellow and so forth. I would reply to A thinking I was replying to B because their color changed, which caused a lot of confusion.
It seems like the author gets most of their value from associating the specific highlight color with a specific meaning. I think I get most of the my value from the different highlight groups. From that perspective, I don't really care if I open an editor and strings are green - I care strings form one group that's different than variable names or etc. The main problem I had with the "complicated" scheme was the reuse of purple: branching, looping, imports, functions, this, new - these are not at all related so making them purple doesn't help me (or the author), regardless of total color count.
I don't think either way is wrong, but it may feel like it to different people.
Somewhat related, I got used to turning off syntax highlighting for some coding sessions.
It started when I was using vim to edit large data files and syntax highlighting there was buggy.
Later, I worked with large react files, where with each JSX block the latency and highlighting reliability was getting worse. So I turned it off too and I was surprised that I didn’t see a big difference in readability after that.
I’d still use syntax highlighting for backend work. But I don’t mind looking at large html files or react prototypes sans highlighting.
For example: keywords, specifically, are actually very useful to highlight. This post complains that misspelling "return" didn't make easily-scannable color changes (it changed the color from purple to red, which still looks like a special color)... But then, proposes to not highlight keywords at all, so misspelling "return" would still be impossible to quickly scan for visually! In both cases with the proposed color scheme, "return" and "retunr" would have identical coloring: white.
Generally speaking I think a lot of the visual noise of syntax highlighting comes from having too many colors. For example, you don't need the "class" keyword to have a different color than the "const" keyword — and many syntax highlighting themes are guilty of doing exactly that. But it's useful to be able to immediately, visually see if you made a typo: if you expected to write a keyword, and it's colored like normal text, you know you messed up. Similarly, it's useful when reviewing code to quickly be able to tell whether there's a typo somewhere.
I have a pretty custom syntax highlighting theme for Neovim. I have a few categories that are highlighted differently:
- Keywords
- Function calls and method calls (highlighted identically)
- Property accesses (to highlight mistakes when you're simply accessing a property instead of calling it — it's a different color than a method call)
- Non-string built-in primitive types like numbers, booleans, etc
- Strings
- Comments
- Types
Ultimately I think syntax highlighting is a tool to let you see mistakes. If you go too wild with the colors, it's true that since everything is a unique color, it's hard to tell when something is the wrong unique color. But you can use a relatively restrained palette and get a lot of value, and I think this post goes a bit too far in terms of reducing color usage.
I'd prefer minimal-to-no syntax highlighting except for things that should NOT be there. Nonexisting keywords should be highlighted. Unclosed strings. Unbalanced parens or brackets.
I like making comments their own color so you can easily separate them from actual code but I'm otherwise in the minimal camp.
I've always thought the default Visual Studio color scheme was a nice balance. And I especially like the green comment color in that theme. It doesn't scream for your attention but also doesn't fade into the background (which, annoyingly, many themes do quite literally).
Of course if the author prefers their extra minimal colors I'm not going to tell them they're wrong. Though framing it as objectively better I do disagree with.
Yeah I generally want the opposite. I want keywords to be the thing being highlighted.
I also really dislike overly colorful themes, and I prefer light mode (dark mode is far too hard on my eyes, oddly enough I have to strain to focus or it's fuzzy).
But the author's alabaster theme still highlights the wrong things and is inconsistent.
public async Task<byte[]> SomeMethodName(Type param, Type param) results in Task, SomeMethodName, and BOTh the data type and parameter name being highlighted.
If highlighting isn't for keywords, why is Task and the data types highlighted?
likewise var result = await SomeMethodName(param, param); has result and SomeMethodName highlighted and I generally want the opposite, I want the PL's keywords highlighted and nothing else.
I prefer dark mode (precisely for the garish colors, sorry), but been using light mode... because it's hard to make everything use dark mode!
When my terminal was dark, the eg some docs in the browser were light, switching back and forth was quite painful. Yes, it's super simple for websites to detect the preferred color scheme with @media (prefers-color-scheme: dark) {}, yet most (such as this one) don't. I could use some hacks, but then I'm in for a world of pain. So I just use light theme everywhere and it's ok(ish).
I don't understand the premise of this. What is "the base text color" and why would it be important to be able to see it? Everything is assigned some specific color and I don't understand why one of the colors would be considered more important than the others.
> Here’s a quick test. Try to find the function definition here: [...] See what I mean?
No, I don't. From the context I can figure out that the author is arguing that they're easier to find in the second example, but I found it easier with the first. They're both what I would consider pretty bad syntax highlighting schemes, though.
Original idea from here: https://medium.com/@evnbr/coding-in-color-3a6db2743a1e
One impl for Emacs: https://github.com/ankurdave/color-identifiers-mode
I still admire you Niki.
Apparently it's too technically complex :D (their words in the open GH issue, not mine)
- blue for keywords and integer constants
- red for strings and characters
- green for comments
- black for everything else
If you paste the following code into the example block in [0] you can see how useful this can be:
while (b - a).abs() > EPSILON {
let c = a + (a - b) * f_a / (f_b - f_a);
let f_c = J(c);
if f_c * f_b == 0.0 {
a = b;
f_a = f_b;
} else {
f_a /= 2.0;
}
b = c;
f_b = f_c;
}
[0]: https://wordsandbuttons.online/lexical_differential_highligh...If is not highlighting structure then is failing to do the pre-optimization that helps your organic parser do that.
The "matter of taste" part can come after the "matter of structure" was adequately elevating the right categories of elements to each level, hence inviting to receive the required attention.
The solution is not to use fewer colors, but rather to take advantage of the 3D space of color perception.
Good themes have a hierarchy. Perhaps red is for keywords and blue is for symbols, but different kinds of symbols have different shades of blue. A lighter blue for functions, a darker blue for classes, for example.
This allows the highlighting to convey a higher amount of information when reading code closely, without causing distraction when skimming through code.
Agreed with almost everything the author had to say, but not this. Hard disagree. In my view, keywords are the single most important thing to highlight. I'd be ok without anything else. Keywords sketch the structure of the program in most languages. The thing I want my eye drawn to, in the case of top-level definitions, for example, is the keyword. It's the predictable anchor as I'm scanning a long series of definitions. The identifiers are not: some are long, some are (very) short.
And how do I understand the control flow of my program? I look at keywords. If I want to read the condition, I have to find the condition. But all the conditions look different. What's the reliable way to spot them? The predictable 'if' that precedes each one, without fail.
My eye is a parser. It needs to recognize tokens. But some tokens are easy to confuse: keywords look just like identifiers.
An assertion of correctness relating to a matter of taste is, ironically, going to be trivially falsifiable. Even though I found myself personally agreeing with most of what the author had to say (for my tastes)! I definitely want to try lifting the visual importance of comments.
But I agree with the author that if little to nothing ends up being given the base text colour (e.g. white or black) then the design is an unthinking one (less of a design process, more of a box-ticking exercise to assign a unique colour to everything that can possibly have one).
That's not what syntax highlighting is for though.
That's falls under diagnostics. A big red squiggly line. The honest test would be to add that in both cases.
I wonder which software engineer traits are like this. Maybe everything that it's kind of low-friction to do. If you had a CRT screen you're probably a details oriented person. If you've got conky running you're from the time when you needed to watch those things or you're a moron cargo culting that.
It’s for color to label the type (or other high-level semantic characteristic) of different tokens.
> What’s the base text color here
Why should there be a “base text color” at all?
The combination of adhd and colorblindness seems to make most multicolor displays just visual snow to me. It’s like looking at one of those magic eye pictures. I struggle with foreground/background in both vision and hearing, and it took quite a long time to realize others don’t process like that.
This is only an issue for websites and they generally have short code snippets anyway. I’ve been using the same theme in my editor for the last 10 years so it is much more useful there.
I also like minimal themes (and light mode!) but keywords are precicesly the thing I want highlighted. The "Visual Studio(Light)" theme in VSCode gets it pretty close to what I want but still has some inconsitencies that bug me but I haven't bothered making my own to fix them yet. It primarily just highlights keywords, comments, strings.
But then you can have something like public async Task<byte[]> SomeMethod(DateTime date, int someNumber) and int is highlighted but DateTime isn't...
2. having keywords vs variable names vs functions be different colors helps you find misspellings, not the other way around. But that's almost beside the point, because it's your linter/intellisense/error checker's job to let you know when you have an obvious syntax error. You're also taking this as if you've just discovered this code block in the ether and have to debug it, rather that the reality that if you had actually been the author, you would have immediately noticed it, even without red squiggles, because it would be immediately obvious when you type it that it doesn't highlight as a keyword. Human brains are hardwired for pattern recognition, one could even argue it's the only thing the human brain is even good at.
3. I'm not sure where the notion of comments being grey is "tradition", but in practically every editor I've used, the default color for comments is a pretty easy to pick out green. Comments usually stick out like a sore thumb, in fact, as they typically don't share their color with any other syntax. Again, this points to you specifically picking out a non-default theme to make your points against.
4. "... gets so bad you can't see the base color" this isn't so much a thing, rather, the base color just isn't white. Which is because most people would agree that pure white on black is not pleasant to look at for long periods of time. There's a reason you don't see many dark mode highlighters use white. Again, default for vscode is a pleasant light blue. Plenty of contrast, but not so harsh it strains your eyes.
5. This is the most psychological, and subjective one, but plain, unhighlighted text just doesn't look like code. It looks like plaintext. Because plaintext is unstructured. Syntax highlighting brings out (highlights) the inherent structure of code. And that's kind of the entire point; it's there to show the structure. It may help you spot a typo, but that's not why it's there. That's an incidental perk. It's there because our brains are really good at pattern recognition, and having syntax follow a predictable color scheme taps in to that pattern recognition.
I'm sure this varies person-to-person, but for me at least this is not a good test.
I couldn't list the notes in Clair De Lun, but I'd certainly notice if I heard the wrong note played. In much the same way, I have no idea what color classes are in my theme, but I certainly notice when it's wrong.
What'd be nice would be easier customization of these rules in your ide, like quick email rule creation in Outlook. Select what you want to alter, the rule modal shows you a couple options for targeting, then you can apply whatever highlighting you want.
Notably, I don't necessarily remember which colors are used by my code editors off the top of my head, but you can be damn sure that if the smallest thing is different tomorrow, I will notice, and if anything is the wrong color, I will immediately notice something is wrong. Put as many colors as possible and it makes it easier for me to spot any mistake. Although I can understand that more than a few colors can be distracting to some people.
As for "everyone does it wrong", and in particular wtt the Christmas tree effect, I find Kate's and IDEA's default color themes quite well designed and balanced, and where each sub expression start and end.
I do find light themes far more readable, and only use dark themes under very bad lighting conditions where a white background would hurt the eyes even at minimal screen brightness.
Bonus topic: in the Christmas tree screenshots, you can notice that parentheses are of different colors. This creates a visual mess but I do activate this option in Kate anyway because it is very useful to quickly check that the parentheses are balanc
It's less necessary when you have syntax checking though, because the editor will put a red background or draw squiggles.
I have no idea where I got it, but I have a quick JavaScript bookmarklet that darkens any page for me in an instant. I love it. And I, unfortunately, have to use it every time here on Hacker News.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
javascript: (()=>{var e="quick-and-dirty-dark-theme",d=document,i=d.getElementById(e);if(i)d.body.removeChild(i);else{var r=d.createElement("style");r.id=e,r.innerHTML="html, img, video, iframe { background: #fff;%20filter:%20invert(0.9)%20}%22,d.body.appendChild(r)}})();
Just like everyone else, I disagree on some aspects.
One has not been brought up. So here's goes:
My first reaction to the highlighting of the literals (strings, numbers, etc) was:
"This is wrong! Who cares about the exact value here? I want to understand the program flow!"
But thinking about it a bit more, this is actually a deficiency in the code itself, not the highlighting:
It's magic numbers! And they get highlighted for you.
The primary difference is that my theme has an underlying assumption that colors have semantic meaning that we all implicitly understand(red = bad, yellows/oranges are action-oriented etc). So instead of color = syntax, my theme semantically maps color = intent.
• Warm colors (orange/red) for actions — throw, return, await.
• Cool colors (blue/green) for definitions and values — function names, constants, variables.
• Muted neutrals for structure and noise — punctuation, keywords like var or const
This means comments are muted, contrary to the author's proposal - imo while they are important and helpful, they're secondary to the actual code
My primary design goal was that if you open a large file and squint at it, the flow should be immediately obvious (the flow colors stand out, if you see a bunch of blues it's calling a bunch of other functions etc)
(You can see screenshots in the link)
I do this in C to: /* */ for explanation, // for temporary disabled.
> light [themes] can't look good. Science
Sorry, but 'my preference is x. Therefore y. Science' is not how any of this works. I get that it's a joke, but considering light themes are objectively superior (c. ref. <https://journals.sagepub.com/doi/abs/10.1177/154193121360181...>), I take umbrage.
Like literally IDE not just highlights, it underscores a problem in red/yellow, puts a marker on the left of line, and on the right at the scrollbar as well. Also marks the whole file tab and file name on project tree. Gives a warning when user creates a commit.
Still, many, too many programmers don't care to either fix or silence it.
I mean, any of those would work, but the one that works best is the one you're used to.
The brain is great at learning patterns, I'm extremely used to IntelliJ's classic theme (light) with Firacode with ligatures.
But that's me, I've been daily driving that for years, so stuff just pops up at me.
I like semantic highlights (i.e. something is static or a field, or whatever) rather than pure syntactic ones, but what matters most to me is stability.
If it changes for no reason, it's jarring and takes a while to get used to it again.
the__alchemist•2h ago