Visual Studio for Mac IDE Themes Look Wrong Reported by Adam Hill Sep 06 at 11:38 PM visual studio for mac ide theming Using Vibrant Ink from StudioStyle.es in VSM does not look like VS Windows. Key Features: Latest version supports Visual Studio code 1.10.0 and higher. Removes the need to press ‘Ctrl + K V’ for a preview of the Markdown file. Shows previews next to the Markdown file you open. Angular v4 TypeScript Snippets.
Active2 years ago
I recently downloaded the VS code editor which is really nice.but the only problem I find in it is the color theme, I am use to monokai color theme like in sublime text and I can't find a way to editthe color theme or download a color theme there are only 2 options:
- Dark Theme
- Light Theme
How can I add my own theme or duplicate existing one so I will be able to edit the color scheme as I want to?
I manage to change some of the colors in the following file but still I don`t know how to add completely new theme:
Looks like color themes will be available soon and it will be a part of a plugin system
talsibony
talsibonytalsibony4,83444 gold badges3131 silver badges3737 bronze badges
3 Answers
Visual Studio Code 0.9.0 and later
There's an official documentation on how to add a custom theme: https://github.com/Microsoft/vscode-docs/blob/0.9.0/release-notes/latest.md
You need a
.tmtheme
file for the themeyou want to add. You can find existing files e.g. on GitHub, ColorSublime or you can define your own theme file (for example with https://github.com/aziz/tmTheme-Editor). After finding a
.tmtheme
file you have two ways to create an extension based on it.Option 1: Using a Yeoman generator
- Install node.js (if you haven't already done)
- Install yo (if you haven't already done) by executing
npm install -g yo
- Install the Yo generator for code:
npm install -g generator-code
- Run
yo code
and selectNew Color Theme
- Follow the instructions (define the
.tmTheme
file, theme name, ui theme etc.) - The generator creates a directory for your extension with the name of the theme in your current working directory.
Option 2: Create the directory on your own
- Create a directory with the name of your plugin (only lowercase letters). Let's say we call it
mytheme
. - Add a subfolder
themes
and place the.tmTheme
file inside of it - Create a file
package.json
inside the root of the extension folder with content like this
Finally add your extension to Visual Studio Code
Copy the extension folder to the extension directory. This is:
- on Windows
%USERPROFILE%.vscodeextensions
- on Mac/Linux
$HOME/.vscode/extensions
Restart VSCode and select the new theme in
File -> Preferences -> Color Theme
Visual Studio Code 0.8.0
It's possible to add new themes in Visual Studio Code 0.8.0 (released for insiders on 2015-08-31 [become an insider: https://www.instant.ly/s/Y5nt1/nav#p/186a0]).
After installing VSCode 0.8.0 or higher do this to apply your own theme:
- Download a
.tmTheme
file or create your own (for example with https://github.com/aziz/tmTheme-Editor) - Copy the
.tmTheme
file to%CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/themes
- Register the
.tmTheme
file in%CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/ticino.plugin.json
by adding an entry for it like this: - Restart VSCode and select the new theme in
File -> Preferences -> Color Theme
15.6k66 gold badges3333 silver badges5353 bronze badges
WosiWosi24.6k1111 gold badges5858 silver badges7070 bronze badges
Adding a completely new theme is not currently supported. You can submit your feature requests here, I already heard people asking for this https://visualstudio.uservoice.com/forums/293070-visual-studio-code
Isidor NikolicIsidor Nikolic1,44311 gold badge88 silver badges1010 bronze badges
I found that the file - resources/app/client/vs/monaco/ui/workbench/native/native.main.css - is also the right place for changing how fonts are renderer. I was trying to figure out how to disable font smoothing on OS X and found that you can do it here by adding this CSS rule in the file -
tatxtatx
protected by Community♦Nov 10 '15 at 10:32
Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
Would you like to answer one of these unanswered questions instead?
Not the answer you're looking for? Browse other questions tagged color-schemevisual-studio-code or ask your own question.
Color themes let you modify the colors in Visual Studio Code's user interface to suit your preferences and work environment.
Selecting the Color Theme
- In VS Code, open the Color Theme picker with File > Preferences > Color Theme. (Code > Preferences > Color Theme on macOS).
- You can also use the keyboard shortcut ⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T) to display the picker.
- Use the cursor keys to preview the colors of the theme.
- Select the theme you want and press Enter.
The active color theme is stored in your user settings (keyboard shortcut ⌘, (Windows, Linux Ctrl+,)).
Tip: By default, the theme is stored in your user settings and applies globally to all workspaces. You can also configure a workspace specific theme. To do so, set a theme in the Workspace settings.
Color Themes from the Marketplace
There are several out-of-the-box color themes in VS Code for you to try.
Many more themes have been uploaded to the VS Code Extension Marketplace by the community. If you find one you want to use, install it and restart VS Code and the new theme will be available.
Tip: To search for themes, type 'theme' in the Extensions view (⇧⌘X (Windows, Linux Ctrl+Shift+X)) search box.
You can also browse the VS Code Marketplace site directly to find available themes.
Customizing a Color Theme
You can customize your active color theme with the
workbench.colorCustomizations
and editor.tokenColorCustomizations
user settings.To set the colors of VS Code UI elements such as list & trees (File Explorer, suggestions widget), diff editor, Activity Bar, notifications, scroll bar, split view, buttons and more, use
workbench.colorCustomizations
.You can use IntelliSense while setting
workbench.colorCustomizations
values or, for a list of all customizable colors, see the Theme Color Reference.To customize a specific theme only, use the following syntax:
To tune the editor's syntax highlighting colors, use
editor.tokenColorCustomizations
in your user settingssettings.json
file:A pre-configured set of syntax tokens ('comments', 'strings', ...) is available for the most common constructs. If you want more, you can do so by directly specifying TextMate theme color rules:
Note: Directly configuring TextMate rules is an advanced skill as you need to understand on how TextMate grammars work. Go to the Color Theme guide for more information.
Again, to customize a specific theme only, use the following syntax:
Creating your own Color Theme
Creating and publishing a theme extension is quite easy. Customize your colors in your user settings then generate a theme definition file with the Developer: Generate Color Theme From Current Settings command.
VS Code's Yeoman extension generator will help you generate the rest of the extension.
![Studio Studio](/uploads/1/2/6/4/126419303/723770038.png)
See the Create a new Color Theme topic in our Extension API section to learn more.
Remove default themes
Visual Studio For Mac Color Themes
If you'd like to remove some of the default themes shipped with VS Code from the Color Theme picker, you can disable them from the Extensions view (⇧⌘X (Windows, Linux Ctrl+Shift+X)). Open the
...
More Actions drop-down menu from the top of the Extensions view, select Show Built-in Extensions, and you'll see a THEMES section listing the default themes.You can disable a built-in theme extension as you would any other VS Code extension with the Disable command on the gear context menu.
File icon themes can be contributed by extensions and selected by users as their favorite set of file icons. File icons are shown in the File Explorer and tabbed headings.
Selecting the File Icon Theme
- In VS Code, open the File Icon Theme picker with File > Preferences > File Icon Theme. (Code > Preferences > File Icon Theme on macOS).
- You can also use the Preferences: File Icon Theme command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)).
- Use the cursor keys to preview the icons of the theme.
- Select the theme you want and hit Enter.
By default, the Seti file icon set is used and those are the icons you see in the File Explorer. Once an icon theme is selected, the selected theme will be remembered and appear again whenever VS Code is restarted. You can disable file icons by selecting None.
VS code ships with two icon themes; Minimal and Seti. To install more icon themes, select the Install Additional File Icon Themes item in the icon theme picker and you'll see a query for file icon themes (tag:icon-theme) in the Extensions view.
You can also browse the VS Code Marketplace site directly to find available themes.
The active File Icon theme is persisted in your user settings (keyboard shortcut ⌘, (Windows, Linux Ctrl+,)).
Creating your own File Icon Theme
You can create your own File Icon Theme from icons (preferably SVG), see the Icon Theme topic in our Extension API section for details.
Visual Studio For Themes For Mac
Next steps
Visual Studio For Mac Tutorial
Themes are just one way to customize VS Code. If you'd like to learn more about VS Code customization and extensibility, try these topics:
- Settings - Learn how to configure VS Code to your preferences through user and workspace settings.
- Snippets - Add additional snippets to your favorite language.
- Extension API - Learn about other ways to extend VS Code.
- Color Theme - Color Theme extension API.
- Icon Theme - Icon Theme extension API.
9/4/2019