Note: This extension is still very much a work-in-progress. Please report bugs to the GitHub repository.
Native macOS is a color theme for Visual Studio Code that aims to match native macOS applications as closely as possible. The extension includes four versions - two light and two dark, with a light and a dark editor version for each. You can download it here.
The "Light theme, light editor" variant The "Light theme, dark editor" variant The "Dark theme, light editor" variant The "Dark theme, dark editor" variantThere are a few optional tweaks you can do to really nail down the look of native macOS. The native title bar, for example, really makes a huge difference, and so does the font, SF Mono (you can find that here, if you don't already have it installed). You can easily perform these tweaks by using the command pallette to open settings.json
(Shift
+ Ctrl
+ P
on Windows, Shift
+ ⌘
+ P
on Mac) and searching "Preferences".
"window.titleBarStyle": "native",
"window.nativeTabs": true
"editor.fontSize": 12,
"editor.fontFamily": "SF Mono, Monaco",
"editor.tabSize": 2,
"editor.fontWeight": "normal"
You can also hide the Activity bar and replace it with an extension like Activitus Bar to further the look, and use an extension like Vibrancy to enhance it.
"workbench.activityBar.visible": false,
"vscode_vibrancy.theme": "Dark (Only Subbar)",
"vscode_vibrancy.type": "menu",
"vscode_vibrancy.opacity": 0
If you'd like, you can also disable the minimap, though I personally prefer to keep mine on for ease of use.
"editor.minimap.enabled": false
To complete the look, you can also replace the default icon of Visual Studio Code with one of the macOS-themed icons included. icon.png
will work on both macOS and Windows, and icon.icns
and icon.ico
will work exclusively on each one respectively.
Navigate to your applications folder and find Visual Studio Code. Right-click on it, then click "Get Info".
Navigate to the Visual Studio Code extensions folder (Users/your-name/.vscode/extensions
)1. Find the Native macOS Theme Folder (dsoloha.native-macos-0.0.1
), then drag the icon.icns
file onto the Info pane, onto the small icon at the top (directly under the title bar).
Restart Visual Studio Code. Remove it from your dock and re-add it, if necessary.
1 If the .vscode
folder isn't showing, press Shift
+ ⌘
+ .
to show your hidden folders.
Open the directory in which you installed Visual Studio Code (C:\users\your-name\AppData\Local\Programs\Microsoft VS Code
by default). Right-click the VSCode.exe
executable, then click Properties, then press the Change Icon button. From here, navigate to the Visual Studio Code extensions directory (%USERPROFILE%\.vscode\extensions
by default). Double-click on icon.ico
.
Restart Visual Studio Code.