Skip to content

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.

License

Notifications You must be signed in to change notification settings

timnarr/valley-vscode

Repository files navigation

Valley Theme for Visual Studio Code

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.

Visual Studio Marketplace Version Visual Studio Marketplace Installs Preview in vscode.dev

Valley screenshot


🚀 My motivation to build Valley

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.

📦 How to Install

  • 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 ⌘P shortcut on macOS or Ctrl+P on 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

🌄 Screenshots

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.

Valley syntax JavaScript

Valley syntax CSS

Valley syntax HTML

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.

Valley surfaces and command palette

I have tried to be AA compliant and achieve a contrast ratio of 4.5 for all main color combinations.

Valley terminal

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.

Valley search editor

🎨 Color Palette

You can explore Valley's color palette on calcolor.co.

👤 Personalization

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".

⚙️ Recommended Settings

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",

💬 Feedback and Issues

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.

👪 Valley Adoptions

🔧 Tools

I have used a lot of great tools that have helped me to create this theme:

©️ License

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 ❤️

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project