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#000084
  • activityBar.border#bbbbbb
  • activityBar.dropBackground#000000
  • activityBar.foreground#bbbbbb
  • activityBarBadge.background#00a8ac
  • activityBarBadge.foreground#ffffff
  • badge.background#00a8ac
  • badge.foreground#ffffff
  • button.background#1ba026
  • button.foreground#ffffff
  • button.hoverBackground#00a8ac
  • debugExceptionWidget.background#051336
  • debugExceptionWidget.border#ab395b
  • debugToolBar.background#051336
  • diffEditor.insertedTextBackground#31958a55
  • diffEditor.removedTextBackground#892f4688
  • dropdown.background#181f2f
  • editor.background#000084
  • editor.findMatchHighlightBackground#eeeeee44
  • editor.lineHighlightBackground#082050
  • editor.selectionBackground#00a8ac
  • editorCursor.foreground#ffff00
  • editorGroup.background#1c1c2a
  • editorGroup.border#2b2b4a
  • editorGroup.dropBackground#25375daa
  • editorGroupHeader.tabsBackground#1c1c2a
  • editorHoverWidget.background#000c38
  • editorHoverWidget.border#004c18
  • editorIndentGuide.background#002952
  • editorLineNumber.foreground#406385
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#ab395b
  • editorMarkerNavigationWarning.background#5b7e7a
  • editorWhitespace.foreground#103050
  • editorWidget.background#262641
  • extensionButton.prominentBackground#5f8b3b
  • extensionButton.prominentHoverBackground#5f8b3bbb
  • focusBorder#596f99
  • foreground#ffffff
  • input.background#00a8ac
  • inputOption.activeBorder#1d4a87
  • inputValidation.errorBackground#a22d44
  • inputValidation.errorBorder#ab395b
  • inputValidation.infoBackground#051336
  • inputValidation.infoBorder#384078
  • inputValidation.warningBackground#5b7e7a
  • inputValidation.warningBorder#5b7e7a
  • list.activeSelectionBackground#00a8ac
  • list.dropBackground#041d52
  • list.focusBackground#08286b
  • list.highlightForeground#0063a5
  • list.hoverBackground#061940
  • list.inactiveSelectionBackground#bbbbbb
  • list.inactiveSelectionForeground#000000
  • notification.background#182543
  • panel.background#000000
  • panel.border#2b2b4a
  • panel.dropBackground#000000
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#eeeeee33
  • peekViewResult.background#060621
  • peekViewResult.matchHighlightBackground#eeeeee44
  • peekViewTitle.background#10192c
  • pickerGroup.border#596f99
  • pickerGroup.foreground#596f99
  • progressBar.background#0063a5
  • scrollbar.shadow#515e91aa
  • scrollbarSlider.activeBackground#3b3f5188
  • scrollbarSlider.background#bbbbbb
  • scrollbarSlider.hoverBackground#3b3f5188
  • sideBar.background#000084
  • sideBar.border#bbbbbb
  • sideBarSectionHeader.background#000084
  • sideBarSectionHeader.foreground#ffffff
  • statusBar.background#ff0000
  • statusBar.border#ffffff
  • statusBar.debuggingBackground#10192c
  • statusBar.noFolderBackground#000084
  • statusBarItem.activeBackground#ff0000
  • statusBarItem.prominentBackground#0063a5
  • statusBarItem.prominentHoverBackground#0063a5dd
  • tab.activeBackground#000084
  • tab.border#2b2b4a
  • tab.inactiveBackground#bbbbbb
  • tab.inactiveForeground#000000
  • terminal.ansiBlack#111111
  • terminal.ansiBlue#bbdaff
  • terminal.ansiBrightBlack#333333
  • terminal.ansiBrightBlue#80baff
  • terminal.ansiBrightCyan#78ffff
  • terminal.ansiBrightGreen#b8f171
  • terminal.ansiBrightMagenta#d778ff
  • terminal.ansiBrightRed#ff7882
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe580
  • terminal.ansiCyan#99ffff
  • terminal.ansiGreen#d1f1a9
  • terminal.ansiMagenta#ebbbff
  • terminal.ansiRed#ff9da4
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#ffeead
  • titleBar.activeBackground#10192c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#bbbbbbff
meta.embedded, source.groovy.embedded#6688cc
comment#384887
string#22aa44
constant.numeric#f280d0
constant.language#f280d0
constant.character, constant.other#f280d0
variable
keyword#225588
storage#225588
storage.type#9966b8italic
entity.name.class, entity.name.type#ffeebbunderline
entity.other.inherited-class#ddbb88italic underline
entity.name.function#ddbb88
variable.parameter#2277ffitalic
entity.name.tag#225588
entity.other.attribute-name#ddbb88
support.function#9966b8
support.constant#9966b8
support.type, support.class#9966b8italic
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#dc322f
markup.changed#cb4b16
markup.inserted#219186
markup.quote#22aa44
markup.bold, markup.italic#22aa44
markup.inline.raw#9966b8
markup.heading.setext#ddbb88
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
comment#808080
string#FFFF00
keyword#5ed8f0
keyword.control#5ed8f0
storage#5ed8f0
storage.type#5ed8f0
constant.numeric#FF00FF
entity.name.type#fff
entity.name.class#fff
support.type#fff
support.class#fff
entity.name.function#00FF00
variable#fff
comment, comment.block, comment.block.documentation, comment.line, constant, constant.character, constant.character.escape, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.other, constant.regexp, constant.rgb-value, emphasis, entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.section, entity.name.selector, entity.name.tag, entity.name.type, entity.other, entity.other.attribute-name, entity.other.inherited-class, invalid, invalid.deprecated, invalid.illegal, keyword, keyword.control, keyword.operator, keyword.operator.new, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.other, markup, markup.bold, markup.changed, markup.deleted, markup.heading, markup.inline.raw, markup.inserted, markup.italic, markup.list, markup.list.numbered, markup.list.unnumbered, markup.other, markup.quote, markup.raw, markup.underline, markup.underline.link, meta, meta.block, meta.cast, meta.class, meta.function, meta.function-call, meta.preprocessor, meta.return-type, meta.selector, meta.tag, meta.type.annotation, meta.type, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.separator, punctuation.separator.continuation, punctuation.terminator, storage, storage.modifier, storage.type, string, string.interpolated, string.other, string.quoted, string.quoted.double, string.quoted.other, string.quoted.single, string.quoted.triple, string.regexp, string.unquoted, strong, support, support.class, support.constant, support.function, support.other, support.type, support.type.property-name, support.variable, variable, variable.language, variable.name, variable.other, variable.other.readwrite, variable.parameter