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.

  • activityBar.background#f2f2b0
  • activityBar.foreground#2a4073
  • activityBarBadge.background#6c2c2f
  • badge.background#640125
  • badge.foreground#fdeff2
  • button.background#db8449
  • debugExceptionWidget.background#d4dcd6
  • debugExceptionWidget.border#640125
  • debugToolBar.background#e6eae3
  • dropdown.background#e9e4d4
  • dropdown.border#640125
  • editor.background#fff1cf
  • editor.foreground#433d3c
  • editor.lineHighlightBackground#e8d3c7
  • editor.selectionBackground#95949a
  • editorCursor.foreground#433d3c
  • editorGroup.border#640125
  • editorGroup.dropBackground#f8e58c50
  • editorGroupHeader.tabsBackground#ede4cd
  • editorHoverWidget.background#dddcd680
  • editorIndentGuide.activeBackground1#e9e4d4
  • editorIndentGuide.background1#e9e4d4
  • editorLineNumber.activeForeground#839b5c
  • editorLineNumber.foreground#c8c2c6
  • editorWhitespace.foreground#cbb994
  • editorWidget.background#e9e4d4
  • extensionButton.prominentBackground#db8449
  • extensionButton.prominentHoverBackground#dddcd680
  • focusBorder#640125
  • input.background#e9e4d4
  • input.foreground#2a4073
  • input.placeholderForeground#888084AA
  • inputOption.activeBorder#640125
  • list.activeSelectionBackground#fddea5
  • list.activeSelectionForeground#2a4073
  • list.highlightForeground#2a4073
  • list.hoverBackground#dddcd680
  • list.inactiveSelectionBackground#ede4cd
  • minimap.background#f4dda5
  • minimap.selectionHighlight#bb554840
  • panel.border#640125
  • peekView.border#640125
  • peekViewEditor.background#ebe1a9
  • peekViewEditor.matchHighlightBackground#f2f2b0
  • peekViewResult.background#ebe1a9
  • peekViewTitle.background#ede4cd
  • pickerGroup.border#640125
  • pickerGroup.foreground#455765
  • ports.iconRunningProcessForeground#e2041b
  • progressBar.background#e9e4d4
  • quickInputList.focusBackground#fddea5
  • selection.background#dddcd680
  • sideBar.background#ebe1a9
  • sideBarTitle.foreground#2a4073
  • statusBar.background#d8e698
  • statusBar.debuggingBackground#c3d825
  • statusBar.foreground#2a4073
  • statusBar.noFolderBackground#eae5e3
  • statusBarItem.prominentBackground#a8bf93
  • statusBarItem.prominentHoverBackground#dddcd680
  • statusBarItem.remoteBackground#c7dc68
  • statusBarItem.remoteForeground#2a4073
  • tab.activeBackground#fff1cf
  • tab.activeModifiedBorder#640125
  • tab.border#640125
  • tab.inactiveBackground#e9e4d4
  • tab.inactiveForeground#8491c3
  • tab.lastPinnedBorder#ebf6f7
  • terminal.ansiBlack#433d3c
  • terminal.ansiBlue#007bbb
  • terminal.ansiBrightBlack#544a47
  • terminal.ansiBrightBlue#2ca9e1
  • terminal.ansiBrightCyan#a59aca
  • terminal.ansiBrightGreen#028760
  • terminal.ansiBrightMagenta#cc7eb1
  • terminal.ansiBrightRed#e2041b
  • terminal.ansiBrightWhite#eae5e3
  • terminal.ansiBrightYellow#ebd842
  • terminal.ansiCyan#7058a3
  • terminal.ansiGreen#007b43
  • terminal.ansiMagenta#aa4c8f
  • terminal.ansiRed#c53d43
  • terminal.ansiWhite#e5e4e6
  • terminal.ansiYellow#e6b422
  • terminal.background#fff1cf
  • titleBar.activeBackground#ede4cd
  • walkThrough.embeddedEditorBackground#d4dcd6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#769164
comment.block.preprocessor#3a5b52bold
comment.documentation, comment.block.documentation#82ae46
invalid.illegal#e2041b
keyword, storage#522f60bold
keyword.operator#433d3c
constant.language, support.constant, variable.language#316745bold
variable, support.variable#433d3c
entity.name, support.function#2f5d50
entity.other.inherited-class, support.class#2f5d50bold
support.type, storage.type, entity.name.type#156e83bold
storage.type.struct, storage.type.class, storage.type.modifier.access.control#522f60bold
entity.name.exception#522f60
entity.name.sectionbold
string, constant.character#887f7abold underline
constant.character.escape#544a47
string.regexp#007bbb
constant.other.symbol#f08300
markup.changed#433d3c
markup.deleted#433d3c
markup.italicitalic
markup.error#e2041b
markup.inserted#433d3c
meta.link#5383c3
markup.output, markup.raw#544a47
markup.prompt#544a47
markup.heading#156e83bold
markup.boldbold
markup.traceback#752100
markup.underlineunderline
markup.quote#a22041
markup.list#2c4f54
markup.bold, markup.italic#478384
markup.inline.raw#494a41
meta.diff.range, meta.diff.index, meta.separator#426579
meta.diff.header.from-file#82ae46
meta.diff.header.to-file#00a497
nippon-light by piste-jp - VS Code Theme