Poll: What VSCode theme do you use?

How large was the image? If it is too big the system will attempt to resize it. Try uploading one the same size as the one in @aslade’s post?

1 Like

I use Ariake Dark, I love this theme

I was using the Dracula, but after saw this Dark + elixir. I prefer the Dark+

I tried resizing it to 1600x825 (aslade’s image dimensions) and still gets resized down.
At least it now displays inside a lightbox.

1 Like

This topic led me to theme FOMO, so I went digging. I now like “Atom One Light” better than the one I was using before. My eyes go funny with dark themes after a while so my choice is a bit more limited.

I also stumbled upon this:

TLDR; comments highlight poorly thought out code, so don’t dim them in your theme, highlight them. Then you’ll be reminded to fix crappy code. You can do this in VS Code with something like:

  "editor.tokenColorCustomizations": {
    "comments": {
      "foreground": "#FF0000",
      "fontStyle": "bold"
    }
   }

in settings.json.

Unfortunately @doc and @moduledoc sections get highlighted too - I need to do a bit more fiddling.

Anyway, here’s a before and after - I think it’s pretty clear which one highlights ugly hacks best!


2 Likes

https://aka.ms/nightowl

or

https://marketplace.visualstudio.com/items?itemName=arthurwhite.White

I am using NightWolf https://marketplace.visualstudio.com/items?itemName=MaoSantaella.night-wolf with a custom font, I will write a post soon on my whole setup and i will update with the link here once i am done.

If you run Ctrl+Shift+P: “Developer: Inspect TM Scopes” you can see what scopes are defined on each piece of syntax in the file:

So we have comment.documentation.heredoc.elixir, comment.documentation.string, and comment.line.number-sign.elixir.

So if we want to change the documentation comments back to their default style (for the Default Dark+ theme) we can add this to our settings.json:

{
    "editor.tokenColorCustomizations": {
        "comments": {
            "foreground": "#FF0000",
            "fontStyle": "bold"
        },
        "textMateRules": [
            {
                "scope": "comment.documentation",
                "settings": {
                    "foreground": "#6A9955",
                    "fontStyle": ""
                }
            }
        ]
    }
}

Now this looks like:
screenshot-after

And if you wanted to target specifically single-line or multi-line documentation you could target comment.documentation.heredoc or comment.documentation.string instead of just comment.documentation.

6 Likes

I am using Dracula

I’ve been using a modified varient of Twilight, as well!

1 Like

Synthwave is still trendy.

One Monokai 80s Plus Theme for VSCode

Font is Iosevka Slab

I am into light themes for some time and using FlatUI Immersed right now

https://marketplace.visualstudio.com/items?itemName=lkytal.FlatUI


Theme is Plain Light. I use it because of less colours. I find colourful themes similar to kinder-garden drawings where kids go crazy with crayons. All thous colours doesn’t help much. I find it really useful to have highlighted comments and strings, and it is enough.

The Explorer is on right side as it is mostly hidden and I bring it up in rare cases and when it shows up it doesn’t float the Editor and code visually stays in place. Usually I use search to open files.

I don’t use Tabs as they are difficult to navigate. Quickly cycling through open files with shortcuts is much faster and easier.

I’ve hidden line numbers as they don’t make much sense to me. Every stack trace typically include line number along with file name and copy-pasting it into search always take to the exact place.

2 Likes

https://marketplace.visualstudio.com/items?itemName=Arsen.darcula-theme-for-elixir Since I’ve used Darcula in Jetbrains IDE’s for the first time, I simply can’t switch to anything else. I can’t find easily my way around in the code if any other theme is used.

I use Dark+ Elixir.


Customization

As the theme is based on a default Dark+ theme and not updated in more than 2 years, each time there is a major update to the VS Code, I overwrite following files in ~/.vscode/extensions/kkalita.dark-plus-elixir-0.1.1/themes folder with files in /Applications/Visual Studio Code.app/Contents/Resources/app/extensions/theme-defaults/themes folder to to get the latest changes to default Dark+ theme (These files get included in dark+(elixir)-color-theme.json)

  • dark_vs.json
  • dark_plus.json
  • dark_defaults.json

(I use Mac, for Linux and other OS, file path will be different :slightly_smiling_face:)

To get consistent formatting for comments and quoted strings when switching to non-elixir files within the project, I have following rules in the user settings (settings.json file)

   "editor.tokenColorCustomizations": {
        "[dark+(elixir)]": {
            // Applies these rules for non-elixir files
            "textMateRules": [
                {
                    "scope": "comment.line",
                    "settings": {
                        "foreground": "#51616D"
                    }
                },
                {
                    "scope": "string.quoted",
                    "settings": {
                        "foreground": "#98BE64",
                    }
                }
            ]
        }
    },

I have also used dark-plus-syntax theme. It is also based on a default Dark+ theme and has syntax support for Elixir/Erlang along with other languages and is being actively maintained.

1 Like

Darktooth

A dark theme that is a bit toned down. I usually shrug at all the contrast and colors screaming at you in most dark themes.

I use: Dracula theme

I use Black Ops:
https://marketplace.visualstudio.com/items?itemName=chrisgfortes.theme-black-ops-vscode

My VSCode theme constantly changes. Following are the themes and customization I use currently.

(I’m using M+ 1m font, and the fontSize 17, and zoomLevel 1 for the following screenshots).

DARK:
Gruvbox Dark Medium


No customization

Monokai (Installed by default)


No customization

Brackets Dark

"workbench.colorCustomizations": {
    "[Brackets Dark]": {
      "panel.background": "#1b1d19",
      "terminal.background": "#1d1f21",
      "panel.border": "#404040",
    },
}

Eva Dark Bold

"editor.tokenColorCustomizations": {
    "[Eva Dark Bold]": {
      "textMateRules": [
        {
          "scope": [
            "comment",
            "comment.block",
            "comment.block.documentation",
            "comment.line",
            "punctuation.definition.comment.elixir"
          ],
          "settings": {
            "foreground": "#676e956e",
          },
        },
        {
          "scope": [
            "comment.wildcard.elixir",
            "comment.unused.elixir"
          ],
          "settings": {
            "foreground": "#676e95"
          }
        }
      ]
    },
}

Banner (rainglow)

"workbench.colorCustomizations": {
    "[Banner (rainglow)]": {
      "statusBar.background": "#181620"
    },
}

Banner Contrast (rainglow)

"workbench.colorCustomizations": {
    "[Banner Contrast (rainglow)]": {
      "statusBar.background": "#070609"
    }
}

SpaceCadet

"workbench.colorCustomizations": {
    "[SpaceCadet]": {
      "editorIndentGuide.background": "#444",
      "editorIndentGuide.activeBackground": "#888",
      "editorWhitespace.foreground": "#444",
      "statusBar.background": "#2e1d2b",
      "statusBar.foreground": "#dda4d3",
      "titleBar.inactiveForeground": "#cccccc50",
    }
}
"editor.tokenColorCustomizations": {
    "[SpaceCadet]": {
      "textMateRules": [
        {
          "scope": [
            "comment",
            "comment.block",
            "comment.block.documentation",
            "comment.line",
            "punctuation.definition.comment.elixir"
          ],
          "settings": {
            "foreground": "#484246"
          }
        },
        {
          "scope": [
            "comment.wildcard.elixir",
            "comment.unused.elixir"
          ],
          "settings": {
            "foreground": "#686467"
          }
        }
      ]
    }
}

LIGHT:

GitHub Plus Elixir Adapted


No customization

NotepadPlusPlus Remixed

"editor.tokenColorCustomizations": {
    "[NotepadPlusPlus Remixed Theme]": {
      "textMateRules": [
        {
          "scope": [
            "comment",
            "comment.block",
            "comment.block.documentation",
            "comment.line",
            "punctuation.definition.comment.elixir"
          ],
          "settings": {
            "foreground": "#7aaa7f",
          },
        }
      ]
    },
}

Netbeans

"workbench.colorCustomizations": {
    "[NetBeans]": {
      "editor.background": "#f5f5f5",
      "editorIndentGuide.activeBackground": "#00aa00"
    },
}
"editor.tokenColorCustomizations": {
    "[NetBeans]": {
      "textMateRules": [
        {
          "scope": "constant.other.symbol.elixir",
          "settings": {
            "foreground": "#009900"
          }
        }
      ]
    }
}

Coda Classic

"workbench.colorCustomizations": {
    "[Coda Classic]": {
      "titleBar.inactiveForeground": "#555",
      "editorGroupHeader.tabsBackground": "#ffffff",
      "tab.inactiveBackground": "#dddddd",
      "tab.activeBackground": "#83d48590",
      "tab.border": "#f3f3f3",
      "contrastBorder": "#ffffff",
      "editorLineNumber.foreground": "#cccccc",
      "editorLineNumber.activeForeground": "#629e63",
      "scrollbarSlider.background": "#88888890",
      "scrollbarSlider.hoverBackground": "#83d48590",
      "scrollbarSlider.activeBackground": "#83d48590",
      "panel.background": "#f3f3f3",
      "terminal.background": "#ffffff",
      "editorWhitespace.foreground": "#83d485",
      "editorIndentGuide.background": "#83d485",
      "editorIndentGuide.activeBackground": "#44a046"
    },
}
"editor.tokenColorCustomizations": {
    "[Coda Classic]": {
      "textMateRules": [
        {
          "scope": [
            "comment",
            "comment.block",
            "comment.block.documentation",
            "comment.line",
            "punctuation.definition.comment.elixir"
          ],
          "settings": {
            "foreground": "#73b873",
          },
        }
      ]
    },
}

Quiet Light (Installed by default)

"editor.tokenColorCustomizations": {
    "[Quiet Light]": {
      "textMateRules": [
        {
          "scope": [
            "comment",
            "comment.block",
            "comment.block.documentation",
            "comment.line",
            "comment.documentation.string",
            "punctuation.definition.comment.elixir"
          ],
          "settings": {
            "foreground": "#91b384",
            "fontStyle": ""
          }
        }
      ]
    },
}

Espresso Soda


No customization

Brackets Light


No Customization

Berba


No customization

4 Likes

Nice point!
I just tried Abyss and it really emphasizes the meaning of the code than the structure.

Now keeping this point in mind, I will customize my favorite themes to feel like Abyss.