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#dcdcdc
  • activityBar.foreground#101010
  • activityBar.inactiveForeground#8f8f8f
  • activityBarBadge.background#5b5b5b
  • badge.background#c4c4c4
  • badge.foreground#101010
  • button.background#c7c7c7
  • button.hoverBackground#bcbcbc
  • checkbox.border#dcdcdc
  • dart.closingLabels#cdcdcd
  • debugIcon.breakpointCurrentStackframeForeground#111111
  • debugIcon.breakpointDisabledForeground#111111
  • debugIcon.breakpointForeground#111111
  • debugIcon.breakpointStackframeForeground#111111
  • debugIcon.breakpointUnverifiedForeground#111111
  • debugIcon.continueForeground#111111
  • debugIcon.disconnectForeground#111111
  • debugIcon.pauseForeground#111111
  • debugIcon.restartForeground#111111
  • debugIcon.startForeground#111111
  • debugIcon.stepBackForeground#111111
  • debugIcon.stepIntoForeground#111111
  • debugIcon.stepOutForeground#111111
  • debugIcon.stepOverForeground#111111
  • debugIcon.stopForeground#111111
  • debugToolBar.background#ebebeb
  • dropdown.background#ebebeb
  • dropdown.foreground#111111
  • editor.background#ebebeb
  • editor.findMatchBackground#ebebeb
  • editor.findMatchBorder#2b2b2b
  • editor.findMatchHighlightBackground#ebebeb
  • editor.findMatchHighlightBorder#8f8f8f
  • editor.foldBackground#ebebeb
  • editor.foreground#101010
  • editor.hoverHighlightBackground#d4d4d4
  • editor.lineHighlightBackground#e1e1e1
  • editor.selectionBackground#d4d4d4
  • editorBracketMatch.background#ebebeb
  • editorBracketMatch.border#8f8f8f
  • editorCursor.foreground#101010
  • editorError.foreground#be1e0c
  • editorGroup.border#dcdcdc
  • editorGroupHeader.tabsBackground#ebebeb
  • editorGroupHeader.tabsBorder#dcdcdc
  • editorHoverWidget.statusBarBackground#ebebeb
  • editorIndentGuide.activeBackground#8f8f8f
  • editorIndentGuide.background#cccccc
  • editorInfo.foreground#616161
  • editorLightBulb.foreground#111111
  • editorLineNumber.activeForeground#888888
  • editorLineNumber.foreground#c4c4c4
  • editorLink.activeForeground#101010
  • editorOverviewRuler.border#dcdcdc
  • editorRuler.foreground#cccccc
  • editorSuggestWidget.foreground#5b5b5b
  • editorSuggestWidget.highlightForeground#101010
  • editorWarning.foreground#bd7c16
  • editorWhitespace.foreground#c4c4c4
  • editorWidget.background#ebebeb
  • focusBorder#ebebeb
  • gitDecoration.addedResourceForeground#101010
  • gitDecoration.conflictingResourceForeground#FF0000
  • gitDecoration.deletedResourceForeground#F27983
  • gitDecoration.ignoredResourceForeground#484F5E
  • gitDecoration.modifiedResourceForeground#77A8D9
  • gitDecoration.submoduleResourceForeground#D4BFFF
  • gitDecoration.untrackedResourceForeground#A6CC70
  • icon.foreground#979797
  • input.background#ebebeb
  • input.border#ebebeb
  • input.foreground#111111
  • list.activeSelectionBackground#ebebeb
  • list.activeSelectionForeground#101010
  • list.errorForeground#be1e0c
  • list.filterMatchBackground#c4c4c4
  • list.filterMatchBorder#ebebeb
  • list.focusBackground#dcdcdc
  • list.highlightForeground#101010
  • list.hoverBackground#ebebeb
  • list.inactiveSelectionBackground#ebebeb
  • list.inactiveSelectionForeground#101010
  • list.warningForeground#bd7c16
  • listFilterWidget.background#ebebeb
  • listFilterWidget.noMatchesOutline#be1e0c
  • listFilterWidget.outline#8f8f8f
  • menu.background#ebebeb
  • menu.foreground#111111
  • menubar.selectionBackground#ebebeb
  • panel.border#dcdcdc
  • panelTitle.activeBorder#ebebeb
  • panelTitle.activeForeground#101010
  • panelTitle.inactiveForeground#8f8f8f
  • peekView.border#979797
  • peekViewEditor.background#ebebeb
  • peekViewEditor.matchHighlightBackground#ebebeb
  • peekViewEditor.matchHighlightBorder#8f8f8f
  • peekViewEditorGutter.background#ebebeb
  • peekViewResult.background#e2e2e2
  • peekViewResult.fileForeground#101010
  • peekViewResult.lineForeground#8f8f8f
  • peekViewResult.matchHighlightBackground#d4d4d4
  • peekViewResult.selectionBackground#ebebeb
  • peekViewResult.selectionForeground#101010
  • pickerGroup.foreground#101010
  • scrollbar.shadow#ebebeb
  • scrollbarSlider.activeBackground#1010101a
  • scrollbarSlider.background#1010101a
  • scrollbarSlider.hoverBackground#1010101a
  • settings.checkboxBorder#dcdcdc
  • settings.dropdownBorder#dcdcdc
  • settings.modifiedItemIndicator#979797
  • settings.textInputBorder#dcdcdc
  • sideBar.background#ebebeb
  • sideBar.border#dcdcdc
  • sideBar.foreground#5b5b5b
  • sideBarSectionHeader.background#ebebeb
  • sideBarSectionHeader.border#dcdcdc
  • statusBar.background#ebebeb
  • statusBar.border#dcdcdc
  • statusBar.debuggingBackground#ebebeb
  • statusBar.debuggingBorder#dcdcdc
  • statusBar.debuggingForeground#111111
  • statusBar.foreground#111111
  • statusBar.noFolderBackground#ebebeb
  • statusBar.noFolderBorder#dcdcdc
  • statusBar.noFolderForeground#111111
  • statusBarItem.activeBackground#ebebeb
  • statusBarItem.hoverBackground#ebebeb
  • symbolIcon.arrayForeground#111111
  • symbolIcon.booleanForeground#111111
  • symbolIcon.classForeground#111111
  • symbolIcon.colorForeground#111111
  • symbolIcon.constantForeground#111111
  • symbolIcon.constructorForeground#111111
  • symbolIcon.enumeratorForeground#111111
  • symbolIcon.enumeratorMemberForeground#111111
  • symbolIcon.eventForeground#111111
  • symbolIcon.fieldForeground#111111
  • symbolIcon.fileForeground#111111
  • symbolIcon.folderForeground#111111
  • symbolIcon.functionForeground#111111
  • symbolIcon.interfaceForeground#111111
  • symbolIcon.keyForeground#111111
  • symbolIcon.keywordForeground#111111
  • symbolIcon.methodForeground#111111
  • symbolIcon.moduleForeground#111111
  • symbolIcon.namespaceForeground#111111
  • symbolIcon.nullForeground#111111
  • symbolIcon.numberForeground#111111
  • symbolIcon.objectForeground#111111
  • symbolIcon.operatorForeground#111111
  • symbolIcon.packageForeground#111111
  • symbolIcon.propertyForeground#111111
  • symbolIcon.referenceForeground#111111
  • symbolIcon.snippetForeground#111111
  • symbolIcon.stringForeground#111111
  • symbolIcon.structForeground#111111
  • symbolIcon.textForeground#111111
  • symbolIcon.typeParameterForeground#111111
  • symbolIcon.unitForeground#111111
  • symbolIcon.variableForeground#111111
  • tab.activeForeground#101010
  • tab.border#ebebeb
  • tab.inactiveBackground#ebebeb
  • tab.inactiveForeground#8f8f8f
  • terminal.ansiBlack#ebebeb
  • terminal.ansiBlue#9e9e9e
  • terminal.ansiBrightBlack#c5c5c5
  • terminal.ansiBrightBlue#9e9e9e
  • terminal.ansiBrightCyan#525252
  • terminal.ansiBrightGreen#787878
  • terminal.ansiBrightMagenta#101010
  • terminal.ansiBrightRed#2b2b2b
  • terminal.ansiBrightWhite#101010
  • terminal.ansiBrightYellow#101010
  • terminal.ansiCyan#525252
  • terminal.ansiGreen#787878
  • terminal.ansiMagenta#101010
  • terminal.ansiRed#2b2b2b
  • terminal.ansiWhite#101010
  • terminal.ansiYellow#101010
  • terminal.background#ebebeb
  • terminal.foreground#101010
  • terminalCursor.background#ebebeb
  • terminalCursor.foreground#101010
  • textLink.activeForeground#101010
  • textLink.foreground#101010
  • textPreformat.foreground#111111
  • titleBar.activeBackground#ebebeb
  • titleBar.activeForeground#111111
  • titleBar.border#dcdcdc
  • titleBar.inactiveBackground#ebebeb
  • tree.indentGuidesStroke#cdcdcd
  • window.activeBorder#dcdcdc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter.function#101010
comment, punctuation.definition.comment#a6a6a6
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array#101010
none#101010
keyword.operator#101010
keyword#4a4a4a
variable#434343
entity.name.function, meta.require, support.function.any-method#5b5b5b
support.class, entity.name.class, entity.name.type.class#101010
meta.class#101010
keyword.other.special-method#5b5b5b
storage#4a4a4a
support.function#2b2b2b
string, constant.other.symbol, entity.other.inherited-class#1c1c1c
constant.numeric#111111
none#111111
none#111111
constant#111111
entity.name.tag#434343
entity.other.attribute-name#111111
entity.other.attribute-name.id, punctuation.definition.entity#5b5b5b
meta.selector#4a4a4a
none#111111
markup.heading punctuation.definition.heading, entity.name.section#5b5b5b
keyword.other.unit#111111
markup.bold, punctuation.definition.bold#101010bold
markup.italic, punctuation.definition.italic#4a4a4aitalic
markup.raw.inline#1c1c1c
string.other.link, punctuation.definition.string.end.markdown#434343
meta.link#111111
markup.list#434343
markup.quote#111111
meta.separator#101010
markup.inserted#1c1c1c
markup.deleted#434343
markup.changed#4a4a4a
constant.other.color#2b2b2b
string.regexp#2b2b2b
constant.character.escape#2b2b2b
punctuation.section.embedded, variable.interpolation#4a4a4a
invalid.illegal#101010
invalid.broken#ebebeb
invalid.deprecated#101010
invalid.unimplemented#101010