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.activeBackground#2b2b2b
  • activityBar.activeBorder#ffffff
  • activityBar.background#2b2b2b
  • activityBar.border#00000000
  • activityBar.dropBorder#1a1a1a
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#888888
  • activityBarBadge.background#007acc
  • activityBarBadge.foreground#ffffff
  • badge.background#262626
  • badge.foreground#dddddd
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#0f0f0f
  • breadcrumb.focusForeground#e0e0e0
  • breadcrumb.foreground#cccccccc
  • breadcrumbPicker.background#262626
  • button.background#007acc
  • button.foreground#ffffff
  • button.hoverBackground#004c7f
  • debugExceptionWidget.background#262626
  • debugExceptionWidget.border#666666
  • debugToolBar.background#262626
  • debugToolBar.border#363636
  • descriptionForeground#dddddd
  • diffEditor.border#000000
  • diffEditor.insertedTextBackground#86b42b44
  • diffEditor.removedTextBackground#c4265e44
  • dropdown.background#262626
  • dropdown.border#ffffff33
  • dropdown.foreground#ffffff
  • dropdown.listBackground#262626
  • editor.background#090909
  • editor.findMatchBorder#00000000
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#f2f2f20c
  • editor.focusedStackFrameHighlightBackground#b1b01124
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#262626
  • editor.lineHighlightBackground#1d1d1d
  • editor.lineHighlightBorder#292929
  • editor.rangeHighlightBackground#1d1d1d
  • editor.rangeHighlightBorder#292929
  • editor.selectionBackground#403d3d
  • editor.snippetFinalTabstopHighlightBackground#ffffff20
  • editor.snippetFinalTabstopHighlightBorder#00000000
  • editor.snippetTabstopHighlightBackground#ffffff20
  • editor.snippetTabstopHighlightBorder#00000000
  • editor.stackFrameHighlightBackground#b1b01124
  • editorBracketMatch.background#262626
  • editorBracketMatch.border#666666
  • editorCodeLens.foreground#666666
  • editorCursor.background#090909
  • editorCursor.foreground#ffffff
  • editorError.border#00000000
  • editorError.foreground#fe413f
  • editorGroup.border#ffffff33
  • editorGroup.dropBackground#ffffff12
  • editorGroup.emptyBackground#1a1a1a
  • editorGroup.focusedEmptyBorder#00000000
  • editorGroupHeader.noTabsBackground#1a1a1a
  • editorGroupHeader.tabsBackground#1a1a1a
  • editorGroupHeader.tabsBorder#ffffff33
  • editorGutter.addedBackground#86b42b
  • editorGutter.background#090909
  • editorGutter.deletedBackground#c4265e
  • editorGutter.modifiedBackground#007acc
  • editorHint.border#00000000
  • editorHint.foreground#007acc
  • editorHoverWidget.background#262626
  • editorHoverWidget.border#ffffff44
  • editorIndentGuide.activeBackground1#262626
  • editorIndentGuide.background1#262626
  • editorInfo.border#00000000
  • editorInfo.foreground#007acc
  • editorLineNumber.activeForeground#c6c6c6
  • editorLineNumber.foreground#858585
  • editorLink.activeForeground#66d9ef
  • editorMarkerNavigation.background#262626
  • editorMarkerNavigationError.background#fe413f
  • editorMarkerNavigationInfo.background#007acc
  • editorMarkerNavigationWarning.background#b1b011
  • editorOverviewRuler.addedForeground#86b42b
  • editorOverviewRuler.border#ffffff33
  • editorOverviewRuler.bracketMatchForeground#666666
  • editorOverviewRuler.currentContentForeground#ae81ff
  • editorOverviewRuler.deletedForeground#c4265e
  • editorOverviewRuler.errorForeground#fe413f
  • editorOverviewRuler.incomingContentForeground#66d9ef
  • editorOverviewRuler.infoForeground#007acc
  • editorOverviewRuler.modifiedForeground#007acc
  • editorOverviewRuler.rangeHighlightForeground#007acc
  • editorOverviewRuler.warningForeground#b1b011
  • editorPane.background#090909
  • editorRuler.foreground#363636
  • editorStickyScroll.shadow#F8F8F228
  • editorSuggestWidget.background#1a1a1a
  • editorSuggestWidget.border#ffffff33
  • editorSuggestWidget.foreground#dddddd
  • editorSuggestWidget.highlightForeground#dddddd
  • editorSuggestWidget.selectedBackground#262626
  • editorUnnecessaryCode.border#00000000
  • editorWarning.border#00000000
  • editorWarning.foreground#b1b011
  • editorWhitespace.foreground#363636
  • editorWidget.background#262626
  • editorWidget.border#ffffff44
  • editorWidget.resizeBorder#ffffff44
  • errorForeground#dddddd
  • extensionButton.prominentBackground#262626
  • extensionButton.prominentForeground#dddddd
  • extensionButton.prominentHoverBackground#333333
  • focusBorder#00000000
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#007acc
  • gitDecoration.conflictingResourceForeground#fe413f
  • gitDecoration.deletedResourceForeground#c4265e
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#2bb3b4
  • gitDecoration.untrackedResourceForeground#73c991
  • input.background#262626
  • input.border#ffffff33
  • input.foreground#ffffff
  • input.placeholderForeground#888888
  • inputOption.activeBackground#333333
  • inputOption.activeBorder#464646
  • inputValidation.errorBackground#fe413f
  • inputValidation.errorBorder#fc5b58
  • inputValidation.errorForeground#dddddd
  • inputValidation.infoBackground#007acc
  • inputValidation.infoBorder#008ae5
  • inputValidation.infoForeground#dddddd
  • inputValidation.warningBackground#b1b011
  • inputValidation.warningBorder#c9c914
  • inputValidation.warningForeground#dddddd
  • list.activeSelectionBackground#7fb3cc82
  • list.activeSelectionForeground#ffffff
  • list.deemphasizedForeground#8c8c8c
  • list.dropBackground#262626
  • list.errorForeground#fe413f
  • list.focusBackground#e4f3f724
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#e4f3f724
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#dceff532
  • list.inactiveSelectionForeground#ffffff
  • list.invalidItemForeground#fe413f
  • list.warningForeground#cca700
  • menu.background#262626
  • menu.foreground#ffffff
  • menu.selectionBackground#1a1a1a
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#4a4a4a
  • menubar.selectionBackground#262626
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#ffffff
  • merge.border#000000aa
  • merge.currentContentBackground#ae81ff44
  • merge.currentHeaderBackground#ae81ff88
  • merge.incomingContentBackground#66d9ef44
  • merge.incomingHeaderBackground#66d9ef88
  • minimap.findMatchHighlight#b1b011
  • notificationCenter.border#464646
  • notificationCenterHeader.background#333333
  • notificationCenterHeader.foreground#f0f0f0
  • notificationLink.foreground#66d9ef
  • notifications.background#262626
  • notifications.border#464646
  • notifications.foreground#f0f0f0
  • notificationToast.border#363636
  • panel.background#131313
  • panel.border#ffffff33
  • panel.dropBorder#262626
  • panelStickyScroll.shadow#F8F8F228
  • panelTitle.activeBorder#e7e7e7
  • panelTitle.activeForeground#f1f1f1
  • panelTitle.inactiveForeground#e7e7e799
  • peekView.border#666666
  • peekViewEditor.background#1a1a1a
  • peekViewEditor.matchHighlightBackground#333333
  • peekViewEditor.matchHighlightBorder#00000000
  • peekViewEditorGutter.background#1a1a1a
  • peekViewResult.background#1a1a1a
  • peekViewResult.fileForeground#dddddd
  • peekViewResult.lineForeground#dddddd
  • peekViewResult.matchHighlightBackground#333333
  • peekViewResult.selectionBackground#333333
  • peekViewResult.selectionForeground#dddddd
  • peekViewTitle.background#1a1a1a
  • peekViewTitleDescription.foreground#dddddd
  • peekViewTitleLabel.foreground#dddddd
  • pickerGroup.border#262626
  • pickerGroup.foreground#666666
  • progressBar.background#262626
  • sash.hoverBorder#ffffff44
  • scrollbar.shadow#F8F8F228
  • scrollbarSlider.activeBackground#ffffff4a
  • scrollbarSlider.background#ffffff24
  • scrollbarSlider.hoverBackground#ffffff36
  • selection.background#4a4a4a
  • settings.checkboxBackground#262626
  • settings.checkboxBorder#363636
  • settings.checkboxForeground#dddddd
  • settings.dropdownBackground#262626
  • settings.dropdownBorder#363636
  • settings.dropdownForeground#dddddd
  • settings.dropdownListBorder#666666
  • settings.focusedRowBorder#00000000
  • settings.headerForeground#dddddd
  • settings.modifiedItemIndicator#b3b42b
  • settings.numberInputBackground#262626
  • settings.numberInputBorder#363636
  • settings.numberInputForeground#dddddd
  • settings.textInputBackground#262626
  • settings.textInputBorder#363636
  • settings.textInputForeground#dddddd
  • sideBar.background#1a1a1a
  • sideBar.border#ffffff33
  • sideBar.dropBackground#1a1a1a
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#333333
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#005f9e
  • statusBar.border#005f9e
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#cc6633
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderBorder#68217a
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#ffffff16
  • statusBarItem.hoverBackground#ffffff20
  • statusBarItem.prominentBackground#262626
  • statusBarItem.prominentHoverBackground#ffffff40
  • tab.activeBackground#0f0f0f
  • tab.activeBorder#e7e7e7
  • tab.activeBorderTop#00000000
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#dddddd
  • tab.border#ffffff33
  • tab.hoverBackground#1a1a1a
  • tab.hoverBorder#ffffff33
  • tab.inactiveBackground#1a1a1a
  • tab.inactiveForeground#ffffff80
  • tab.inactiveModifiedBorder#666666
  • tab.unfocusedActiveBackground#0f0f0f
  • tab.unfocusedActiveBorder#e7e7e7
  • tab.unfocusedActiveBorderTop#00000000
  • tab.unfocusedActiveForeground#ffffff
  • tab.unfocusedActiveModifiedBorder#dddddd
  • tab.unfocusedHoverBackground#1a1a1a
  • tab.unfocusedHoverBorder#ffffff33
  • tab.unfocusedInactiveForeground#ffffff40
  • tab.unfocusedInactiveModifiedBorder#666666
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6a7ec8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819aff
  • terminal.ansiBrightCyan#66d9ef
  • terminal.ansiBrightGreen#a6e22e
  • terminal.ansiBrightMagenta#ae81ff
  • terminal.ansiBrightRed#f92672
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#e2e22e
  • terminal.ansiCyan#56adbc
  • terminal.ansiGreen#86b42b
  • terminal.ansiMagenta#8c6bc8
  • terminal.ansiRed#c4265e
  • terminal.ansiWhite#e3e3dd
  • terminal.ansiYellow#b3b42b
  • terminal.background#131313
  • terminal.border#ffffff33
  • terminal.foreground#ffffff
  • terminal.selectionBackground#ffffff24
  • terminal.tab.activeBorder#e7e7e7
  • terminalCursor.background#131313
  • terminalCursor.foreground#ffffff
  • textBlockQuote.background#262626
  • textBlockQuote.border#007acc80
  • textCodeBlock.background#262626
  • textLink.activeForeground#008ae5
  • textLink.foreground#007acc
  • textPreformat.background#262626
  • textPreformat.foreground#FFEE99
  • textSeparator.foreground#666666
  • titleBar.activeBackground#333333
  • titleBar.activeForeground#ffffff
  • titleBar.border#00000000
  • titleBar.inactiveBackground#33333399
  • titleBar.inactiveForeground#ffffff
  • walkThrough.embeddedEditorBackground#090909
  • welcomePage.tileBackground#262626
  • welcomePage.tileHoverBackground#333333
  • widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8C8C8Citalic
string#FFEE99
constant.numeric#B09cFF
constant.language#B09cFF
constant.character, constant.other#B09cFF
variable
keyword#F92672
storage#F92672
storage.type#66D9EFitalic
entity.name.class#66D9EFunderline
entity.other.inherited-class#66D9EFitalic underline
entity.name.function#A6E22E
variable.parameter#FD971Fitalic
entity.name.tag#F92672
entity.other.attribute-name#A6E22E
support.function#A6E22E
support.constant#66D9EF
support.type, support.class#66D9EFitalic
support.other.variable
support.other.namespace, entity.name.type.namespace#ecffc9
support.other.namespace.use-as.php#66D9EF
punctuation.separator.inheritance.php#F92672
support.function.misc.css, support.constant.property-value.css, support.constant.font-name.css#FFEE99
invalid#F8F8F0
invalid.deprecated#F8F8F0
meta.diff, meta.diff.header#E0EDDDbold
markup.deleted#fc618d
markup.inserted#A6E22E
markup.changed#E6DB74
markup.untracked#8b888f
meta.diff, meta.diff.range#3BC0F0
markup.quote#FF4F8Bitalic
markup.list#ffffff
markup.bold#66D9EFbold
markup.italic#66D9EFitalic
markup.raw#FD971F
markup.inline.raw#FD971F
markup.heading#A6E22Ebold
markup.heading.setext#A6E22Ebold
punctuation.definition.heading#9d9d9d
string.other.link.title, string.other.link.description#AE81FF
markup.underlineunderline
meta.image.inline, markup.underline.link#8C8C8C
markup.strikethroughstrikethrough
punctuation.definition.list.begin#9d9d9d
meta.separator#FF80F4
punctuation.definition.template-expression, punctuation.section.embedded#F92672
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
entity.name.function.templated#A6E22E
entity.name.function.member.static#A6E22E
meta.instance.constructor#A6E22E
variable.function#A6E22E
entity.name.type.class#66D9EF
entity.name.type.struct#66D9EF
entity.name.namespace#ecffc9
entity.name.type.enum#66D9EF
Monokai Dark Crisp by junbao-zhou - VS Code Theme