Home
→ Framer Syntax Theme

Framer Syntax Theme

A beautiful VSCode & Atom theme, inspired by our code editor

Syntax is a new theme inspired by the color, clarity and characteristics of Framer’s popular code editor. By using visual aids like specific selection highlighting and custom widget styling, this minimalist dark theme helps you understand the structure of your code, even while editing large files.

Embed

Featured 2 years ago

Discussion

Would you recommend this product?

5 Reviews5.0/5

Benjamin den Boer

Maker

Say hello to Framer Syntax, a beautifully minimalist dark theme for Atom and VSCode. It contains all the color, clarity and characteristics you know and love about our popular code editor. From specific selection highlighting to custom widget styling, Syntax offers all the structure you need to build amazing products for the Web.

Upvote (8)Share 2 years ago

Prakhar Bhardwaj

@benjaminnathan this is such a cool theme. Can you tell me what font are you using in the screenshots?

Upvote (1)Share 2 years ago

Georgemaine Lourens

@benjaminnathan @mag_ops It's Input Mono, you can get it here http://input.fontbureau.com/down...

Upvote (6)Share 2 years ago

Amir

@benjaminnathan Please add Sublime Text version too 🙏🏼

Upvote (4)Share 2 years ago

Marcelo Risoli

Love it, can we get the same for iTerm2 or Hyper.js?

Upvote (4)Share 2 years ago

Reony Tonneyck

I ended up overwriting the background colors with the VS Code defaults. Much easier contrast on the eyes, along with the Framer Syntax colors. Here's the User Settings snippet if you wanna try it out:

{

"window.zoomLevel": 0,

"workbench.colorTheme": "Framer Syntax",

"workbench.colorCustomizations": {

"statusBar.background": "#279DF9",

"statusBar.foreground": "#fff",

"statusBarItem.hoverBackground": "#2183D0",

"statusBarItem.activeBackground": "#53B0F9",

"panel.background": "#1e1e1e",

"sideBar.background": "#1e1e1e",

"editor.background": "#1e1e1e",

"editorGutter.background": "#1a1a1a"