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.background#0c0c0c
  • activityBar.border#1a1a1a
  • activityBar.foreground#bcb9b2
  • activityBar.inactiveForeground#4a4845
  • activityBarBadge.background#fac118
  • activityBarBadge.foreground#0c0c0c
  • badge.background#fac118
  • badge.foreground#0c0c0c
  • breadcrumb.background#121212
  • breadcrumb.focusForeground#fac118
  • breadcrumb.foreground#6e6b65
  • breadcrumbPicker.background#0c0c0c
  • button.background#fac118
  • button.foreground#0c0c0c
  • button.hoverBackground#ffd04a
  • button.secondaryBackground#1e1e1e
  • button.secondaryForeground#bcb9b2
  • button.secondaryHoverBackground#2a2a2a
  • dropdown.background#0c0c0c
  • dropdown.border#1e1e1e
  • dropdown.foreground#bcb9b2
  • editor.background#121212
  • editor.findMatchBackground#fac11850
  • editor.findMatchHighlightBackground#fac11830
  • editor.foreground#bcb9b2
  • editor.lineHighlightBackground#181818
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#fac11830
  • editor.selectionHighlightBackground#fac11820
  • editor.wordHighlightBackground#c3930120
  • editor.wordHighlightStrongBackground#c3930130
  • editorBracketMatch.background#fac11820
  • editorBracketMatch.border#fac11880
  • editorCursor.foreground#fac118
  • editorError.foreground#e74c3c
  • editorGroupHeader.tabsBackground#0c0c0c
  • editorGroupHeader.tabsBorder#1a1a1a
  • editorGutter.addedBackground#7a9e5e
  • editorGutter.background#121212
  • editorGutter.deletedBackground#c0392b
  • editorGutter.modifiedBackground#fac118
  • editorHint.foreground#6e6b65
  • editorHoverWidget.background#0c0c0c
  • editorHoverWidget.border#1e1e1e
  • editorIndentGuide.activeBackground1#3a3835
  • editorIndentGuide.background1#1e1e1e
  • editorInfo.foreground#5a7a9e
  • editorLineNumber.activeForeground#fac118
  • editorLineNumber.foreground#3a3835
  • editorOverviewRuler.addedForeground#7a9e5e
  • editorOverviewRuler.border#1a1a1a
  • editorOverviewRuler.deletedForeground#c0392b
  • editorOverviewRuler.errorForeground#e74c3c
  • editorOverviewRuler.modifiedForeground#fac118
  • editorOverviewRuler.warningForeground#c39301
  • editorRuler.foreground#1e1e1e
  • editorSuggestWidget.background#0c0c0c
  • editorSuggestWidget.border#1e1e1e
  • editorSuggestWidget.foreground#bcb9b2
  • editorSuggestWidget.highlightForeground#fac118
  • editorSuggestWidget.selectedBackground#1e1c18
  • editorWarning.foreground#c39301
  • editorWhitespace.foreground#2a2825
  • editorWidget.background#0c0c0c
  • editorWidget.border#1e1e1e
  • editorWidget.foreground#bcb9b2
  • focusBorder#fac11880
  • gitDecoration.conflictingResourceForeground#e74c3c
  • gitDecoration.deletedResourceForeground#c0392b
  • gitDecoration.ignoredResourceForeground#4a4845
  • gitDecoration.modifiedResourceForeground#fac118
  • gitDecoration.untrackedResourceForeground#7a9e5e
  • input.background#0c0c0c
  • input.border#1e1e1e
  • input.foreground#bcb9b2
  • input.placeholderForeground#4a4845
  • inputOption.activeBackground#fac11820
  • inputOption.activeBorder#fac118
  • inputValidation.errorBackground#2a1212
  • inputValidation.errorBorder#c0392b
  • inputValidation.warningBackground#1a1500
  • inputValidation.warningBorder#c39301
  • list.activeSelectionBackground#1e1c18
  • list.activeSelectionForeground#fac118
  • list.errorForeground#e74c3c
  • list.focusBackground#1e1c18
  • list.focusForeground#fac118
  • list.highlightForeground#fac118
  • list.hoverBackground#1a1a1a
  • list.hoverForeground#bcb9b2
  • list.inactiveSelectionBackground#181818
  • list.inactiveSelectionForeground#bcb9b2
  • list.warningForeground#c39301
  • merge.currentContentBackground#7a9e5e10
  • merge.currentHeaderBackground#7a9e5e30
  • merge.incomingContentBackground#5a7a9e10
  • merge.incomingHeaderBackground#5a7a9e30
  • notificationLink.foreground#fac118
  • notifications.background#0c0c0c
  • notifications.border#1e1e1e
  • notifications.foreground#bcb9b2
  • panel.background#0c0c0c
  • panel.border#1a1a1a
  • panelTitle.activeBorder#fac118
  • panelTitle.activeForeground#fac118
  • panelTitle.inactiveForeground#4a4845
  • peekView.border#fac118
  • peekViewEditor.background#0e0e0e
  • peekViewEditor.matchHighlightBackground#fac11840
  • peekViewResult.background#0c0c0c
  • peekViewResult.fileForeground#bcb9b2
  • peekViewResult.lineForeground#6e6b65
  • peekViewResult.matchHighlightBackground#fac11830
  • peekViewResult.selectionBackground#1e1c18
  • peekViewResult.selectionForeground#fac118
  • peekViewTitle.background#0c0c0c
  • peekViewTitleDescription.foreground#6e6b65
  • peekViewTitleLabel.foreground#bcb9b2
  • progressBar.background#fac118
  • scrollbar.shadow#00000060
  • scrollbarSlider.activeBackground#4a4a4a80
  • scrollbarSlider.background#2a2a2a80
  • scrollbarSlider.hoverBackground#3a3a3a80
  • selection.background#fac11840
  • sideBar.background#0c0c0c
  • sideBar.border#1a1a1a
  • sideBar.foreground#bcb9b2
  • sideBarSectionHeader.background#0c0c0c
  • sideBarSectionHeader.border#1a1a1a
  • sideBarSectionHeader.foreground#6e6b65
  • sideBarTitle.foreground#6e6b65
  • statusBar.background#0c0c0c
  • statusBar.border#1a1a1a
  • statusBar.debuggingBackground#c39301
  • statusBar.debuggingForeground#0c0c0c
  • statusBar.foreground#6e6b65
  • statusBar.noFolderBackground#0c0c0c
  • statusBarItem.activeBackground#222222
  • statusBarItem.hoverBackground#1a1a1a
  • statusBarItem.remoteBackground#fac118
  • statusBarItem.remoteForeground#0c0c0c
  • tab.activeBackground#121212
  • tab.activeBorderTop#fac118
  • tab.activeForeground#bcb9b2
  • tab.border#1a1a1a
  • tab.hoverBackground#181818
  • tab.inactiveBackground#0c0c0c
  • tab.inactiveForeground#4a4845
  • tab.unfocusedActiveBorderTop#c39301
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#5a7a9e
  • terminal.ansiBrightBlack#3a3835
  • terminal.ansiBrightBlue#6a8aae
  • terminal.ansiBrightCyan#6aae9a
  • terminal.ansiBrightGreen#8fb96e
  • terminal.ansiBrightMagenta#9a7aae
  • terminal.ansiBrightRed#e74c3c
  • terminal.ansiBrightWhite#d4d1ca
  • terminal.ansiBrightYellow#ffd04a
  • terminal.ansiCyan#5a9e8a
  • terminal.ansiGreen#7a9e5e
  • terminal.ansiMagenta#8a6a9e
  • terminal.ansiRed#c0392b
  • terminal.ansiWhite#bcb9b2
  • terminal.ansiYellow#fac118
  • terminal.background#0c0c0c
  • terminal.foreground#bcb9b2
  • terminalCursor.foreground#fac118
  • titleBar.activeBackground#0c0c0c
  • titleBar.activeForeground#bcb9b2
  • titleBar.border#1a1a1a
  • titleBar.inactiveBackground#0c0c0c
  • titleBar.inactiveForeground#4a4845
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a4845italic
comment.block.documentation#5a5855italic
keyword, keyword.control, keyword.operator.new, storage.modifier#c39301
storage.type#c39301
entity.name.type, entity.other.inherited-class, support.type, support.class#c39301
support.type.primitive, keyword.type#c39301
entity.name.type.interface#d4a820italic
entity.name.function, support.function, meta.function-call entity.name.function#fac118
support.function.builtin#c39301
entity.name.function.constructor#c39301
variable, variable.other#bcb9b2
variable.language#fac118italic
variable.parameter#bcb9b2
variable.other.property, support.type.property-name#bcb9b2
string, string.quoted#8a9e6a
constant.character.escape, string.regexp#c39301
constant.numeric#fac118
constant.language, constant.other#fac118
keyword.operator#bcb9b2
punctuation#6e6b65
punctuation.definition.bracket, meta.brace#8a8780
entity.name.tag#c39301
entity.other.attribute-name#fac118
support.type.property-name.css#bcb9b2
support.constant.property-value.css#8a9e6a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#fac118
meta.preprocessor, keyword.control.directive#c39301
meta.decorator, entity.name.function.decorator, punctuation.decorator#c39301
entity.name.namespace, entity.name.module#bcb9b2
markup.heading#fac118bold
markup.bold#fac118bold
markup.italic#fac118italic
markup.inline.raw, markup.fenced_code.block#8a9e6a
markup.underline.link#c39301
invalid#e74c3c
VDB Theme Dark by TibeDev - VS Code Theme