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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter.function#ebebeb
comment, punctuation.definition.comment#555555
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array#ebebeb
none#ebebeb
keyword.operator#ebebeb
keyword#b1b1b1
variable#b8b8b8
entity.name.function, meta.require, support.function.any-method#a0a0a0
support.class, entity.name.class, entity.name.type.class#ebebeb
meta.class#ebebeb
keyword.other.special-method#a0a0a0
storage#b1b1b1
support.function#d0d0d0
string, constant.other.symbol, entity.other.inherited-class#dfdfdf
constant.numeric#eaeaea
none#eaeaea
none#eaeaea
constant#eaeaea
entity.name.tag#b8b8b8
entity.other.attribute-name#eaeaea
entity.other.attribute-name.id, punctuation.definition.entity#a0a0a0
meta.selector#b1b1b1
none#eaeaea
markup.heading punctuation.definition.heading, entity.name.section#a0a0a0
keyword.other.unit#eaeaea
markup.bold, punctuation.definition.bold#ebebebbold
markup.italic, punctuation.definition.italic#b1b1b1italic
markup.raw.inline#dfdfdf
string.other.link, punctuation.definition.string.end.markdown#b8b8b8
meta.link#eaeaea
markup.list#b8b8b8
markup.quote#eaeaea
meta.separator#ebebeb
markup.inserted#dfdfdf
markup.deleted#b8b8b8
markup.changed#b1b1b1
constant.other.color#d0d0d0
string.regexp#d0d0d0
constant.character.escape#d0d0d0
punctuation.section.embedded, variable.interpolation#b1b1b1
invalid.illegal#ebebeb
invalid.broken#101010
invalid.deprecated#ebebeb
invalid.unimplemented#ebebeb