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#0f1610
  • activityBar.border#1d4125
  • activityBar.dropBorder#637d75
  • activityBar.foreground#2f7e25
  • activityBar.inactiveForeground#1d4125
  • activityBarBadge.background#2f7e25
  • activityBarBadge.foreground#fff
  • badge.background#2f7e25
  • button.background#0f1610
  • button.border#1d4125
  • button.foreground#637d75
  • button.secondaryBackground#000e07
  • button.secondaryForeground#637d75
  • debugConsole.errorForeground#7f2b27
  • debugConsole.infoForeground#2f7e25
  • debugConsole.sourceForeground#647d75
  • debugConsole.warningForeground#717f24
  • debugIcon.breakpointCurrentStackframeForeground#e08009
  • debugIcon.breakpointDisabledForeground#1d4125
  • debugIcon.breakpointForeground#18e000
  • debugIcon.breakpointStackframeForeground#00e0c4
  • debugIcon.continueForeground#00aae0
  • debugIcon.disconnectForeground#00aae0
  • debugIcon.pauseForeground#00aae0
  • debugIcon.restartForeground#2f7e25
  • debugIcon.startForeground#2f7e25
  • debugIcon.stepBackForeground#00aae0
  • debugIcon.stepIntoForeground#00aae0
  • debugIcon.stepOutForeground#00aae0
  • debugIcon.stepOverForeground#00aae0
  • debugIcon.stopForeground#7f2b27
  • debugTokenExpression.boolean#18e000
  • debugTokenExpression.error#7f2b27
  • debugTokenExpression.name#327f77
  • debugTokenExpression.number#00e0c4
  • debugTokenExpression.string#647d75
  • debugToolBar.background#000e07
  • debugToolBar.border#0f1610
  • debugView.stateLabelBackground#112616
  • debugView.stateLabelForeground#18e000
  • debugView.valueChangedHighlight#bde00080
  • diffEditor.diagonalFill#647d7550
  • diffEditor.insertedTextBackground#18e00010
  • diffEditor.removedTextBackground#7f2b2735
  • dropdown.background#0f1610
  • editor.background#0f1610
  • editor.findMatchBackground#be0c0350
  • editor.findMatchHighlightBackground#18e00020
  • editor.focusedStackFrameHighlightBackground#47587f20
  • editor.foreground#839496
  • 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#e08009
  • editorBracketHighlight.foreground3#bde000
  • editorBracketHighlight.foreground4#73fa91
  • editorBracketHighlight.foreground5#00e0c4
  • editorCursor.background#0f1610
  • editorCursor.foreground#73fa91
  • editorError.foreground#7f2b27
  • editorGroup.border#1d4125
  • editorGroupHeader.tabsBackground#000e07
  • editorLineNumber.activeForeground#637d75
  • editorLineNumber.foreground#1d4125
  • editorOverviewRuler.addedForeground#e08009
  • editorOverviewRuler.deletedForeground#3c4812
  • editorOverviewRuler.errorForeground#7f2b27
  • editorOverviewRuler.infoForeground#647d75
  • editorOverviewRuler.modifiedForeground#73fa9180
  • editorOverviewRuler.warningForeground#717f24
  • editorWarning.foreground#717f24
  • editorWidget.background#000e07
  • editorWidget.border#1d4125
  • editorWidget.foreground#637d75
  • errorForeground#7f2b27
  • focusBorder#1d4125
  • gitDecoration.conflictingResourceForeground#7f2b27
  • gitDecoration.modifiedResourceForeground#717f24
  • gitDecoration.untrackedResourceForeground#2f7e25
  • icon.foreground#647d75
  • input.background#0f1610
  • input.foreground#637d75
  • list.activeSelectionBackground#0f1610
  • list.activeSelectionForeground#637d75
  • list.errorForeground#7f2b27
  • list.focusBackground#11261698
  • list.focusHighlightForeground#2f7e25
  • list.focusOutline#1d4125
  • list.highlightForeground#2f7e25
  • list.hoverBackground#0f1610
  • list.inactiveSelectionBackground#11261698
  • list.warningForeground#717f24
  • menu.background#000e07
  • menu.foreground#637d75
  • menu.separatorBackground#0f1610
  • minimap.errorHighlight#7f2b27
  • minimap.findMatchHighlight#18e00060
  • minimap.selectionHighlight#1d4125
  • minimap.selectionOccurrenceHighlight#bde00070
  • minimap.warningHighlight#717f24
  • minimapGutter.addedBackground#e08009
  • minimapGutter.deletedBackground#3c4812
  • minimapGutter.modifiedBackground#73fa9190
  • notificationLink.foreground#2f7e25
  • notificationsErrorIcon.foreground#7f2b27
  • notificationsInfoIcon.foreground#2f6a7f
  • notificationsWarningIcon.foreground#717f24
  • notificationToast.border#1d4125
  • panel.background#000e07
  • panel.border#1d4125
  • panelSection.border#1d4125
  • panelSectionHeader.background#0f1610
  • panelSectionHeader.foreground#637d75
  • panelTitle.activeBorder#1d4125
  • panelTitle.activeForeground#637d75
  • peekView.border#2f7e25
  • peekViewEditor.background#000e07
  • peekViewEditor.matchHighlightBackground#1d4125
  • peekViewResult.background#000e07
  • peekViewResult.fileForeground#2f7e25
  • peekViewResult.lineForeground#637d75
  • peekViewResult.matchHighlightBackground#1d4125
  • peekViewResult.selectionBackground#0f1610
  • peekViewTitle.background#000e07
  • peekViewTitleDescription.foreground#2f7e25
  • peekViewTitleLabel.foreground#18e000
  • problemsErrorIcon.foreground#7f2b27
  • problemsInfoIcon.foreground#2f6a7f
  • problemsWarningIcon.foreground#717f24
  • scrollbarSlider.activeBackground#717f24bb
  • scrollbarSlider.background#11261698
  • scrollbarSlider.hoverBackground#1d4125bb
  • selection.background#18e00020
  • sideBar.background#000e07
  • sideBar.border#1d4125
  • sideBar.foreground#637d75
  • sideBarSectionHeader.background#0f1610
  • sideBarTitle.foreground#637d75
  • statusBar.background#000e07
  • statusBar.border#1d4125
  • statusBar.debuggingBackground#3c4812
  • statusBar.debuggingBorder#3c4812
  • statusBar.debuggingForeground#bde000
  • statusBar.foreground#637d75
  • statusBar.noFolderBackground#000e07
  • statusBar.noFolderBorder#1d4125
  • statusBar.noFolderForeground#637d75
  • statusBarItem.activeBackground#0f1610
  • statusBarItem.errorBackground#7f2b27
  • statusBarItem.hoverBackground#0f1610
  • statusBarItem.prominentBackground#112616
  • statusBarItem.prominentHoverBackground#112616
  • statusBarItem.warningBackground#bde000
  • tab.activeBackground#11261698
  • tab.activeBorder#1d4125
  • tab.activeForeground#637d75
  • tab.border#1d4125
  • tab.inactiveBackground#0f1610
  • tab.inactiveForeground#637d75
  • terminal.ansiBlack#112616
  • terminal.ansiBlue#2f6a7f
  • terminal.ansiBrightBlack#3c4812
  • terminal.ansiBrightBlue#00aae0
  • terminal.ansiBrightCyan#00e0c4
  • terminal.ansiBrightGreen#717f24
  • terminal.ansiBrightMagenta#0058e0
  • terminal.ansiBrightRed#e08009
  • terminal.ansiBrightWhite#717f24
  • terminal.ansiBrightYellow#bde000
  • terminal.ansiCyan#327f77
  • terminal.ansiGreen#2f7e25
  • terminal.ansiMagenta#47587f
  • terminal.ansiRed#e08009
  • terminal.ansiWhite#647d75
  • terminal.ansiYellow#717f24
  • terminal.background#000e07
  • terminal.foreground#637d75
  • terminal.selectionBackground#1d4125
  • terminalCursor.foreground#73fa91
  • textLink.activeForeground#18e000
  • textLink.foreground#2f7e25
  • titleBar.activeBackground#0f1610
  • titleBar.activeForeground#637d75
  • titleBar.border#1d4125
  • titleBar.inactiveBackground#0f1610
  • widget.shadow#000e07

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#839496
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#839496
comment#586E75italic
string#2AA198
string.regexp#DC322F
constant.numeric#D33682
variable.language, variable.other#268BD2
keyword#859900
storage#93A1A1bold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#CB4B16
entity.name.function#268BD2
punctuation.definition.variable#859900
punctuation.section.embedded.begin, punctuation.section.embedded.end#DC322F
constant.language, meta.preprocessor#B58900
support.function.construct, keyword.other.new#CB4B16
constant.character, constant.other#CB4B16
entity.other.inherited-class, punctuation.separator.namespace.ruby#6C71C4
variable.parameter
entity.name.tag#268BD2
punctuation.definition.tag#586E75
entity.other.attribute-name#93A1A1
support.function#268BD2
punctuation.separator.continuation#DC322F
support.constant, support.variable
support.type, support.class#859900
support.type.exception#CB4B16
support.other.variable
invalid#DC322F
meta.diff, meta.diff.header#268BD2italic
markup.deleted#DC322F
markup.changed#CB4B16
markup.inserted#859900
markup.quote#859900
markup.list#B58900
markup.bold, markup.italic#D33682
markup.boldbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inline.raw#2AA198
markup.heading#268BD2bold
markup.heading.setext#268BD2
Alien Blood Contrast by kozcode - VS Code Theme