Skip to main content
Coding Theme

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#ba1b1d
  • activityBar.background#1F1F1F
  • activityBar.border#1F1F1F60
  • activityBar.inactiveForeground#5e5e5e
  • activityBarBadge.background#ba1b1d
  • activityBarBadge.foreground#ffffff
  • badge.background#BA1B1D
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#BA1B1D
  • breadcrumb.background#1F1F1F
  • breadcrumb.focusForeground#FFFFFF
  • breadcrumb.foreground#A9A9A9
  • breadcrumbPicker.background#1F1F1F
  • button.background#BA1B1D50
  • contrastBorder#BA1B1D40
  • debugToolBar.background#1F1F1F
  • diffEditor.insertedTextBackground#A9A9A915
  • diffEditor.removedTextBackground#BA535320
  • dropdown.background#1F1F1F
  • dropdown.border#ffffff10
  • editor.background#1F1F1F
  • editor.findMatchBackground#ff7300
  • editor.findMatchHighlightBackground#ff730060
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#5e5e5e50
  • editor.selectionBackground#ff000440
  • editor.selectionHighlightBackground#ba1b1e40
  • editorBracketMatch.background#1F1F1F
  • editorBracketMatch.border#CB89897f
  • editorCursor.foreground#Ba1b1d
  • editorError.foreground#BA535370
  • editorGroup.border#Ba1b1d30
  • editorGroupHeader.tabsBackground#1F1F1F
  • editorGutter.addedBackground#A9A9A960
  • editorGutter.deletedBackground#BA535360
  • editorGutter.modifiedBackground#CCCCCC60
  • editorHoverWidget.background#1F1F1F
  • editorHoverWidget.border#ba1b1d30
  • editorIndentGuide.activeBackground1#5E5E5E
  • editorIndentGuide.background1#5E5E5E70
  • editorInfo.foreground#CCCCCC70
  • editorLineNumber.activeForeground#CCCCCC
  • editorLineNumber.foreground#BA1B1Dc0
  • editorLink.activeForeground#FFFFFF
  • editorMarkerNavigation.background#FFFFFF05
  • editorOverviewRuler.border#1F1F1F
  • editorOverviewRuler.errorForeground#BA535340
  • editorOverviewRuler.findMatchForeground#BA1B1D
  • editorOverviewRuler.infoForeground#CCCCCC40
  • editorOverviewRuler.warningForeground#CB898970
  • editorRuler.foreground#5E5E5E
  • editorSuggestWidget.background#1F1F1F
  • editorSuggestWidget.border#ba1b1d10
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.highlightForeground#CB8989
  • editorSuggestWidget.selectedBackground#BA1B1D20
  • editorWarning.foreground#A9A9A9
  • editorWhitespace.foreground#FFFFFF40
  • editorWidget.border#CB8989
  • editorWidget.resizeBorder#BA1B1D
  • extensionButton.prominentBackground#A9A9A990
  • extensionButton.prominentHoverBackground#BA5353
  • focusBorder#FFFFFF00
  • gitDecoration.conflictingResourceForeground#CB8989
  • gitDecoration.deletedResourceForeground#BA5353
  • gitDecoration.ignoredResourceForeground#BA1B1D
  • gitDecoration.modifiedResourceForeground#A9A9A9
  • gitDecoration.untrackedResourceForeground#CCCCCC
  • input.background#5E5E5E
  • input.border#5E5E5E30
  • input.foreground#FFFFFF
  • input.placeholderForeground#FFFFFF60
  • inputOption.activeBackground#ba1b1d30
  • inputOption.activeBorder#ba1b1d30
  • inputValidation.errorBorder#BA535350
  • inputValidation.infoBorder#CCCCCC50
  • inputValidation.warningBorder#CB898950
  • list.activeSelectionBackground#ba1b1d30
  • list.focusForeground#CCCCCC
  • list.focusOutline#ff0000
  • list.highlightForeground#BA1B1D
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#ba1b1d30
  • list.warningForeground#CB8989
  • listFilterWidget.background#1F1F1F30
  • listFilterWidget.noMatchesOutline#1F1F1F30
  • listFilterWidget.outline#1F1F1F30
  • menu.background#1F1F1Ff8
  • menu.border#BA1B1D50
  • menu.foreground#FFFFFF
  • menu.selectionBackground#5E5E5E
  • menu.selectionBorder#1f1f1f30
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#FFFFFF
  • menubar.selectionForeground#FFFFFF
  • minimap.background#1F1F1F
  • minimapGutter.addedBackground#BA5353
  • minimapGutter.deletedBackground#CB8989
  • minimapGutter.modifiedBackground#A9A9A9
  • minimapSlider.activeBackground#ba1b1db0
  • minimapSlider.background#A9A9A980
  • minimapSlider.hoverBackground#A9A9A9a0
  • notificationLink.foreground#BA1B1D
  • notifications.background#1F1F1F
  • notifications.foreground#FFFFFF
  • panel.background#1f1f1f
  • panel.border#BA1B1D60
  • panelTitle.activeBorder#BA1B1D
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#FFFFFF
  • peekView.border#ba1b1d30
  • peekViewEditor.background#FFFFFF05
  • peekViewEditor.matchHighlightBackground#BA1B1D50
  • peekViewEditorGutter.background#FFFFFF05
  • peekViewResult.background#FFFFFF05
  • peekViewResult.matchHighlightBackground#BA1B1D50
  • peekViewResult.selectionBackground#BA1B1D70
  • peekViewTitle.background#FFFFFF05
  • peekViewTitleDescription.foreground#FFFFFF60
  • pickerGroup.foreground#BA1B1D
  • progressBar.background#BA1B1D
  • scrollbar.shadow#1F1F1F00
  • scrollbarSlider.activeBackground#BA1B1Dcc
  • scrollbarSlider.background#BA1B1Dbb
  • scrollbarSlider.hoverBackground#BA1B1Dee
  • selection.background#ba1b1d
  • settings.checkboxBackground#BA1B1D
  • settings.checkboxForeground#FFFFFF
  • settings.dropdownBackground#1F1F1F
  • settings.dropdownForeground#FFFFFF
  • settings.headerForeground#BA1B1D
  • settings.modifiedItemIndicator#BA1B1D
  • settings.numberInputBackground#1F1F1F
  • settings.numberInputForeground#FFFFFF
  • settings.textInputBackground#1F1F1F
  • settings.textInputForeground#FFFFFF
  • sideBar.background#1f1f1f
  • sideBar.border#BA1B1D50
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#1F1F1F
  • sideBarSectionHeader.border#1F1F1F60
  • sideBarSectionHeader.foreground#CCCCCC
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1F1F1F
  • statusBar.border#Ba1b1d60
  • statusBar.debuggingBackground#Ba1b1d
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#BA1B1D
  • statusBar.noFolderBackground#1F1F1F
  • statusBarItem.hoverBackground#ffffff20
  • statusBarItem.hoverForeground#ffffff
  • statusBarItem.remoteBackground#BA1B1D
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#BA1B1D50
  • tab.activeBorder#BA1B1D
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#BA1B1D
  • tab.border#1F1F1F
  • tab.inactiveBackground#BA1B1D20
  • tab.inactiveForeground#FFFFFFaf
  • tab.unfocusedActiveBackground#BA1B1D40
  • tab.unfocusedActiveBorder#BA1B1D
  • tab.unfocusedActiveForeground#FFFFFF
  • tab.unfocusedInactiveBackground#BA1B1D10
  • tab.unfocusedInactiveForeground#FFFFFF7f
  • terminal.ansiBlack#1F1F1F
  • terminal.ansiBlue#CCCCCC
  • terminal.ansiBrightBlack#BA1B1D
  • terminal.ansiBrightBlue#CCCCCC
  • terminal.ansiBrightCyan#C66969
  • terminal.ansiBrightGreen#A9A9A9
  • terminal.ansiBrightMagenta#CB8989
  • terminal.ansiBrightRed#BA5353
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#CB8989
  • terminal.ansiCyan#C66969
  • terminal.ansiGreen#A9A9A9
  • terminal.ansiMagenta#CB8989
  • terminal.ansiRed#BA5353
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#CB8989
  • terminalCursor.background#1F1F1F
  • terminalCursor.foreground#Ba1b1d
  • textLink.activeForeground#FFFFFF
  • textLink.foreground#BA1B1D
  • titleBar.activeBackground#1F1F1F
  • titleBar.activeForeground#ba1b1d
  • titleBar.border#1F1F1F60
  • titleBar.inactiveBackground#1F1F1F
  • titleBar.inactiveForeground#ffffff
  • tree.indentGuidesStroke#5E5E5E
  • widget.border#ba1b1d30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
text, source#F9F9F9
comment#8A8076
string#FBA856
variable, support.other.variable, string.other.link, string.regexp, entity.name.tag, meta.tag, declaration.tag#47515D
constant.numeric#93A3BF
constant.language#93A3BF
constant.character, constant.other#448AA9
variable#A974AB
keyword#FBA856
storage#448AA9
storage.type#B553BF
entity.name.class#748096underline
entity.other.inherited-class#748096italic underline
entity.name.function#70807B
variable.parameter#EDEBE6italic
entity.name.tag#748096
entity.other.attribute-name.html, entity.other.attribute-name.id.html#93A3BF
support.function#448AA9
support.constant#80E045
support.type, support.class#748096italic
support.other.variable
meta.structure.dictionary.json string.quoted.double.json#93A3BF
meta.diff, meta.diff.header#75715E
markup.deleted#00A8C6
markup.inserted#A6E22E
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#8FBE00A0
entity.name.filename.find-in-files#E6DB74
keyword.other#605852
meta.property-value, support.constant.property-value, constant.other.color#93A3BF
meta.structure.dictionary.json string.quoted.double.json#586072
meta.structure.dictionary.value.json string.quoted.double.json#0CABC7
meta.property-name support.type.property-name#748096
meta.property-value punctuation.separator.key-value#748096
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#93A3BF
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#EDEBE6
variable.other#EDEBE6
variable.parameter.function.coffee#a5e3d0italic
entity.name.section.markdown#748096
punctuation.definition.heading.markdown#A2A797
markup.raw.inline.markdown#a5e3d0
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#A2A797
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#A2A797
punctuation.definition.metadata.markdown#A2A797
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#A2A797italic
markup.bold.markdown, markup.italic.markdown#A2A797
markup.italic.markdownitalic
markup.bold.markdownbold
markup.raw.block.markdown#00a8c6
markup.deleted.git_gutter#e61f44
markup.inserted.git_gutter#a7da1e
markup.changed.git_gutter#f7b83d
entity.class.css, entity.other.attribute-name.id.css, entity.name.tag.scss, entity.other.attribute-name.pseudo-element.css, entity.name.tag.reference#F9f9f9
entity.other.attribute-name.placeholder#B553BF
property-name.scss, property-name.css#748096
punctuation.section.property-list.begin.scss#E3EDFF
ultrared by EmaBixD - VS Code Theme