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#ffffff
  • activityBar.background#ffffff
  • activityBar.border#eeeeee
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#949494
  • activityBarBadge.background#575757
  • badge.background#d2d2d2
  • badge.foreground#000000
  • button.background#d5d5d5
  • button.hoverBackground#c9c9c9
  • checkbox.border#eeeeee
  • dart.closingLabels#dcdcdc
  • debugIcon.breakpointCurrentStackframeForeground#010101
  • debugIcon.breakpointDisabledForeground#010101
  • debugIcon.breakpointForeground#010101
  • debugIcon.breakpointStackframeForeground#010101
  • debugIcon.breakpointUnverifiedForeground#010101
  • debugIcon.continueForeground#010101
  • debugIcon.disconnectForeground#010101
  • debugIcon.pauseForeground#010101
  • debugIcon.restartForeground#010101
  • debugIcon.startForeground#010101
  • debugIcon.stepBackForeground#010101
  • debugIcon.stepIntoForeground#010101
  • debugIcon.stepOutForeground#010101
  • debugIcon.stepOverForeground#010101
  • debugIcon.stopForeground#010101
  • debugToolBar.background#ffffff
  • dropdown.background#ffffff
  • dropdown.foreground#010101
  • editor.background#ffffff
  • editor.findMatchBackground#ffffff
  • editor.findMatchBorder#1f1f1f
  • editor.findMatchHighlightBackground#ffffff
  • editor.findMatchHighlightBorder#949494
  • editor.foldBackground#ffffff
  • editor.foreground#000000
  • editor.hoverHighlightBackground#e5e5e5
  • editor.lineHighlightBackground#f4f4f4
  • editor.selectionBackground#e5e5e5
  • editorBracketMatch.background#ffffff
  • editorBracketMatch.border#949494
  • editorCursor.foreground#000000
  • editorError.foreground#bb1909
  • editorGroup.border#eeeeee
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#eeeeee
  • editorHoverWidget.statusBarBackground#ffffff
  • editorIndentGuide.activeBackground#949494
  • editorIndentGuide.background#dbdbdb
  • editorInfo.foreground#5e5e5e
  • editorLightBulb.foreground#010101
  • editorLineNumber.activeForeground#8c8c8c
  • editorLineNumber.foreground#d2d2d2
  • editorLink.activeForeground#000000
  • editorOverviewRuler.border#eeeeee
  • editorRuler.foreground#dbdbdb
  • editorSuggestWidget.foreground#575757
  • editorSuggestWidget.highlightForeground#000000
  • editorWarning.foreground#ba7912
  • editorWhitespace.foreground#d2d2d2
  • editorWidget.background#ffffff
  • focusBorder#ffffff
  • gitDecoration.addedResourceForeground#000000
  • gitDecoration.conflictingResourceForeground#FF0000
  • gitDecoration.deletedResourceForeground#F27983
  • gitDecoration.ignoredResourceForeground#484F5E
  • gitDecoration.modifiedResourceForeground#77A8D9
  • gitDecoration.submoduleResourceForeground#D4BFFF
  • gitDecoration.untrackedResourceForeground#A6CC70
  • icon.foreground#9d9d9d
  • input.background#ffffff
  • input.border#ffffff
  • input.foreground#010101
  • list.activeSelectionBackground#ffffff
  • list.activeSelectionForeground#000000
  • list.errorForeground#bb1909
  • list.filterMatchBackground#d2d2d2
  • list.filterMatchBorder#ffffff
  • list.focusBackground#eeeeee
  • list.highlightForeground#000000
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#ffffff
  • list.inactiveSelectionForeground#000000
  • list.warningForeground#ba7912
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#bb1909
  • listFilterWidget.outline#949494
  • menu.background#ffffff
  • menu.foreground#010101
  • menubar.selectionBackground#ffffff
  • panel.border#eeeeee
  • panelTitle.activeBorder#ffffff
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#949494
  • peekView.border#9d9d9d
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#ffffff
  • peekViewEditor.matchHighlightBorder#949494
  • peekViewEditorGutter.background#ffffff
  • peekViewResult.background#f5f5f5
  • peekViewResult.fileForeground#000000
  • peekViewResult.lineForeground#949494
  • peekViewResult.matchHighlightBackground#e5e5e5
  • peekViewResult.selectionBackground#ffffff
  • peekViewResult.selectionForeground#000000
  • pickerGroup.foreground#000000
  • scrollbar.shadow#ffffff
  • scrollbarSlider.activeBackground#0000001a
  • scrollbarSlider.background#0000001a
  • scrollbarSlider.hoverBackground#0000001a
  • settings.checkboxBorder#eeeeee
  • settings.dropdownBorder#eeeeee
  • settings.modifiedItemIndicator#9d9d9d
  • settings.textInputBorder#eeeeee
  • sideBar.background#ffffff
  • sideBar.border#eeeeee
  • sideBar.foreground#575757
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#eeeeee
  • statusBar.background#ffffff
  • statusBar.border#eeeeee
  • statusBar.debuggingBackground#ffffff
  • statusBar.debuggingBorder#eeeeee
  • statusBar.debuggingForeground#010101
  • statusBar.foreground#010101
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderBorder#eeeeee
  • statusBar.noFolderForeground#010101
  • statusBarItem.activeBackground#ffffff
  • statusBarItem.hoverBackground#ffffff
  • symbolIcon.arrayForeground#010101
  • symbolIcon.booleanForeground#010101
  • symbolIcon.classForeground#010101
  • symbolIcon.colorForeground#010101
  • symbolIcon.constantForeground#010101
  • symbolIcon.constructorForeground#010101
  • symbolIcon.enumeratorForeground#010101
  • symbolIcon.enumeratorMemberForeground#010101
  • symbolIcon.eventForeground#010101
  • symbolIcon.fieldForeground#010101
  • symbolIcon.fileForeground#010101
  • symbolIcon.folderForeground#010101
  • symbolIcon.functionForeground#010101
  • symbolIcon.interfaceForeground#010101
  • symbolIcon.keyForeground#010101
  • symbolIcon.keywordForeground#010101
  • symbolIcon.methodForeground#010101
  • symbolIcon.moduleForeground#010101
  • symbolIcon.namespaceForeground#010101
  • symbolIcon.nullForeground#010101
  • symbolIcon.numberForeground#010101
  • symbolIcon.objectForeground#010101
  • symbolIcon.operatorForeground#010101
  • symbolIcon.packageForeground#010101
  • symbolIcon.propertyForeground#010101
  • symbolIcon.referenceForeground#010101
  • symbolIcon.snippetForeground#010101
  • symbolIcon.stringForeground#010101
  • symbolIcon.structForeground#010101
  • symbolIcon.textForeground#010101
  • symbolIcon.typeParameterForeground#010101
  • symbolIcon.unitForeground#010101
  • symbolIcon.variableForeground#010101
  • tab.activeForeground#000000
  • tab.border#ffffff
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#949494
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#a6a6a6
  • terminal.ansiBrightBlack#d2d2d2
  • terminal.ansiBrightBlue#a6a6a6
  • terminal.ansiBrightCyan#4c4c4c
  • terminal.ansiBrightGreen#797979
  • terminal.ansiBrightMagenta#000000
  • terminal.ansiBrightRed#202020
  • terminal.ansiBrightWhite#000000
  • terminal.ansiBrightYellow#000000
  • terminal.ansiCyan#4c4c4c
  • terminal.ansiGreen#797979
  • terminal.ansiMagenta#000000
  • terminal.ansiRed#202020
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#000000
  • terminal.background#ffffff
  • terminal.foreground#000000
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#000000
  • textLink.activeForeground#000000
  • textLink.foreground#000000
  • textPreformat.foreground#010101
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#010101
  • titleBar.border#eeeeee
  • titleBar.inactiveBackground#ffffff
  • tree.indentGuidesStroke#dcdcdc
  • window.activeBorder#eeeeee

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter.function#000000
comment, punctuation.definition.comment#afafaf
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array#000000
none#000000
keyword.operator#000000
keyword#444444
variable#3b3b3b
entity.name.function, meta.require, support.function.any-method#575757
support.class, entity.name.class, entity.name.type.class#000000
meta.class#000000
keyword.other.special-method#575757
storage#444444
support.function#1f1f1f
string, constant.other.symbol, entity.other.inherited-class#0e0e0e
constant.numeric#010101
none#010101
none#010101
constant#010101
entity.name.tag#3b3b3b
entity.other.attribute-name#010101
entity.other.attribute-name.id, punctuation.definition.entity#575757
meta.selector#444444
none#010101
markup.heading punctuation.definition.heading, entity.name.section#575757
keyword.other.unit#010101
markup.bold, punctuation.definition.bold#000000bold
markup.italic, punctuation.definition.italic#444444italic
markup.raw.inline#0e0e0e
string.other.link, punctuation.definition.string.end.markdown#3b3b3b
meta.link#010101
markup.list#3b3b3b
markup.quote#010101
meta.separator#000000
markup.inserted#0e0e0e
markup.deleted#3b3b3b
markup.changed#444444
constant.other.color#1f1f1f
string.regexp#1f1f1f
constant.character.escape#1f1f1f
punctuation.section.embedded, variable.interpolation#444444
invalid.illegal#000000
invalid.broken#ffffff
invalid.deprecated#000000
invalid.unimplemented#000000