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#1D1A18
  • activityBar.foreground#E6E3E1
  • activityBarBadge.background#EFD36A
  • activityBarBadge.foreground#1D1A18
  • badge.background#AAA39E
  • badge.foreground#E6E3E1
  • button.background#3F3A35
  • debugToolBar.background#1D1A18
  • diffEditor.insertedTextBackground#A7D97C80
  • diffEditor.removedTextBackground#FF6B8A80
  • dropdown.background#3F3A35
  • dropdown.listBackground#1D1A18
  • editor.background#1D1A18
  • editor.foreground#E6E3E1
  • editor.lineHighlightBackground#2B2624
  • editor.selectionBackground#878b9180
  • editor.selectionHighlightBackground#575b6180
  • editor.wordHighlightBackground#4a4a7680
  • editor.wordHighlightStrongBackground#6a6a9680
  • editorBracketMatch.border#0000
  • editorCursor.foreground#E6E3E1
  • editorGroup.border#3F3A35
  • editorGroup.dropBackground#3F3A3580
  • editorGroupHeader.tabsBackground#1D1A18
  • editorHoverWidget.background#3F3A35
  • editorHoverWidget.border#AAA39E
  • editorIndentGuide.activeBackground#AAA39E
  • editorIndentGuide.background#3F3A35
  • editorLineNumber.activeForeground#E6E3E1
  • editorLineNumber.foreground#7E777265
  • editorOverviewRuler.addedForeground#0000
  • editorOverviewRuler.bracketMatchForeground#0000
  • editorOverviewRuler.deletedForeground#0000
  • editoroverviewruler.errorforeground#0000
  • editorOverviewRuler.findMatchForeground#0000
  • editorOverviewRuler.infoForeground#0000
  • editorOverviewRuler.modifiedForeground#0000
  • editoroverviewruler.warningforeground#0000
  • editorSuggestWidget.background#2B2624
  • editorSuggestWidget.border#AAA39E
  • editorWhitespace.foreground#3F3A35
  • editorWidget.background#1D1A18
  • focusBorder#AAA39E
  • gitDecoration.addedResourceForeground#0000
  • gitDecoration.deletedResourceForeground#0000
  • gitDecoration.ignoredResourceForeground#0000
  • gitDecoration.modifiedResourceForeground#0000
  • gitDecoration.renamedResourceForeground#0000
  • gitDecoration.stageDeletedResourceForeground#0000
  • gitDecoration.stageModifiedResourceForeground#0000
  • gitDecoration.untrackedResourceForeground#0000
  • input.background#3F3A35
  • inputOption.activeBorder#AAA39E
  • inputValidation.errorBackground#FF6B8A
  • inputValidation.errorBorder#FF6B8A
  • inputValidation.infoBackground#7AD6E2
  • inputValidation.infoBorder#7AD6E2
  • inputValidation.warningBackground#EFD36A
  • inputValidation.warningBorder#EFD36A
  • list.activeFocusBackground#3F3A35
  • list.activeSelectionBackground#3F3A35
  • list.activeSelectionForeground#EFD36A
  • list.dropBackground#3F3A35
  • list.highlightForeground#E6E3E1
  • list.hoverBackground#3F3A35
  • list.inactiveFocusBackground#3F3A35
  • list.inactiveSelectionBackground#3F3A35
  • list.inactiveSelectionForeground#EFD36A
  • menu.background#2B2624
  • menu.foreground#AAA39E
  • minimap.selectionHighlight#878b9180
  • panel.border#3F3A35
  • panelTitle.activeBorder#AAA39E
  • panelTitle.activeForeground#E6E3E1
  • panelTitle.inactiveForeground#7E7772
  • peekView.border#AAA39E
  • peekViewEditor.background#2B2624
  • peekViewEditor.matchHighlightBackground#AAA39E
  • peekViewResult.background#1D1A18
  • peekViewResult.matchHighlightBackground#AAA39E
  • peekViewResult.selectionBackground#3F3A35
  • peekViewTitle.background#1D1A18
  • pickerGroup.foreground#7E7772
  • ports.iconRunningProcessForeground#AAA39E
  • progressBar.background#AAA39E
  • quickInputList.focusBackground#3F3A35
  • scrollbar.shadow#0000
  • selection.background#878b9180
  • settings.focusedRowBackground#3F3A355A
  • sideBar.background#1D1A18
  • sideBarSectionHeader.background#1D1A18
  • statusBar.background#1D1A18
  • statusBar.debuggingBackground#AAA39E
  • statusBar.noFolderBackground#2B2624
  • statusBarItem.remoteBackground#B2A1F2
  • tab.activeBorder#EFD36A
  • tab.activeForeground#EFD36A
  • tab.border#1D1A18
  • tab.inactiveBackground#0000
  • tab.inactiveForeground#AAA39E
  • tab.lastPinnedBorder#3F3A35
  • terminal.ansiBlack#1D1A18
  • terminal.ansiBlue#7AD6E2
  • terminal.ansiBrightBlack#AAA39E
  • terminal.ansiBrightBlue#7AD6E2
  • terminal.ansiBrightCyan#7AD6E2
  • terminal.ansiBrightGreen#A7D97C
  • terminal.ansiBrightMagenta#B2A1F2
  • terminal.ansiBrightRed#FF6B8A
  • terminal.ansiBrightWhite#E6E3E1
  • terminal.ansiBrightYellow#EFD36A
  • terminal.ansiCyan#7AD6E2
  • terminal.ansiGreen#A7D97C
  • terminal.ansiMagenta#B2A1F2
  • terminal.ansiRed#FF6B8A
  • terminal.ansiWhite#E6E3E1
  • terminal.ansiYellow#EFD36A
  • titleBar.activeBackground#1D1A18
  • titleBar.inactiveBackground#1D1A18
  • widget.shadow#0000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#E6E3E1
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#E6E3E1
comment#7E7772
string#EFD36A
punctuation.definition.template-expression, punctuation.section.embedded#FF6B8A
meta.template.expression#E6E3E1
constant.numeric#B2A1F2
constant.language#B2A1F2
constant.character, constant.other#B2A1F2
variable#E6E3E1
keyword#FF6B8A
storage#FF6B8A
storage.type#7AD6E2italic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#A7D97Cunderline
entity.other.inherited-class, punctuation.separator.namespace.ruby#A7D97Citalic underline
entity.name.function#A7D97C
variable.parameter#FD9B6Aitalic
entity.name.tag#FF6B8A
entity.other.attribute-name#A7D97C
support.function#7AD6E2
support.constant#7AD6E2
support.type, support.class#7AD6E2italic
support.other.variable
invalid#FF6B8A
invalid.deprecated#FF6B8A
meta.structure.dictionary.json string.quoted.double.json#E6E3E1
meta.diff, meta.diff.header#AAA39E
markup.deleted#FF6B8A
markup.inserted#A7D97C
markup.changed#EFD36A
constant.numeric.line-number.find-in-files - match#B2A1F2A0
entity.name.filename.find-in-files#EFD36A
markup.quote#FF6B8A
markup.list#EFD36A
markup.bold, markup.italic#7AD6E2
markup.inline.raw#FD9B6A
markup.heading#A7D97C
markup.heading.setext#A7D97Cbold
markup.heading.markdownbold
markup.quote.markdown#AAA39Eitalic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#B2A1F2
markup.underline.link.markdown,markup.underline.link.image.markdown#EFD36A
markup.italic.markdownitalic
markup.strikethroughstrikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown#E6E3E1
punctuation.definition.list.begin.markdown#A7D97C
token.info-token#7AD6E2
token.warn-token#EFD36A
token.error-token#FF6B8A
token.debug-token#B2A1F2
variable.language#FD9B6A
Stonekai by Henrique - VS Code Theme