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#fdfdfd
  • activityBar.background#fdfdfd
  • activityBar.border#eaeaea
  • activityBar.foreground#545454
  • activityBar.inactiveForeground#c0c0c0
  • activityBarBadge.background#a3a3a3
  • badge.background#dedede
  • badge.foreground#545454
  • button.background#dedede
  • button.border#00000000
  • button.foreground#545454
  • button.hoverBackground#00000033
  • button.secondaryBackground#eaeaea
  • button.secondaryBorder#00000000
  • button.secondaryForeground#7a7a7a
  • button.secondaryHoverBackground#00000033
  • button.separator#c0c0c0
  • checkbox.border#eaeaea
  • debugIcon.breakpointCurrentStackframeForeground#7a7a7a
  • debugIcon.breakpointDisabledForeground#7a7a7a
  • debugIcon.breakpointForeground#7a7a7a
  • debugIcon.breakpointStackframeForeground#7a7a7a
  • debugIcon.breakpointUnverifiedForeground#7a7a7a
  • debugIcon.continueForeground#7a7a7a
  • debugIcon.disconnectForeground#7a7a7a
  • debugIcon.pauseForeground#7a7a7a
  • debugIcon.restartForeground#7a7a7a
  • debugIcon.startForeground#7a7a7a
  • debugIcon.stepBackForeground#7a7a7a
  • debugIcon.stepIntoForeground#7a7a7a
  • debugIcon.stepOutForeground#7a7a7a
  • debugIcon.stepOverForeground#7a7a7a
  • debugIcon.stopForeground#7a7a7a
  • debugToolBar.background#fdfdfd
  • descriptionForeground#7a7a7a
  • diffEditor.insertedLineBackground#2fff0007
  • dropdown.background#fdfdfd
  • dropdown.foreground#7a7a7a
  • editor.background#fdfdfd
  • editor.findMatchBackground#fdfdfd
  • editor.findMatchBorder#898989
  • editor.findMatchHighlightBackground#edf5f57c
  • editor.findMatchHighlightBorder#c0c0c0
  • editor.foldBackground#edf5f56e
  • editor.foreground#4f4f4f
  • editor.hoverHighlightBackground#e7e7e677
  • editor.inactiveSelectionBackground#00000015
  • editor.lineHighlightBackground#eeeeee
  • editor.placeholder.foreground#c5c5c5
  • editor.selectionBackground#00000033
  • editor.selectionHighlightBackground#00000015
  • editor.selectionHighlightBorder#00000033
  • editor.wordHighlightBackground#c0c0c0
  • editor.wordHighlightBorder#c0c0c0
  • editor.wordHighlightStrongBackground#c0c0c0d4
  • editorBracketHighlight.foreground1#303030
  • editorBracketHighlight.foreground2#585858c9
  • editorBracketHighlight.foreground3#82828298
  • editorBracketHighlight.unexpectedBracket.foreground#9e0505
  • editorBracketMatch.background#fdfdfd
  • editorBracketMatch.border#c0c0c0
  • editorCursor.foreground#5e5e5e
  • editorError.foreground#a6a6a6
  • editorGroup.border#eaeaea
  • editorGroupHeader.tabsBackground#fdfdfd
  • editorGroupHeader.tabsBorder#eaeaea
  • editorHoverWidget.statusBarBackground#fdfdfd
  • editorIndentGuide.activeBackground1#30303071
  • editorIndentGuide.background1#e2e2e2
  • editorInfo.foreground#a6a6a6
  • editorLightBulb.foreground#7a7a7a
  • editorLineNumber.activeForeground#bcbcbc
  • editorLineNumber.foreground#dedede
  • editorLink.activeForeground#545454
  • editorOverviewRuler.border#eaeaea
  • editorRuler.foreground#e2e2e2
  • editorSuggestWidget.foreground#a3a3a3
  • editorSuggestWidget.highlightForeground#545454
  • editorWarning.foreground#a6a6a6
  • editorWhitespace.foreground#dedede
  • editorWidget.background#f2f2f2
  • editorWidget.border#dedede
  • focusBorder#fdfdfd
  • foreground#a3a3a3
  • gitDecoration.addedResourceForeground#525252
  • gitDecoration.conflictingResourceForeground#535353
  • gitDecoration.deletedResourceForeground#a3a3a3
  • gitDecoration.ignoredResourceForeground#d2d2d2
  • gitDecoration.modifiedResourceForeground#535353
  • gitDecoration.submoduleResourceForeground#a3a3a3
  • gitDecoration.untrackedResourceForeground#535353
  • icon.foreground#a3a3a3
  • input.background#fdfdfd
  • input.border#fdfdfd
  • input.foreground#7a7a7a
  • keybindingLabel.background#fdfdfd
  • keybindingLabel.border#eaeaea
  • keybindingLabel.bottomBorder#eaeaea
  • keybindingLabel.foreground#a3a3a3
  • list.activeSelectionBackground#dfdfdf
  • list.activeSelectionForeground#060606
  • list.errorForeground#c02100
  • list.filterMatchBackground#dedede
  • list.filterMatchBorder#fdfdfd
  • list.focusBackground#dfdfdf
  • list.focusForeground#080808
  • list.highlightForeground#737373
  • list.hoverBackground#00000033
  • list.hoverForeground#545454
  • list.inactiveSelectionBackground#eeeeee
  • list.inactiveSelectionForeground#545454
  • list.warningForeground#af6400
  • listFilterWidget.background#fdfdfd
  • listFilterWidget.noMatchesOutline#c02100
  • listFilterWidget.outline#c0c0c0
  • menu.background#fdfdfd
  • menu.foreground#7a7a7a
  • menubar.selectionBackground#eaeaea
  • minimapSlider.activeBackground#1e1e1e21
  • minimapSlider.background#1e1e1e0f
  • minimapSlider.hoverBackground#1e1e1e0f
  • panel.border#eaeaea
  • panelTitle.activeBorder#fdfdfd
  • panelTitle.activeForeground#545454
  • panelTitle.inactiveForeground#b1b1b1
  • peekView.border#c4c4c4
  • peekViewEditor.background#fdfdfd
  • peekViewEditor.matchHighlightBackground#fdfdfd
  • peekViewEditor.matchHighlightBorder#c0c0c0
  • peekViewEditorGutter.background#fdfdfd
  • peekViewResult.background#eeeeee
  • peekViewResult.fileForeground#737373
  • peekViewResult.lineForeground#c0c0c0
  • peekViewResult.matchHighlightBackground#e6e6e6
  • peekViewResult.selectionBackground#fdfdfd
  • peekViewResult.selectionForeground#545454
  • peekViewTitle.background#f2f2f2
  • pickerGroup.foreground#707070
  • progressBar.background#a3a3a3
  • sash.hoverBorder#e6e6e6
  • scrollbar.shadow#d5d5d56f
  • scrollbarSlider.activeBackground#1e1e1e0f
  • scrollbarSlider.background#1e1e1e0f
  • scrollbarSlider.hoverBackground#1e1e1e0f
  • selection.background#c4c4c4
  • settings.checkboxBorder#eaeaea
  • settings.dropdownBorder#eaeaea
  • settings.modifiedItemIndicator#c4c4c4
  • settings.textInputBorder#eaeaea
  • sideBar.background#fdfdfd
  • sideBar.border#eaeaea
  • sideBar.foreground#a3a3a3
  • sideBarSectionHeader.background#fdfdfd
  • sideBarSectionHeader.border#eaeaea
  • statusBar.background#fdfdfd
  • statusBar.border#eaeaea
  • statusBar.debuggingBackground#fdfdfd
  • statusBar.debuggingBorder#eaeaea
  • statusBar.debuggingForeground#7a7a7a
  • statusBar.foreground#7a7a7a
  • statusBar.noFolderBackground#fdfdfd
  • statusBar.noFolderBorder#eaeaea
  • statusBar.noFolderForeground#7a7a7a
  • statusBarItem.activeBackground#fdfdfd
  • statusBarItem.hoverBackground#fdfdfd
  • symbolIcon.arrayForeground#7a7a7a
  • symbolIcon.booleanForeground#7a7a7a
  • symbolIcon.classForeground#7a7a7a
  • symbolIcon.colorForeground#7a7a7a
  • symbolIcon.constantForeground#7a7a7a
  • symbolIcon.constructorForeground#7a7a7a
  • symbolIcon.enumeratorForeground#7a7a7a
  • symbolIcon.enumeratorMemberForeground#7a7a7a
  • symbolIcon.eventForeground#7a7a7a
  • symbolIcon.fieldForeground#7a7a7a
  • symbolIcon.fileForeground#7a7a7a
  • symbolIcon.folderForeground#7a7a7a
  • symbolIcon.functionForeground#7a7a7a
  • symbolIcon.interfaceForeground#7a7a7a
  • symbolIcon.keyForeground#7a7a7a
  • symbolIcon.keywordForeground#7a7a7a
  • symbolIcon.methodForeground#7a7a7a
  • symbolIcon.moduleForeground#7a7a7a
  • symbolIcon.namespaceForeground#7a7a7a
  • symbolIcon.nullForeground#7a7a7a
  • symbolIcon.numberForeground#7a7a7a
  • symbolIcon.objectForeground#7a7a7a
  • symbolIcon.operatorForeground#7a7a7a
  • symbolIcon.packageForeground#7a7a7a
  • symbolIcon.propertyForeground#7a7a7a
  • symbolIcon.referenceForeground#7a7a7a
  • symbolIcon.snippetForeground#7a7a7a
  • symbolIcon.stringForeground#7a7a7a
  • symbolIcon.structForeground#7a7a7a
  • symbolIcon.textForeground#7a7a7a
  • symbolIcon.typeParameterForeground#7a7a7a
  • symbolIcon.unitForeground#7a7a7a
  • symbolIcon.variableForeground#7a7a7a
  • tab.activeBorder#1e1e1eef
  • tab.activeForeground#050505dd
  • tab.border#fdfdfd
  • tab.hoverForeground#1e1e1eef
  • tab.inactiveBackground#fdfdfd
  • tab.inactiveForeground#b7b6b6dc
  • tab.unfocusedHoverForeground#1e1e1eef
  • terminal.ansiBlack#fdfdfd
  • terminal.ansiBlue#c9c8c7
  • terminal.ansiBrightBlack#dddddd
  • terminal.ansiBrightBlue#c9c8c7
  • terminal.ansiBrightCyan#9e9e9e
  • terminal.ansiBrightGreen#b4b4b4
  • terminal.ansiBrightMagenta#737373
  • terminal.ansiBrightRed#898989
  • terminal.ansiBrightWhite#1e1e1e
  • terminal.ansiBrightYellow#5d5d5d
  • terminal.ansiCyan#9e9e9e
  • terminal.ansiGreen#b4b4b4
  • terminal.ansiMagenta#737373
  • terminal.ansiRed#898989
  • terminal.ansiWhite#494949
  • terminal.ansiYellow#5d5d5d
  • terminal.background#fdfdfd
  • terminal.foreground#737373
  • terminalCursor.background#fdfdfd
  • terminalCursor.foreground#5e5e5e
  • textLink.activeForeground#1e1e1e
  • textLink.foreground#606060
  • textPreformat.foreground#7a7a7a
  • titleBar.activeBackground#fdfdfd
  • titleBar.activeForeground#7a7a7a
  • titleBar.border#eaeaea
  • titleBar.inactiveBackground#fdfdfd
  • toolbar.hoverBackground#fdfdfd
  • toolbar.hoverOutline#a3a3a3
  • tree.indentGuidesStroke#e2e2e2
  • welcomePage.progress.foreground#a3a3a3
  • window.activeBorder#292929

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.type.property-name.json, meta.object-literal.key#898989
variable.parameter.function#898989
comment, punctuation.definition.comment#d0d0d0
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array#050505cf
none#5e5e5e
keyword.operator#020202cf
keyword#a4a4a4italic
variable#5f5f5f
entity.name.function, meta.require, support.function.any-method#0b0b0beeitalic
support.class, entity.name.class, entity.name.type.class#737373
meta.class#272727
keyword.other.special-method#a3a3a3
storage#757575ee
support.function#898989
string, constant.other.symbol, entity.other.inherited-class#1c1c1cb6
constant.numeric#303030
none#7a7a7a
none#7a7a7a
constant#8d8d8d
entity.name.tag#a2a2a2
entity.other.attribute-name#7a7a7a
entity.other.attribute-name.id, punctuation.definition.entity#a3a3a3
meta.selector#757575ee
none#7a7a7a
markup.heading punctuation.definition.heading, entity.name.section#a3a3a3
keyword.other.unit#7a7a7a
markup.bold, punctuation.definition.bold#737373bold
markup.italic, punctuation.definition.italic#757575eeitalic
markup.raw.inline#1f1f1fbf
string.other.link, punctuation.definition.string.end.markdown#969696
meta.link#7a7a7a
markup.list#969696
markup.quote#7a7a7a
meta.separator#5e5e5e
markup.inserted#1f1f1fbf
markup.deleted#969696
markup.changed#757575ee
constant.other.color#898989
string.regexp#898989
constant.character.escape#898989
punctuation.section.embedded, variable.interpolation#757575ee
invalid.illegal#272727
invalid.broken#fdfdfd
invalid.deprecated#272727
invalid.unimplemented#272727
Tlapalli by ackzell - VS Code Theme