Skip to main content
Coding Theme

Color themes

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#0f1610
  • activityBar.border#37793f
  • activityBar.dropBorder#c2d8ce
  • activityBar.foreground#4fd93c
  • activityBar.inactiveForeground#37793f
  • activityBarBadge.background#2f7e25
  • activityBarBadge.foreground#fff
  • badge.background#2f7e25
  • button.background#0f1610
  • button.border#37793f
  • button.foreground#c2d8ce
  • button.secondaryBackground#000e07
  • button.secondaryForeground#c2d8ce
  • debugConsole.errorForeground#f0554e
  • debugConsole.infoForeground#4fd93c
  • debugConsole.sourceForeground#c2d8ce
  • debugConsole.warningForeground#c3db3a
  • debugIcon.breakpointCurrentStackframeForeground#ffa62b
  • debugIcon.breakpointDisabledForeground#37793f
  • debugIcon.breakpointForeground#18e000
  • debugIcon.breakpointStackframeForeground#00e0c4
  • debugIcon.continueForeground#00aae0
  • debugIcon.disconnectForeground#00aae0
  • debugIcon.pauseForeground#00aae0
  • debugIcon.restartForeground#4fd93c
  • debugIcon.startForeground#4fd93c
  • debugIcon.stepBackForeground#00aae0
  • debugIcon.stepIntoForeground#00aae0
  • debugIcon.stepOutForeground#00aae0
  • debugIcon.stepOverForeground#00aae0
  • debugIcon.stopForeground#f0554e
  • debugTokenExpression.boolean#18e000
  • debugTokenExpression.error#f0554e
  • debugTokenExpression.name#4fcfc2
  • debugTokenExpression.number#00e0c4
  • debugTokenExpression.string#c2d8ce
  • debugToolBar.background#000e07
  • debugToolBar.border#0f1610
  • debugView.stateLabelBackground#112616
  • debugView.stateLabelForeground#18e000
  • debugView.valueChangedHighlight#bde00080
  • diffEditor.diagonalFill#c2d8ce50
  • diffEditor.insertedTextBackground#18e00010
  • diffEditor.removedTextBackground#7f2b2735
  • dropdown.background#0f1610
  • editor.background#0f1610
  • editor.findMatchBackground#be0c0350
  • editor.findMatchHighlightBackground#18e00020
  • editor.focusedStackFrameHighlightBackground#47587f20
  • editor.foreground#d3dede
  • editor.lineHighlightBackground#1d412520
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#1d412577
  • editor.snippetFinalTabstopHighlightBackground#1d412544
  • editor.snippetTabstopHighlightBackground#1d412544
  • editor.stackFrameHighlightBackground#e0d10013
  • editor.wordHighlightBackground#3c481260
  • editor.wordHighlightStrongBackground#647d7550
  • editorBracketHighlight.foreground1#18e000
  • editorBracketHighlight.foreground2#ffa62b
  • editorBracketHighlight.foreground3#bde000
  • editorBracketHighlight.foreground4#73fa91
  • editorBracketHighlight.foreground5#00e0c4
  • editorCursor.background#0f1610
  • editorCursor.foreground#73fa91
  • editorError.foreground#f0554e
  • editorGroup.border#37793f
  • editorGroupHeader.tabsBackground#000e07
  • editorLineNumber.activeForeground#e2f0e8
  • editorLineNumber.foreground#6cae7a
  • editorOverviewRuler.addedForeground#ffa62b
  • editorOverviewRuler.deletedForeground#6e8526
  • editorOverviewRuler.errorForeground#f0554e
  • editorOverviewRuler.infoForeground#c2d8ce
  • editorOverviewRuler.modifiedForeground#73fa9180
  • editorOverviewRuler.warningForeground#c3db3a
  • editorWarning.foreground#c3db3a
  • editorWidget.background#000e07
  • editorWidget.border#37793f
  • editorWidget.foreground#c2d8ce
  • errorForeground#f0554e
  • focusBorder#37793f
  • gitDecoration.conflictingResourceForeground#f0554e
  • gitDecoration.modifiedResourceForeground#c3db3a
  • gitDecoration.untrackedResourceForeground#4fd93c
  • icon.foreground#c2d8ce
  • input.background#0f1610
  • input.foreground#c2d8ce
  • list.activeSelectionBackground#0f1610
  • list.activeSelectionForeground#c2d8ce
  • list.errorForeground#f0554e
  • list.focusBackground#11261698
  • list.focusHighlightForeground#4fd93c
  • list.focusOutline#37793f
  • list.highlightForeground#4fd93c
  • list.hoverBackground#0f1610
  • list.inactiveSelectionBackground#11261698
  • list.warningForeground#c3db3a
  • menu.background#000e07
  • menu.foreground#c2d8ce
  • menu.separatorBackground#0f1610
  • minimap.errorHighlight#f0554e
  • minimap.findMatchHighlight#18e00060
  • minimap.selectionHighlight#37793f
  • minimap.selectionOccurrenceHighlight#bde00070
  • minimap.warningHighlight#c3db3a
  • minimapGutter.addedBackground#e08009
  • minimapGutter.deletedBackground#3c4812
  • minimapGutter.modifiedBackground#73fa9190
  • notificationLink.foreground#4fd93c
  • notificationsErrorIcon.foreground#f0554e
  • notificationsInfoIcon.foreground#4fbadd
  • notificationsWarningIcon.foreground#c3db3a
  • notificationToast.border#37793f
  • panel.background#000e07
  • panel.border#37793f
  • panelSection.border#37793f
  • panelSectionHeader.background#0f1610
  • panelSectionHeader.foreground#c2d8ce
  • panelTitle.activeBorder#37793f
  • panelTitle.activeForeground#c2d8ce
  • peekView.border#4fd93c
  • peekViewEditor.background#000e07
  • peekViewEditor.matchHighlightBackground#1d4125
  • peekViewResult.background#000e07
  • peekViewResult.fileForeground#4fd93c
  • peekViewResult.lineForeground#c2d8ce
  • peekViewResult.matchHighlightBackground#1d4125
  • peekViewResult.selectionBackground#0f1610
  • peekViewTitle.background#000e07
  • peekViewTitleDescription.foreground#4fd93c
  • peekViewTitleLabel.foreground#18e000
  • problemsErrorIcon.foreground#f0554e
  • problemsInfoIcon.foreground#4fbadd
  • problemsWarningIcon.foreground#c3db3a
  • scrollbarSlider.activeBackground#717f24bb
  • scrollbarSlider.background#11261698
  • scrollbarSlider.hoverBackground#1d4125bb
  • selection.background#18e00020
  • sideBar.background#000e07
  • sideBar.border#37793f
  • sideBar.foreground#c2d8ce
  • sideBarSectionHeader.background#0f1610
  • sideBarTitle.foreground#c2d8ce
  • statusBar.background#e08009
  • statusBar.border#e08009
  • statusBar.debuggingBackground#e08009
  • statusBar.debuggingBorder#e08009
  • statusBar.debuggingForeground#08120b
  • statusBar.foreground#08120b
  • statusBar.noFolderBackground#e08009
  • statusBar.noFolderBorder#e08009
  • statusBar.noFolderForeground#08120b
  • statusBarItem.activeBackground#0000003d
  • statusBarItem.errorBackground#7f2b27
  • statusBarItem.hoverBackground#00000026
  • statusBarItem.prominentBackground#00000030
  • statusBarItem.prominentHoverBackground#00000045
  • statusBarItem.remoteBackground#e08009
  • statusBarItem.remoteForeground#08120b
  • statusBarItem.warningBackground#bde000
  • tab.activeBackground#11261698
  • tab.activeBorder#37793f
  • tab.activeForeground#c2d8ce
  • tab.border#37793f
  • tab.inactiveBackground#0f1610
  • tab.inactiveForeground#c2d8ce
  • terminal.ansiBlack#112616
  • terminal.ansiBlue#4fbadd
  • terminal.ansiBrightBlack#6e8526
  • terminal.ansiBrightBlue#00aae0
  • terminal.ansiBrightCyan#00e0c4
  • terminal.ansiBrightGreen#c3db3a
  • terminal.ansiBrightMagenta#5f8dff
  • terminal.ansiBrightRed#ffa62b
  • terminal.ansiBrightWhite#f2f8f5
  • terminal.ansiBrightYellow#bde000
  • terminal.ansiCyan#4fcfc2
  • terminal.ansiGreen#4fd93c
  • terminal.ansiMagenta#8b9ae0
  • terminal.ansiRed#ffa62b
  • terminal.ansiWhite#d6e6de
  • terminal.ansiYellow#c3db3a
  • terminal.background#000e07
  • terminal.foreground#d6e6de
  • terminal.selectionBackground#1d4125
  • terminalCursor.foreground#73fa91
  • textLink.activeForeground#18e000
  • textLink.foreground#4fd93c
  • titleBar.activeBackground#0f1610
  • titleBar.activeForeground#c2d8ce
  • titleBar.border#37793f
  • titleBar.inactiveBackground#0f1610
  • widget.shadow#000e07

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d3dede
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#d3dede
comment#93a8aeitalic
string#4fdcd0
string.regexp#ff5f58
constant.numeric#ff6bad
variable.language, variable.other#63bdff
keyword#c3dd1a
storage#dce6e6bold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#ff7b30
entity.name.function#63bdff
punctuation.definition.variable#c3dd1a
punctuation.section.embedded.begin, punctuation.section.embedded.end#ff5f58
constant.language, meta.preprocessor#f0bd20
support.function.construct, keyword.other.new#ff7b30
constant.character, constant.other#ff7b30
entity.other.inherited-class, punctuation.separator.namespace.ruby#a3a8f5
variable.parameter
entity.name.tag#63bdff
punctuation.definition.tag#93a8ae
entity.other.attribute-name#dce6e6
support.function#63bdff
punctuation.separator.continuation#ff5f58
support.constant, support.variable
support.type, support.class#c3dd1a
support.type.exception#ff7b30
support.other.variable
invalid#ff5f58
meta.diff, meta.diff.header#63bdffitalic
markup.deleted#ff5f58
markup.changed#ff7b30
markup.inserted#c3dd1a
markup.quote#c3dd1a
markup.list#f0bd20
markup.bold, markup.italic#ff6bad
markup.boldbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inline.raw#4fdcd0
markup.heading#63bdffbold
markup.heading.setext#63bdff