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.activeBorder#000000
  • activityBar.background#000000
  • activityBar.border#0a0a0a
  • activityBar.foreground#bfbfbf
  • activityBar.inactiveForeground#3d3d3d
  • activityBarBadge.background#606060
  • badge.background#1a1a1a
  • badge.foreground#bfbfbf
  • button.background#181818
  • button.hoverBackground#1f1f1f
  • checkbox.border#0a0a0a
  • dart.closingLabels#141414
  • debugIcon.breakpointCurrentStackframeForeground#919191
  • debugIcon.breakpointDisabledForeground#919191
  • debugIcon.breakpointForeground#919191
  • debugIcon.breakpointStackframeForeground#919191
  • debugIcon.breakpointUnverifiedForeground#919191
  • debugIcon.continueForeground#919191
  • debugIcon.disconnectForeground#919191
  • debugIcon.pauseForeground#919191
  • debugIcon.restartForeground#919191
  • debugIcon.startForeground#919191
  • debugIcon.stepBackForeground#919191
  • debugIcon.stepIntoForeground#919191
  • debugIcon.stepOutForeground#919191
  • debugIcon.stepOverForeground#919191
  • debugIcon.stopForeground#919191
  • debugToolBar.background#000000
  • dropdown.background#000000
  • dropdown.foreground#919191
  • editor.background#000000
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#808080
  • editor.findMatchHighlightBackground#000000
  • editor.findMatchHighlightBorder#3d3d3d
  • editor.foldBackground#000000
  • editor.foreground#aaaaaa
  • editor.hoverHighlightBackground#0f0f0f
  • editor.lineHighlightBackground#060606
  • editor.selectionBackground#0f0f0f
  • editorBracketMatch.background#000000
  • editorBracketMatch.border#3d3d3d
  • editorCursor.foreground#aaaaaa
  • editorError.foreground#5c5c5c
  • editorGroup.border#0a0a0a
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#0a0a0a
  • editorHoverWidget.statusBarBackground#000000
  • editorIndentGuide.activeBackground#3d3d3d
  • editorIndentGuide.background#141414
  • editorInfo.foreground#5c5c5c
  • editorLightBulb.foreground#919191
  • editorLineNumber.activeForeground#424242
  • editorLineNumber.foreground#1a1a1a
  • editorLink.activeForeground#bfbfbf
  • editorOverviewRuler.border#0a0a0a
  • editorRuler.foreground#141414
  • editorSuggestWidget.foreground#606060
  • editorSuggestWidget.highlightForeground#bfbfbf
  • editorWarning.foreground#5c5c5c
  • editorWhitespace.foreground#1a1a1a
  • editorWidget.background#000000
  • focusBorder#000000
  • gitDecoration.addedResourceForeground#c0c0c0
  • gitDecoration.conflictingResourceForeground#c0c0c0
  • gitDecoration.deletedResourceForeground#606060
  • gitDecoration.ignoredResourceForeground#272727
  • gitDecoration.modifiedResourceForeground#c0c0c0
  • gitDecoration.submoduleResourceForeground#606060
  • gitDecoration.untrackedResourceForeground#c0c0c0
  • icon.foreground#383838
  • input.background#000000
  • input.border#000000
  • input.foreground#919191
  • list.activeSelectionBackground#0a0a0a
  • list.activeSelectionForeground#bfbfbf
  • list.errorForeground#ff6846
  • list.filterMatchBackground#1a1a1a
  • list.filterMatchBorder#000000
  • list.focusBackground#0a0a0a
  • list.highlightForeground#999999
  • list.hoverBackground#000000
  • list.inactiveSelectionBackground#000000
  • list.inactiveSelectionForeground#bfbfbf
  • list.warningForeground#ffbb58
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#ff6846
  • listFilterWidget.outline#3d3d3d
  • menu.background#000000
  • menu.foreground#919191
  • 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
  • sash.hoverBorder#0f0f0f
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#ffffff0f
  • scrollbarSlider.background#ffffff0f
  • scrollbarSlider.hoverBackground#ffffff0f
  • settings.checkboxBorder#0a0a0a
  • settings.dropdownBorder#0a0a0a
  • settings.modifiedItemIndicator#383838
  • settings.textInputBorder#0a0a0a
  • sideBar.background#000000
  • sideBar.border#0a0a0a
  • sideBar.foreground#606060
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#0a0a0a
  • statusBar.background#000000
  • statusBar.border#0a0a0a
  • statusBar.debuggingBackground#000000
  • statusBar.debuggingBorder#0a0a0a
  • statusBar.debuggingForeground#919191
  • statusBar.foreground#919191
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderBorder#0a0a0a
  • statusBar.noFolderForeground#919191
  • statusBarItem.activeBackground#000000
  • statusBarItem.hoverBackground#000000
  • symbolIcon.arrayForeground#919191
  • symbolIcon.booleanForeground#919191
  • symbolIcon.classForeground#919191
  • symbolIcon.colorForeground#919191
  • symbolIcon.constantForeground#919191
  • symbolIcon.constructorForeground#919191
  • symbolIcon.enumeratorForeground#919191
  • symbolIcon.enumeratorMemberForeground#919191
  • symbolIcon.eventForeground#919191
  • symbolIcon.fieldForeground#919191
  • symbolIcon.fileForeground#919191
  • symbolIcon.folderForeground#919191
  • symbolIcon.functionForeground#919191
  • symbolIcon.interfaceForeground#919191
  • symbolIcon.keyForeground#919191
  • symbolIcon.keywordForeground#919191
  • symbolIcon.methodForeground#919191
  • symbolIcon.moduleForeground#919191
  • symbolIcon.namespaceForeground#919191
  • symbolIcon.nullForeground#919191
  • symbolIcon.numberForeground#919191
  • symbolIcon.objectForeground#919191
  • symbolIcon.operatorForeground#919191
  • symbolIcon.packageForeground#919191
  • symbolIcon.propertyForeground#919191
  • symbolIcon.referenceForeground#919191
  • symbolIcon.snippetForeground#919191
  • symbolIcon.stringForeground#919191
  • symbolIcon.structForeground#919191
  • symbolIcon.textForeground#919191
  • symbolIcon.typeParameterForeground#919191
  • symbolIcon.unitForeground#919191
  • symbolIcon.variableForeground#919191
  • tab.activeForeground#bfbfbf
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#3d3d3d
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#333333
  • terminal.ansiBrightBlack#1a1a1a
  • terminal.ansiBrightBlue#333333
  • terminal.ansiBrightCyan#666666
  • terminal.ansiBrightGreen#4d4d4d
  • terminal.ansiBrightMagenta#999999
  • terminal.ansiBrightRed#808080
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#aaaaaa
  • terminal.ansiCyan#666666
  • terminal.ansiGreen#4d4d4d
  • terminal.ansiMagenta#999999
  • terminal.ansiRed#808080
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#aaaaaa
  • terminal.background#000000
  • terminal.foreground#999999
  • terminalCursor.background#000000
  • terminalCursor.foreground#aaaaaa
  • textLink.activeForeground#ffffff
  • textLink.foreground#ffffff
  • textPreformat.foreground#919191
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#919191
  • titleBar.border#0a0a0a
  • titleBar.inactiveBackground#000000
  • tree.indentGuidesStroke#141414
  • window.activeBorder#0a0a0a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter.function#a3a3a3
comment, punctuation.definition.comment#363636
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array#aaaaaa
none#aaaaaa
keyword.operator#aaaaaa
keyword#ff0088
variable#d1d1d1
entity.name.function, meta.require, support.function.any-method#fcfcfc
support.class, entity.name.class, entity.name.type.class#999999
meta.class#f5f5f5
keyword.other.special-method#606060
storage#ff0088
support.function#808080
string, constant.other.symbol, entity.other.inherited-class#ff0088
constant.numeric#919191
none#919191
none#919191
constant#919191
entity.name.tag#707070
entity.other.attribute-name#919191
entity.other.attribute-name.id, punctuation.definition.entity#606060
meta.selector#6b6b6b
none#919191
markup.heading punctuation.definition.heading, entity.name.section#606060
keyword.other.unit#919191
markup.bold, punctuation.definition.bold#999999bold
markup.italic, punctuation.definition.italic#6b6b6bitalic
markup.raw.inline#8a8a8a
string.other.link, punctuation.definition.string.end.markdown#707070
meta.link#919191
markup.list#707070
markup.quote#919191
meta.separator#aaaaaa
markup.inserted#8a8a8a
markup.deleted#707070
markup.changed#6b6b6b
constant.other.color#808080
string.regexp#808080
constant.character.escape#808080
punctuation.section.embedded, variable.interpolation#6b6b6b
invalid.illegal#f5f5f5
invalid.broken#000000
invalid.deprecated#f5f5f5
invalid.unimplemented#f5f5f5
MK Mono by MVTKVM - VS Code Theme