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#0a0a0a
  • activityBar.activeBorder#005190
  • activityBar.activeFocusBorder#005190
  • activityBar.background#010101
  • activityBar.border#AD630000
  • activityBar.dropBorder#005190
  • activityBar.foreground#179AFF
  • activityBar.inactiveForeground#AD6300
  • activityBarBadge.background#003F6F
  • activityBarBadge.foreground#fff
  • badge.background#003F6F
  • badge.foreground#fff
  • bookmarks.lineBackground#179AFF
  • bookmarks.lineBorder#ff0000
  • bookmarks.overviewRuler#ff0000
  • breadcrumb.activeSelectionForeground#E08000
  • breadcrumb.background#1a1a1a
  • breadcrumb.focusForeground#FF9507
  • breadcrumb.foreground#AD6300
  • breadcrumbPicker.background#1a1a1a
  • button.background#003F6F
  • button.foreground#FF9507
  • button.hoverBackground#005190
  • checkbox.background#1a1a1a
  • checkbox.border#AD6300
  • checkbox.foreground#FF9507
  • debugIcon.breakpointCurrentStackframeForeground#FF9507
  • debugIcon.breakpointDisabledForeground#FF004D50
  • debugIcon.breakpointForeground#FF004D
  • debugIcon.continueForeground#FF9507
  • debugIcon.pauseForeground#FF9507
  • debugIcon.restartForeground#FF9507
  • debugIcon.startForeground#E08000
  • debugIcon.stepBackForeground#179AFF
  • debugIcon.stepIntoForeground#179AFF
  • debugIcon.stepOutForeground#179AFF
  • debugIcon.stepOverForeground#179AFF
  • debugIcon.stopForeground#FF004D
  • debugTokenExpression.boolean#FFA4C0
  • debugTokenExpression.error#FF004D
  • debugTokenExpression.name#FF9507
  • debugTokenExpression.number#FFC576
  • debugTokenExpression.string#7FC8FF
  • debugTokenExpression.value#FFC576
  • debugToolBar.background#0a0a0a
  • debugToolBar.border#2a2a2a
  • debugView.exceptionLabelBackground#00000000
  • debugView.exceptionLabelForeground#FF004D
  • debugView.stateLabelBackground#00000000
  • debugView.stateLabelForeground#58C200
  • descriptionForeground#E08000
  • dropdown.background#080808
  • dropdown.border#AD6300
  • dropdown.foreground#E08000
  • dropdown.listBackground#1a1a1a
  • editor.background#060606
  • editor.findMatchBackground#AD630080
  • editor.findMatchHighlightBackground#AD63005c
  • editor.findRangeHighlightBackground#179AFF30
  • editor.foreground#a0a0a0
  • editor.inactiveSelectionBackground#179AFF44
  • editor.lineHighlightBackground#003F6F30
  • editor.lineHighlightBorder#003F6F50
  • editor.selectionBackground#179AFF64
  • editor.selectionHighlightBackground#179AFF34
  • editor.snippetFinalTabstopHighlightBackground#00000000
  • editor.snippetFinalTabstopHighlightBorder#179AFF
  • editor.snippetTabstopHighlightBackground#00000000
  • editor.snippetTabstopHighlightBorder#FF9507
  • editorBracketMatch.background#005190
  • editorBracketMatch.border#179AFF
  • editorCursor.background#179AFF
  • editorCursor.foreground#E08000
  • editorGroup.dropBackground#212121
  • editorGroup.emptyBackground#070707
  • editorGroupHeader.noTabsBackground#0a0a0a
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorGutter.addedBackground#58C200
  • editorGutter.background#0a0a0a
  • editorGutter.commentRangeForeground#FFA4C0
  • editorGutter.deletedBackground#C2003B
  • editorGutter.foldingControlForeground#FF9507
  • editorGutter.modifiedBackground#005190
  • editorLightBulb.foreground#FF9507
  • editorLightBulbAutoFix.foreground#ff0000
  • editorLineNumber.activeForeground#179AFF
  • editorLineNumber.foreground#AD6300
  • editorLink.activeForeground#179AFF
  • editorRuler.foreground#a0a0a040
  • editorSuggestWidget.background#060606
  • editorSuggestWidget.border#003F6F
  • editorSuggestWidget.foreground#FF9507
  • editorSuggestWidget.highlightForeground#179AFF
  • editorSuggestWidget.selectedBackground#003F6F4f
  • editorWhitespace.foreground#96002D
  • editorWidget.background#1a1a1a
  • editorWidget.border#E08000
  • editorWidget.foreground#AD6300
  • editorWidget.resizeBorder#E08000
  • extensionButton.prominentBackground#AD6300
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#FF9507
  • foreground#b0b0b0
  • gitDecoration.addedResourceForeground#74FF00
  • gitDecoration.conflictingResourceForeground#FF719C
  • gitDecoration.deletedResourceForeground#FF004D
  • gitDecoration.ignoredResourceForeground#FFC576
  • gitDecoration.modifiedResourceForeground#179AFF
  • gitDecoration.submoduleResourceForeground#B1DDFF
  • gitDecoration.untrackedResourceForeground#CDFFA4
  • icon.foreground#E08000
  • input.background#1a1a1a
  • input.border#AD6300
  • input.foreground#FF9507
  • input.placeholderForeground#AD6300
  • list.activeSelectionBackground#161616
  • list.activeSelectionForeground#FF9507
  • list.focusBackground#161616
  • list.focusForeground#FF9507
  • list.inactiveSelectionBackground#121212
  • list.inactiveSelectionForeground#E08000
  • menu.background#1a1a1a
  • menu.border#1a1a1a
  • menu.foreground#E08000
  • menu.selectionBackground#3f3f3f
  • menu.selectionBorder#AD6300
  • menu.selectionForeground#FF9507
  • menu.separatorBackground#AD6300
  • menubar.selectionBackground#3f3f3f
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#FF9507
  • minimap.background#0a0a0a
  • minimapSlider.activeBackground#003F6F66
  • minimapSlider.background#003F6F22
  • minimapSlider.hoverBackground#003F6F33
  • notificationCenter.border#AD6300
  • notificationCenterHeader.background#040404
  • notificationCenterHeader.foreground#FF9507
  • notifications.background#101010
  • notificationsErrorIcon.foreground#FF004D
  • notificationsInfoIcon.foreground#FFBF00
  • notificationsWarningIcon.foreground#FF7400
  • panel.background#0f0f0f
  • panel.border#00000000
  • panel.dropBorder#003F6F
  • panelSection.dropBackground#1a1a1a
  • panelSectionHeader.background#0a0a0a
  • panelSectionHeader.foreground#FF9507
  • panelTitle.activeBorder#005190
  • panelTitle.activeForeground#179AFF
  • panelTitle.inactiveForeground#AD6300
  • peekView.border#AD6300
  • peekViewTitle.background#060606
  • peekViewTitleDescription.foreground#a0a0a0
  • peekViewTitleLabel.foreground#FF9507
  • problemsErrorIcon.foreground#FF004D
  • problemsInfoIcon.foreground#FFBF00
  • problemsWarningIcon.foreground#FF7400
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#E08000
  • scrollbarSlider.background#AD6300cc
  • scrollbarSlider.hoverBackground#E08000cc
  • settings.checkboxBackground#1a1a1a
  • settings.checkboxBorder#AD6300
  • settings.checkboxForeground#FF9507
  • settings.dropdownBackground#080808
  • settings.dropdownBorder#AD6300
  • settings.dropdownForeground#E08000
  • settings.dropdownListBorder#AD6300
  • settings.headerForeground#FF9507
  • settings.modifiedItemIndicator#005190
  • settings.numberInputBackground#1a1a1a
  • settings.numberInputBorder#AD6300
  • settings.numberInputForeground#FF9507
  • settings.textInputBackground#1a1a1a
  • settings.textInputBorder#AD6300
  • settings.textInputForeground#FF9507
  • sideBar.background#080808
  • sideBar.border#AD630000
  • sideBar.dropBackground#2a2a2a
  • sideBar.foreground#a0a0a0
  • sideBarSectionHeader.background#1f1f1f
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#FF9507
  • sideBarTitle.foreground#179AFF
  • statusBar.background#040404
  • statusBar.border#E08000
  • statusBar.debuggingBackground#0a0a0a
  • statusBar.debuggingBorder#003F6F
  • statusBar.debuggingForeground#179AFF
  • statusBar.foreground#FF9507
  • statusBar.noFolderBackground#040404
  • statusBar.noFolderBorder#AD6300
  • statusBar.noFolderForeground#AD6300
  • statusBarItem.activeBackground#171717
  • statusBarItem.hoverBackground#171717
  • symbolIcon.arrayForeground#179AFF
  • symbolIcon.booleanForeground#179AFF
  • symbolIcon.classForeground#179AFF
  • symbolIcon.colorForeground#179AFF
  • symbolIcon.constantForeground#179AFF
  • symbolIcon.constructorForeground#179AFF
  • symbolIcon.enumeratorForeground#179AFF
  • symbolIcon.enumeratorMemberForeground#179AFF
  • symbolIcon.eventForeground#179AFF
  • symbolIcon.fieldForeground#179AFF
  • symbolIcon.fileForeground#179AFF
  • symbolIcon.folderForeground#179AFF
  • symbolIcon.functionForeground#179AFF
  • symbolIcon.interfaceForeground#179AFF
  • symbolIcon.keyForeground#179AFF
  • symbolIcon.keywordForeground#179AFF
  • symbolIcon.methodForeground#179AFF
  • symbolIcon.moduleForeground#179AFF
  • symbolIcon.namespaceForeground#179AFF
  • symbolIcon.nullForeground#179AFF
  • symbolIcon.numberForeground#179AFF
  • symbolIcon.objectForeground#179AFF
  • symbolIcon.operatorForeground#179AFF
  • symbolIcon.packageForeground#179AFF
  • symbolIcon.propertyForeground#179AFF
  • symbolIcon.referenceForeground#179AFF
  • symbolIcon.snippetForeground#179AFF
  • symbolIcon.stringForeground#179AFF
  • symbolIcon.structForeground#179AFF
  • symbolIcon.textForeground#179AFF
  • symbolIcon.typeParameterForeground#179AFF
  • symbolIcon.unitForeground#179AFF
  • symbolIcon.variableForeground#179AFF
  • tab.activeBackground#060606
  • tab.activeForeground#FF9507
  • tab.hoverBackground#121212
  • tab.hoverForeground#E08000
  • tab.inactiveBackground#2f2f2f
  • tab.inactiveForeground#9f9f9f
  • tab.unfocusedActiveBackground#171717
  • tab.unfocusedActiveForeground#179AFF
  • tab.unfocusedHoverBackground#060606
  • tab.unfocusedHoverForeground#005190
  • tab.unfocusedInactiveBackground#010101
  • tab.unfocusedInactiveForeground#4f4f4f
  • terminal.background#010101
  • terminal.foreground#E08000
  • terminal.selectionBackground#179AFF
  • terminalCursor.background#179AFF
  • terminalCursor.foreground#AD6300
  • textLink.activeForeground#7FC8FF
  • textLink.foreground#179AFF
  • textPreformat.foreground#FF9507
  • titleBar.activeBackground#121212
  • titleBar.activeForeground#E08000
  • titleBar.inactiveBackground#020202
  • titleBar.inactiveForeground#AD6300
  • tree.indentGuidesStroke#E08000
  • walkThrough.embeddedEditorBackground#060606
  • welcomePage.background#101010
  • welcomePage.buttonBackground#003F6F
  • welcomePage.buttonHoverBackground#005190
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#96002Ditalic
meta.embedded, source.groovy.embedded#F8F8F2
string#E6DB74
punctuation.definition.template-expression, punctuation.section.embedded#F92672
meta.template.expression#F8F8F2
constant.numeric#AE81FF
constant.language#AE81FF
constant.character, constant.other#AE81FF
variable#FF9507
keyword#F92672
storage#F92672
storage.type#66D9EFitalic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#A6E22E
entity.other.inherited-class#A6E22E
entity.name.function#A6E22E
variable.parameter#FD971Fitalic
entity.name.tag#F92672
entity.other.attribute-name#A6E22E
support.function#66D9EF
support.constant#66D9EF
support.type, support.class#66D9EFitalic
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
meta.structure.dictionary.json string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#75715E
markup.deleted#F92672
markup.inserted#A6E22E
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#E6DB74
markup.quote#F92672
markup.list#E6DB74
markup.bold, markup.italic#66D9EF
markup.inline.raw#FD971F
markup.heading#A6E22E
markup.heading.setext#A6E22Ebold
markup.heading.markdownbold
markup.quote.markdown#75715Eitalic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#AE81FF
markup.underline.link.markdown,markup.underline.link.image.markdown#E6DB74
markup.italic.markdownitalic
markup.list.unnumbered.markdown, markup.list.numbered.markdown#F8F8F2
punctuation.definition.list.begin.markdown#A6E22E
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
variable.language#FD971F
doran'vs by Ciro Amato - VS Code Theme