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