Valley is a simple theme for Visual Studio Code without visual noise. Created with handpicked and vivid colors, appropriate contrast and a lot of love to help you focus on your code.
I've always had this feeling about themes like: "If I use this theme it makes me a better developer", which is of course totally stupid, but I've always had this feeling and changed my theme many times. But I didn't felt completely comfortable with any of it and was kind of blocked in my work. Because colors were not harmonious, contrasts were missing or much too strong. And all in all, I always lacked orientation because there was a lack of design in some way. And so I have developed my own. Of course this is a very personal perception, and this theme won't fit 100% for some people either. But maybe only a few people have as much fun with Valley as I do.
- Open the "Extensions" sidebar in Visual Studio Code
- Search for
Valley - Choose "Valley" by Tim Grochowski and click "Install"
- Select the Theme
or via "Quick Open, Go to File..."
- Open the "Quick Open, Go to File..." input, by pressing the
⌘Pshortcut on macOS orCtrl+Pon Windows/Linux - Copy-Paste this line
ext install TimGrochowski.valley-vscode - Press Enter
and if you like Valley rate it or write a review in the marketplace ✨
You can find more screenshots here. Or even better: Use the Theme Tester Playground here.
Vivid and pleasant syntax color palette for long coding sessions.
To improve orientation, I have colored the surfaces according to their z-axis. The closer a surface is to the user, the brighter it is.
I have tried to be AA compliant and achieve a contrast ratio of 4.5 for all main color combinations.
Features like search or Git have their own color palette and are consistent in their use. For example, all search-related colors are consistently yellow.
You can explore Valley's color palette on calcolor.co.
If something does not look the way you want it to, feel free to overwrite it via user settings and give Valley your own personal touch. For more Information see the Visual Studio Code docs for "Customizing a Color Theme".
I can highly recommend the following settings to improve readability and appearance of Visual Studio Code. These are also the settings that can be seen on the screenshots:
"workbench.colorTheme": "Valley",
// Editor
"editor.padding.top": 24,
"editor.padding.bottom": 24,
// Typography
// https://www.jetbrains.com/lp/mono/
"editor.fontFamily": "JetBrains Mono, monospace",
"editor.fontLigatures": true,
"editor.fontSize": 16,
"editor.lineHeight": 30,
"editor.letterSpacing": 0.2,
"editor.suggestFontSize": 14,
"editor.fontWeight": "400",
"workbench.tree.indent": 16,
// Minimap
"editor.minimap.renderCharacters": false,
// Icon Theme
// I like using the 'Material Icon Theme' with these settings
// https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
"workbench.iconTheme": "material-icon-theme",
"material-icon-theme.saturation": 0.75,
"material-icon-theme.folders.color": "#C5C5C9",
"material-icon-theme.folders.theme": "classic",If you have any suggestions, feedback or if you found a bug, please file an issue and let me know. I am very happy about every feedback. Screenshots are very welcome.
I have used a lot of great tools that have helped me to create this theme:
- whocanuse.com
- accessible-colors.com
- contrast-grid.eightshapes.com
- color.review
- abc.useallfive.com
- contrast-finder.tanaguru.com
- contrast-checker.glitch.me
- calcolor.co
Valley Theme by Tim Grochowski is licensed under the "Creative Commons Attribution-NonCommercial 4.0 International" License.
The syntax color palette was partly inspired by the Google Chrome DevTools Theme (in darkmode). I used language scopes from the Visual Studio Code Dark+ Theme to jumpstart Valley.
Valley is available for free in the Visual Studio Marketplace. If you enjoy using it and want to say thank you then you can buy me a coffee and/or rate it/write a review in the marketplace ✨.
Enjoy ❤️