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.activeBorder#c5c5c5
  • activityBar.background#171717
  • activityBar.inactiveForeground#c5c5c5
  • checkbox.border#0a0a0a
  • commandCenter.activeBackground#000
  • commandCenter.activeForeground#ffffff
  • commandCenter.border#000
  • commandCenter.foreground#ffffff
  • commandCenter.inactiveBorder#454545
  • commandCenter.inactiveForeground#ffffff
  • debugIcon.breakpointCurrentStackframeForeground#aaaaaa
  • debugIcon.breakpointDisabledForeground#aaaaaa
  • debugIcon.breakpointForeground#aaaaaa
  • debugIcon.breakpointStackframeForeground#aaaaaa
  • debugIcon.breakpointUnverifiedForeground#aaaaaa
  • debugIcon.continueForeground#aaaaaa
  • debugIcon.disconnectForeground#aaaaaa
  • debugIcon.pauseForeground#aaaaaa
  • debugIcon.restartForeground#aaaaaa
  • debugIcon.startForeground#aaaaaa
  • debugIcon.stepBackForeground#aaaaaa
  • debugIcon.stepIntoForeground#aaaaaa
  • debugIcon.stepOutForeground#aaaaaa
  • debugIcon.stepOverForeground#aaaaaa
  • debugIcon.stopForeground#aaaaaa
  • debugToolBar.background#000000
  • dropdown.background#000000
  • dropdown.foreground#aaaaaa
  • editor.background#000
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#999999
  • editor.findMatchHighlightBackground#000000
  • editor.findMatchHighlightBorder#3d3d3d
  • editor.foldBackground#000000
  • editor.foreground#b3b3b3
  • editor.hoverHighlightBackground#0f0f0f
  • editor.lineHighlightBackground#060606
  • editor.selectionBackground#222
  • editorBracketHighlight.foreground1#ddd
  • editorBracketMatch.background#000000
  • editorBracketMatch.border#3d3d3d
  • editorCursor.foreground#b3b3b3
  • editorError.background#3f0c08
  • editorError.foreground#d0ff00
  • editorGroup.border#0a0a0a00
  • editorGroupHeader.tabsBackground#000
  • editorGroupHeader.tabsBorder#121212
  • editorGutter.foldingControlForeground#888
  • editorHoverWidget.statusBarBackground#000000
  • editorIndentGuide.activeBackground1#3d3d3d
  • editorIndentGuide.background1#141414
  • editorInfo.foreground#5c5c5c
  • editorLightBulb.foreground#aaaaaa
  • editorLineNumber.activeForeground#777
  • editorLineNumber.foreground#222
  • editorLink.activeForeground#bfbfbf
  • editorOverviewRuler.border#0a0a0a
  • editorRuler.foreground#141414
  • editorSuggestWidget.foreground#777777
  • editorSuggestWidget.highlightForeground#bfbfbf
  • editorWarning.foreground#5c5c5c
  • editorWhitespace.foreground#1a1a1a
  • editorWidget.background#000000
  • focusBorder#000000
  • gitDecoration.addedResourceForeground#c0c0c0
  • gitDecoration.conflictingResourceForeground#c0c0c0
  • gitDecoration.deletedResourceForeground#777777
  • gitDecoration.ignoredResourceForeground#272727
  • gitDecoration.modifiedResourceForeground#c0c0c0
  • gitDecoration.submoduleResourceForeground#777777
  • gitDecoration.untrackedResourceForeground#c0c0c0
  • icon.foreground#fff
  • input.background#000000
  • input.border#181818
  • input.foreground#aaaaaa
  • list.activeSelectionBackground#333
  • list.activeSelectionForeground#bfbfbf
  • list.errorForeground#ff6846
  • list.filterMatchBackground#1a1a1a
  • list.filterMatchBorder#000000
  • list.focusBackground#0a0a0a
  • list.highlightForeground#999999
  • list.hoverBackground#000000
  • list.inactiveSelectionBackground#222
  • list.inactiveSelectionForeground#bfbfbf
  • list.warningForeground#ffbb58
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#ff6846
  • listFilterWidget.outline#3d3d3d
  • menu.background#000000
  • menu.foreground#aaaaaa
  • menubar.selectionBackground#0a0a0a
  • panel.border#0a0a0a
  • panelTitle.activeBorder#000000
  • panelTitle.activeForeground#bfbfbf
  • panelTitle.inactiveForeground#3d3d3d
  • peekView.border#383838
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#000000
  • peekViewEditor.matchHighlightBorder#3d3d3d
  • peekViewEditorGutter.background#000000
  • peekViewResult.background#060606
  • peekViewResult.fileForeground#999999
  • peekViewResult.lineForeground#3d3d3d
  • peekViewResult.matchHighlightBackground#0f0f0f
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#bfbfbf
  • pickerGroup.foreground#9d9d9d
  • quickInput.background#151515
  • quickInput.foreground#999
  • quickInputList.focusBackground#000
  • quickInputList.focusForeground#fff
  • sash.hoverBorder#0f0f0f
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#ffffff0f
  • scrollbarSlider.background#222
  • scrollbarSlider.hoverBackground#ffffff0f
  • settings.checkboxBorder#0a0a0a
  • settings.dropdownBorder#0a0a0a
  • settings.modifiedItemIndicator#383838
  • settings.textInputBorder#0a0a0a
  • sideBar.background#000000
  • sideBar.border#151515
  • sideBar.foreground#aaa
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#0a0a0a
  • statusBar.background#000000
  • statusBar.border#0a0a0a
  • statusBar.debuggingBackground#000000
  • statusBar.debuggingBorder#0a0a0a
  • statusBar.debuggingForeground#aaaaaa
  • statusBar.foreground#aaaaaa
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderBorder#0a0a0a
  • statusBar.noFolderForeground#aaaaaa
  • statusBarItem.activeBackground#000000
  • statusBarItem.hoverBackground#000000
  • symbolIcon.arrayForeground#aaaaaa
  • symbolIcon.booleanForeground#aaaaaa
  • symbolIcon.classForeground#aaaaaa
  • symbolIcon.colorForeground#aaaaaa
  • symbolIcon.constantForeground#aaaaaa
  • symbolIcon.constructorForeground#aaaaaa
  • symbolIcon.enumeratorForeground#aaaaaa
  • symbolIcon.enumeratorMemberForeground#aaaaaa
  • symbolIcon.eventForeground#aaaaaa
  • symbolIcon.fieldForeground#aaaaaa
  • symbolIcon.fileForeground#aaaaaa
  • symbolIcon.folderForeground#aaaaaa
  • symbolIcon.functionForeground#aaaaaa
  • symbolIcon.interfaceForeground#aaaaaa
  • symbolIcon.keyForeground#aaaaaa
  • symbolIcon.keywordForeground#aaaaaa
  • symbolIcon.methodForeground#aaaaaa
  • symbolIcon.moduleForeground#aaaaaa
  • symbolIcon.namespaceForeground#aaaaaa
  • symbolIcon.nullForeground#aaaaaa
  • symbolIcon.numberForeground#aaaaaa
  • symbolIcon.objectForeground#aaaaaa
  • symbolIcon.operatorForeground#aaaaaa
  • symbolIcon.packageForeground#aaaaaa
  • symbolIcon.propertyForeground#aaaaaa
  • symbolIcon.referenceForeground#aaaaaa
  • symbolIcon.snippetForeground#aaaaaa
  • symbolIcon.stringForeground#aaaaaa
  • symbolIcon.structForeground#aaaaaa
  • symbolIcon.textForeground#aaaaaa
  • symbolIcon.typeParameterForeground#aaaaaa
  • symbolIcon.unitForeground#aaaaaa
  • symbolIcon.variableForeground#aaaaaa
  • tab.activeBackground#151515
  • tab.activeBorder#fff
  • tab.activeForeground#ffffff
  • tab.border#00000000
  • tab.hoverBackground#151515
  • tab.inactiveBackground#000
  • tab.inactiveForeground#666
  • tab.unfocusedHoverBackground#000
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#333333
  • terminal.ansiBrightBlack#1a1a1a
  • terminal.ansiBrightBlue#333333
  • terminal.ansiBrightCyan#666666
  • terminal.ansiBrightGreen#4d4d4d
  • terminal.ansiBrightMagenta#999999
  • terminal.ansiBrightRed#999999
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#b3b3b3
  • terminal.ansiCyan#666666
  • terminal.ansiGreen#4d4d4d
  • terminal.ansiMagenta#999999
  • terminal.ansiRed#999999
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#b3b3b3
  • terminal.background#000000
  • terminal.foreground#999999
  • terminalCursor.background#000000
  • terminalCursor.foreground#b3b3b3
  • textLink.activeForeground#ffffff
  • textLink.foreground#ffffff
  • textPreformat.foreground#aaaaaa
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#aaaaaa
  • titleBar.border#0a0a0a
  • titleBar.inactiveBackground#000000
  • tree.indentGuidesStroke#141414
  • window.activeBorder#0a0a0a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string#aaa
variable.parameter.function#B3B3B3
comment, punctuation.definition.comment#555
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array#B3B3B3
none#B3B3B3
keyword.operator#B3B3B3
keyword#424254
variable#fff
entity.name.function#5038FF
meta.require, support.function.any-method#777777
support.class, entity.name.class, entity.name.type.class#B88E8D
meta.class#F5F5F5
keyword.other.special-method#454545
storage#5c6394
support.function#999999
string, constant.other.symbol, entity.other.inherited-class#3fb47f
constant.numeric#aaaaaa
none#aaaaaa
none#aaaaaa
constant#aaaaaa
entity.name.tag#888888
entity.other.attribute-name#aaaaaa
entity.other.attribute-name.id, punctuation.definition.entity#777777
meta.selector#777777
none#aaaaaa
markup.heading punctuation.definition.heading, entity.name.section#777777
keyword.other.unit#aaaaaa
markup.bold, punctuation.definition.bold#999999bold
markup.italic, punctuation.definition.italic#777777italic
markup.raw.inline#999999
string.other.link, punctuation.definition.string.end.markdown#b3b3b3
meta.link#aaaaaa
markup.list#b3b3b3
markup.quote#aaaaaa
meta.separator#B3B3B3
markup.inserted#999999
markup.deleted#888888
markup.changed#777777
constant.other.color#999999
string.regexp#999999
constant.character.escape#999999
punctuation.section.embedded, variable.interpolation#777777
invalid.illegal#F44747
invalid.broken#F44747
invalid.deprecated#F5F5F5
invalid.unimplemented#F5F5F5
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
support.class#cccbold
meta.tag#7b7a9c
variable#fff
Darknight vscode theme by salva.js - VS Code Theme