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#ebebeb
  • activityBar.background#ebebeb
  • activityBar.border#e2e2e2
  • activityBar.foreground#474747
  • activityBar.inactiveForeground#b7b7b7
  • activityBarBadge.background#545454
  • badge.background#d5d5d5
  • badge.foreground#474747
  • button.background#d6d6d6
  • button.hoverBackground#d0d0d0
  • checkbox.border#e2e2e2
  • dart.closingLabels#dadada
  • debugIcon.breakpointCurrentStackframeForeground#6e6e6e
  • debugIcon.breakpointDisabledForeground#6e6e6e
  • debugIcon.breakpointForeground#6e6e6e
  • debugIcon.breakpointStackframeForeground#6e6e6e
  • debugIcon.breakpointUnverifiedForeground#6e6e6e
  • debugIcon.continueForeground#6e6e6e
  • debugIcon.disconnectForeground#6e6e6e
  • debugIcon.pauseForeground#6e6e6e
  • debugIcon.restartForeground#6e6e6e
  • debugIcon.startForeground#6e6e6e
  • debugIcon.stepBackForeground#6e6e6e
  • debugIcon.stepIntoForeground#6e6e6e
  • debugIcon.stepOutForeground#6e6e6e
  • debugIcon.stepOverForeground#6e6e6e
  • debugIcon.stopForeground#6e6e6e
  • debugToolBar.background#ebebeb
  • dropdown.background#ebebeb
  • dropdown.foreground#6e6e6e
  • editor.background#ebebeb
  • editor.findMatchBackground#ebebeb
  • editor.findMatchBorder#7d7d7d
  • editor.findMatchHighlightBackground#ebebeb
  • editor.findMatchHighlightBorder#b7b7b7
  • editor.foldBackground#ebebeb
  • editor.foreground#515151
  • editor.hoverHighlightBackground#dedede
  • editor.lineHighlightBackground#e6e6e6
  • editor.selectionBackground#dedede
  • editorBracketMatch.background#ebebeb
  • editorBracketMatch.border#b7b7b7
  • editorCursor.foreground#515151
  • editorError.foreground#9c9c9c
  • editorGroup.border#e2e2e2
  • editorGroupHeader.tabsBackground#ebebeb
  • editorGroupHeader.tabsBorder#e2e2e2
  • editorHoverWidget.statusBarBackground#ebebeb
  • editorIndentGuide.activeBackground#b6b6b6
  • editorIndentGuide.background#d9d9d9
  • editorInfo.foreground#9c9c9c
  • editorLightBulb.foreground#6e6e6e
  • editorLineNumber.activeForeground#b2b2b2
  • editorLineNumber.foreground#d5d5d5
  • editorLink.activeForeground#474747
  • editorOverviewRuler.border#e2e2e2
  • editorRuler.foreground#d9d9d9
  • editorSuggestWidget.foreground#545454
  • editorSuggestWidget.highlightForeground#474747
  • editorWarning.foreground#9c9c9c
  • editorWhitespace.foreground#d5d5d5
  • editorWidget.background#ebebeb
  • focusBorder#ebebeb
  • gitDecoration.addedResourceForeground#464646
  • gitDecoration.conflictingResourceForeground#464646
  • gitDecoration.deletedResourceForeground#545454
  • gitDecoration.ignoredResourceForeground#c9c9c9
  • gitDecoration.modifiedResourceForeground#464646
  • gitDecoration.submoduleResourceForeground#545454
  • gitDecoration.untrackedResourceForeground#464646
  • icon.foreground#bbbbbb
  • input.background#ebebeb
  • input.border#ebebeb
  • input.foreground#6e6e6e
  • list.activeSelectionBackground#e2e2e2
  • list.activeSelectionForeground#474747
  • list.errorForeground#be1e0c
  • list.filterMatchBackground#d5d5d5
  • list.filterMatchBorder#ebebeb
  • list.focusBackground#e2e2e2
  • list.highlightForeground#686868
  • list.hoverBackground#ebebeb
  • list.inactiveSelectionBackground#ebebeb
  • list.inactiveSelectionForeground#474747
  • list.warningForeground#bd7c16
  • listFilterWidget.background#ebebeb
  • listFilterWidget.noMatchesOutline#be1e0c
  • listFilterWidget.outline#b7b7b7
  • menu.background#ebebeb
  • menu.foreground#6e6e6e
  • menubar.selectionBackground#e2e2e2
  • panel.border#e2e2e2
  • panelTitle.activeBorder#ebebeb
  • panelTitle.activeForeground#474747
  • panelTitle.inactiveForeground#b7b7b7
  • peekView.border#bbbbbb
  • peekViewEditor.background#ebebeb
  • peekViewEditor.matchHighlightBackground#ebebeb
  • peekViewEditor.matchHighlightBorder#b7b7b7
  • peekViewEditorGutter.background#ebebeb
  • peekViewResult.background#e6e6e6
  • peekViewResult.fileForeground#686868
  • peekViewResult.lineForeground#b7b7b7
  • peekViewResult.matchHighlightBackground#dedede
  • peekViewResult.selectionBackground#ebebeb
  • peekViewResult.selectionForeground#474747
  • pickerGroup.foreground#646464
  • sash.hoverBorder#dedede
  • scrollbar.shadow#ebebeb
  • scrollbarSlider.activeBackground#1010100f
  • scrollbarSlider.background#1010100f
  • scrollbarSlider.hoverBackground#1010100f
  • settings.checkboxBorder#e2e2e2
  • settings.dropdownBorder#e2e2e2
  • settings.modifiedItemIndicator#bbbbbb
  • settings.textInputBorder#e2e2e2
  • sideBar.background#ebebeb
  • sideBar.border#e2e2e2
  • sideBar.foreground#545454
  • sideBarSectionHeader.background#ebebeb
  • sideBarSectionHeader.border#e2e2e2
  • statusBar.background#ebebeb
  • statusBar.border#e2e2e2
  • statusBar.debuggingBackground#ebebeb
  • statusBar.debuggingBorder#e2e2e2
  • statusBar.debuggingForeground#6e6e6e
  • statusBar.foreground#6e6e6e
  • statusBar.noFolderBackground#ebebeb
  • statusBar.noFolderBorder#e2e2e2
  • statusBar.noFolderForeground#6e6e6e
  • statusBarItem.activeBackground#ebebeb
  • statusBarItem.hoverBackground#ebebeb
  • symbolIcon.arrayForeground#6e6e6e
  • symbolIcon.booleanForeground#6e6e6e
  • symbolIcon.classForeground#6e6e6e
  • symbolIcon.colorForeground#6e6e6e
  • symbolIcon.constantForeground#6e6e6e
  • symbolIcon.constructorForeground#6e6e6e
  • symbolIcon.enumeratorForeground#6e6e6e
  • symbolIcon.enumeratorMemberForeground#6e6e6e
  • symbolIcon.eventForeground#6e6e6e
  • symbolIcon.fieldForeground#6e6e6e
  • symbolIcon.fileForeground#6e6e6e
  • symbolIcon.folderForeground#6e6e6e
  • symbolIcon.functionForeground#6e6e6e
  • symbolIcon.interfaceForeground#6e6e6e
  • symbolIcon.keyForeground#6e6e6e
  • symbolIcon.keywordForeground#6e6e6e
  • symbolIcon.methodForeground#6e6e6e
  • symbolIcon.moduleForeground#6e6e6e
  • symbolIcon.namespaceForeground#6e6e6e
  • symbolIcon.nullForeground#6e6e6e
  • symbolIcon.numberForeground#6e6e6e
  • symbolIcon.objectForeground#6e6e6e
  • symbolIcon.operatorForeground#6e6e6e
  • symbolIcon.packageForeground#6e6e6e
  • symbolIcon.propertyForeground#6e6e6e
  • symbolIcon.referenceForeground#6e6e6e
  • symbolIcon.snippetForeground#6e6e6e
  • symbolIcon.stringForeground#6e6e6e
  • symbolIcon.structForeground#6e6e6e
  • symbolIcon.textForeground#6e6e6e
  • symbolIcon.typeParameterForeground#6e6e6e
  • symbolIcon.unitForeground#6e6e6e
  • symbolIcon.variableForeground#6e6e6e
  • tab.activeForeground#474747
  • tab.border#ebebeb
  • tab.inactiveBackground#ebebeb
  • tab.inactiveForeground#b7b7b7
  • terminal.ansiBlack#ebebeb
  • terminal.ansiBlue#bfbfbf
  • terminal.ansiBrightBlack#d5d5d5
  • terminal.ansiBrightBlue#bfbfbf
  • terminal.ansiBrightCyan#939393
  • terminal.ansiBrightGreen#a9a9a9
  • terminal.ansiBrightMagenta#686868
  • terminal.ansiBrightRed#7e7e7e
  • terminal.ansiBrightWhite#101010
  • terminal.ansiBrightYellow#525252
  • terminal.ansiCyan#939393
  • terminal.ansiGreen#a9a9a9
  • terminal.ansiMagenta#686868
  • terminal.ansiRed#7e7e7e
  • terminal.ansiWhite#3c3c3c
  • terminal.ansiYellow#525252
  • terminal.background#ebebeb
  • terminal.foreground#686868
  • terminalCursor.background#ebebeb
  • terminalCursor.foreground#515151
  • textLink.activeForeground#101010
  • textLink.foreground#101010
  • textPreformat.foreground#6e6e6e
  • titleBar.activeBackground#ebebeb
  • titleBar.activeForeground#6e6e6e
  • titleBar.border#e2e2e2
  • titleBar.inactiveBackground#ebebeb
  • tree.indentGuidesStroke#dadada
  • window.activeBorder#e2e2e2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter.function#515151—
comment, punctuation.definition.comment#A8A8A8—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array#515151—
none#515151—
keyword.operator#1F1F1F—
keyword#BD0065—
variable#8b8b8b—
entity.name.function, meta.require, support.function.any-method#545454—
support.class, entity.name.class, entity.name.type.class#686868—
meta.class#191919—
keyword.other.special-method#545454—
storage#BD0065—
support.function#7d7d7d—
string, constant.other.symbol, entity.other.inherited-class#BD0065—
constant.numeric#6e6e6e—
none#6e6e6e—
none#6e6e6e—
constant#6e6e6e—
entity.name.tag#8b8b8b—
entity.other.attribute-name#6e6e6e—
entity.other.attribute-name.id, punctuation.definition.entity#545454—
meta.selector#8f8f8f—
none#6e6e6e—
markup.heading punctuation.definition.heading, entity.name.section#545454
keyword.other.unit#6e6e6e—
markup.bold, punctuation.definition.bold#686868bold
markup.italic, punctuation.definition.italic#8f8f8fitalic
markup.raw.inline#747474—
string.other.link, punctuation.definition.string.end.markdown#8b8b8b—
meta.link#6e6e6e—
markup.list#8b8b8b—
markup.quote#6e6e6e—
meta.separator#515151—
markup.inserted#747474—
markup.deleted#8b8b8b—
markup.changed#8f8f8f—
constant.other.color#7d7d7d—
string.regexp#7d7d7d—
constant.character.escape#7d7d7d—
punctuation.section.embedded, variable.interpolation#8f8f8f—
invalid.illegal#191919—
invalid.broken#ebebeb—
invalid.deprecated#191919—
invalid.unimplemented#191919—