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#121212
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#6b6b6b
  • activityBarBadge.background#a8a8a8
  • badge.background#2e2e2e
  • badge.foreground#ffffff
  • button.background#2a2a2a
  • button.hoverBackground#363636
  • checkbox.border#121212
  • dart.closingLabels#232323
  • debugIcon.breakpointCurrentStackframeForeground#fefefe
  • debugIcon.breakpointDisabledForeground#fefefe
  • debugIcon.breakpointForeground#fefefe
  • debugIcon.breakpointStackframeForeground#fefefe
  • debugIcon.breakpointUnverifiedForeground#fefefe
  • debugIcon.continueForeground#fefefe
  • debugIcon.disconnectForeground#fefefe
  • debugIcon.pauseForeground#fefefe
  • debugIcon.restartForeground#fefefe
  • debugIcon.startForeground#fefefe
  • debugIcon.stepBackForeground#fefefe
  • debugIcon.stepIntoForeground#fefefe
  • debugIcon.stepOutForeground#fefefe
  • debugIcon.stepOverForeground#fefefe
  • debugIcon.stopForeground#fefefe
  • debugToolBar.background#000000
  • dropdown.background#000000
  • dropdown.foreground#fefefe
  • editor.background#000000
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#e0e0e0
  • editor.findMatchHighlightBackground#000000
  • editor.findMatchHighlightBorder#6b6b6b
  • editor.foldBackground#000000
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#1a1a1a
  • editor.lineHighlightBackground#0b0b0b
  • editor.selectionBackground#1a1a1a
  • editorBracketMatch.background#000000
  • editorBracketMatch.border#6b6b6b
  • editorCursor.foreground#ffffff
  • editorError.foreground#ff6846
  • editorGroup.border#121212
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#121212
  • editorHoverWidget.statusBarBackground#000000
  • editorIndentGuide.activeBackground#6b6b6b
  • editorIndentGuide.background#242424
  • editorInfo.foreground#a1a1a1
  • editorLightBulb.foreground#fefefe
  • editorLineNumber.activeForeground#747474
  • editorLineNumber.foreground#2e2e2e
  • editorLink.activeForeground#ffffff
  • editorOverviewRuler.border#121212
  • editorRuler.foreground#242424
  • editorSuggestWidget.foreground#a8a8a8
  • editorSuggestWidget.highlightForeground#ffffff
  • editorWarning.foreground#ffbb58
  • editorWhitespace.foreground#2e2e2e
  • editorWidget.background#000000
  • focusBorder#000000
  • gitDecoration.addedResourceForeground#ffffff
  • gitDecoration.conflictingResourceForeground#FF0000
  • gitDecoration.deletedResourceForeground#F27983
  • gitDecoration.ignoredResourceForeground#484F5E
  • gitDecoration.modifiedResourceForeground#77A8D9
  • gitDecoration.submoduleResourceForeground#D4BFFF
  • gitDecoration.untrackedResourceForeground#A6CC70
  • icon.foreground#626262
  • input.background#000000
  • input.border#000000
  • input.foreground#fefefe
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#ff6846
  • list.filterMatchBackground#2e2e2e
  • list.filterMatchBorder#000000
  • list.focusBackground#121212
  • list.highlightForeground#ffffff
  • list.hoverBackground#000000
  • list.inactiveSelectionBackground#000000
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#ffbb58
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#ff6846
  • listFilterWidget.outline#6b6b6b
  • menu.background#000000
  • menu.foreground#fefefe
  • menubar.selectionBackground#000000
  • panel.border#121212
  • panelTitle.activeBorder#000000
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#6b6b6b
  • peekView.border#626262
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#000000
  • peekViewEditor.matchHighlightBorder#6b6b6b
  • peekViewEditorGutter.background#000000
  • peekViewResult.background#0b0b0b
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#6b6b6b
  • peekViewResult.matchHighlightBackground#1a1a1a
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#ffffff
  • pickerGroup.foreground#ffffff
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#ffffff1a
  • scrollbarSlider.background#ffffff1a
  • scrollbarSlider.hoverBackground#ffffff1a
  • settings.checkboxBorder#121212
  • settings.dropdownBorder#121212
  • settings.modifiedItemIndicator#626262
  • settings.textInputBorder#121212
  • sideBar.background#000000
  • sideBar.border#121212
  • sideBar.foreground#a8a8a8
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#121212
  • statusBar.background#000000
  • statusBar.border#121212
  • statusBar.debuggingBackground#000000
  • statusBar.debuggingBorder#121212
  • statusBar.debuggingForeground#fefefe
  • statusBar.foreground#fefefe
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderBorder#121212
  • statusBar.noFolderForeground#fefefe
  • statusBarItem.activeBackground#000000
  • statusBarItem.hoverBackground#000000
  • symbolIcon.arrayForeground#fefefe
  • symbolIcon.booleanForeground#fefefe
  • symbolIcon.classForeground#fefefe
  • symbolIcon.colorForeground#fefefe
  • symbolIcon.constantForeground#fefefe
  • symbolIcon.constructorForeground#fefefe
  • symbolIcon.enumeratorForeground#fefefe
  • symbolIcon.enumeratorMemberForeground#fefefe
  • symbolIcon.eventForeground#fefefe
  • symbolIcon.fieldForeground#fefefe
  • symbolIcon.fileForeground#fefefe
  • symbolIcon.folderForeground#fefefe
  • symbolIcon.functionForeground#fefefe
  • symbolIcon.interfaceForeground#fefefe
  • symbolIcon.keyForeground#fefefe
  • symbolIcon.keywordForeground#fefefe
  • symbolIcon.methodForeground#fefefe
  • symbolIcon.moduleForeground#fefefe
  • symbolIcon.namespaceForeground#fefefe
  • symbolIcon.nullForeground#fefefe
  • symbolIcon.numberForeground#fefefe
  • symbolIcon.objectForeground#fefefe
  • symbolIcon.operatorForeground#fefefe
  • symbolIcon.packageForeground#fefefe
  • symbolIcon.propertyForeground#fefefe
  • symbolIcon.referenceForeground#fefefe
  • symbolIcon.snippetForeground#fefefe
  • symbolIcon.stringForeground#fefefe
  • symbolIcon.structForeground#fefefe
  • symbolIcon.textForeground#fefefe
  • symbolIcon.typeParameterForeground#fefefe
  • symbolIcon.unitForeground#fefefe
  • symbolIcon.variableForeground#fefefe
  • tab.activeForeground#ffffff
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#6b6b6b
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#595959
  • terminal.ansiBrightBlack#2d2d2d
  • terminal.ansiBrightBlue#595959
  • terminal.ansiBrightCyan#b3b3b3
  • terminal.ansiBrightGreen#868686
  • terminal.ansiBrightMagenta#ffffff
  • terminal.ansiBrightRed#dfdfdf
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffffff
  • terminal.ansiCyan#b3b3b3
  • terminal.ansiGreen#868686
  • terminal.ansiMagenta#ffffff
  • terminal.ansiRed#dfdfdf
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffffff
  • terminal.background#000000
  • terminal.foreground#ffffff
  • terminalCursor.background#000000
  • terminalCursor.foreground#ffffff
  • textLink.activeForeground#ffffff
  • textLink.foreground#ffffff
  • textPreformat.foreground#fefefe
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#fefefe
  • titleBar.border#121212
  • titleBar.inactiveBackground#000000
  • tree.indentGuidesStroke#232323
  • window.activeBorder#121212

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter.function#ffffff
comment, punctuation.definition.comment#515151
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array#ffffff
none#ffffff
keyword.operator#ffffff
keyword#bbbbbb
variable#c4c4c4
entity.name.function, meta.require, support.function.any-method#a8a8a8
support.class, entity.name.class, entity.name.type.class#ffffff
meta.class#ffffff
keyword.other.special-method#a8a8a8
storage#bbbbbb
support.function#e0e0e0
string, constant.other.symbol, entity.other.inherited-class#f2f2f2
constant.numeric#fefefe
none#fefefe
none#fefefe
constant#fefefe
entity.name.tag#c4c4c4
entity.other.attribute-name#fefefe
entity.other.attribute-name.id, punctuation.definition.entity#a8a8a8
meta.selector#bbbbbb
none#fefefe
markup.heading punctuation.definition.heading, entity.name.section#a8a8a8
keyword.other.unit#fefefe
markup.bold, punctuation.definition.bold#ffffffbold
markup.italic, punctuation.definition.italic#bbbbbbitalic
markup.raw.inline#f2f2f2
string.other.link, punctuation.definition.string.end.markdown#c4c4c4
meta.link#fefefe
markup.list#c4c4c4
markup.quote#fefefe
meta.separator#ffffff
markup.inserted#f2f2f2
markup.deleted#c4c4c4
markup.changed#bbbbbb
constant.other.color#e0e0e0
string.regexp#e0e0e0
constant.character.escape#e0e0e0
punctuation.section.embedded, variable.interpolation#bbbbbb
invalid.illegal#ffffff
invalid.broken#000000
invalid.deprecated#ffffff
invalid.unimplemented#ffffff
Monochrome (fork by dkamyshov) by dkamyshov - VS Code Theme