Skip to main content
Coding Theme

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • badge.background#4d4d4d
  • badge.foreground#ffffff
  • button.background#4d4d4d
  • button.foreground#ffffff
  • button.hoverBackground#c2bfa5
  • dropdown.background#4d4d4d
  • dropdown.foreground#ffffff
  • editor.background#333333
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#4d4d4d
  • editor.selectionBackground#4d4d4d
  • editorBracketHighlight.foreground1#ffffff
  • editorBracketHighlight.foreground2#ffffff
  • editorBracketHighlight.foreground3#ffffff
  • editorBracketHighlight.foreground4#ffffff
  • editorBracketHighlight.foreground5#ffffff
  • editorBracketHighlight.foreground6#ffffff
  • editorCursor.background#708090
  • editorCursor.foreground#ffffff
  • editorGroupHeader.tabsBackground#4d4d4d
  • editorLineNumber.activeForeground#ffff50
  • editorLineNumber.foreground#4d4d4d
  • editorOverviewRuler.border#00000000
  • editorWarning.foreground#f0e68c
  • input.background#4d4d4d
  • input.foreground#ffffff
  • input.placeholderForeground#a0a0a0
  • inputOption.activeBorder#f0e68c
  • list.activeSelectionBackground#4d4d4d
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#4d4d4d
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#4d4d4d
  • list.inactiveSelectionForeground#ffffff
  • panel.background#333333
  • panel.border#333333
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#a0a0a0
  • sideBar.background#333333
  • sideBar.foreground#ffffff
  • statusBar.background#c2bfa5
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#c2bfa5
  • statusBar.noFolderForeground#000000
  • statusBarItem.hoverBackground#d4d0c8
  • tab.activeForeground#ffffff
  • tab.border#333333
  • tab.inactiveForegrounddefault
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#87ceeb
  • terminal.ansiCyan#ffdab9
  • terminal.ansiGreen#86d886
  • terminal.ansiMagenta#ffa0a0
  • terminal.ansiRed#ffa0a0
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#f0e68c
  • terminal.background#333333
  • terminal.border#000000
  • terminal.foreground#ffffff
  • titleBar.activeBackground#333333
  • titleBar.inactiveBackground#333333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.operator#ffffff
comment, punctuation.definition.comment#87ceeb
constant, variable.other.constant#ffa0a0
variable, support.variable#ffffff
keyword, storage.function, support.type, support.class#f0e68c
support.type.property-name#ffffff
entity.name.function.preprocessor, meta.preprocessor#ffa0a0
storage.type, support.type#F0E68C
storage.type.function#F0E68C
support.type.property-name#ffffff
keyword.other.special-method, meta.block-level#ffdab9
invalid, invalid.illegal#ffffff
todo, keyword.other.todo#ff4500
entity.name.filename.find-in-files#f0e68c
string.quoted#ffa0a0
constant.numeric#ffa0a0
string.quoted.other#ffffff
variable.other, entity.name.function#86d886
punctuation.expression.bracket.round#fedead
desert.vim by AFLO - VS Code Theme