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#74C0FC
  • activityBar.background#2F1F14
  • activityBar.foreground#4DABF7
  • activityBarBadge.background#FF6B6B
  • activityBarBadge.foreground#2F1F14
  • button.background#4DABF7
  • button.foreground#2F1F14
  • button.hoverBackground#74C0FC
  • diffEditor.insertedLineBackground#2A3F2A
  • diffEditor.insertedTextBackground#2A4F3A
  • diffEditor.removedLineBackground#3F2A2A
  • diffEditor.removedTextBackground#4F2A2A
  • editor.background#2F1F14
  • editor.findMatchBackground#3A5F3A
  • editor.findMatchHighlightBackground#2A4F2A
  • editor.findRangeHighlightBackground#3F2F20
  • editor.foreground#E8D0BE
  • editor.lineHighlightBackground#3F2F20
  • editor.selectionBackground#4D3F30
  • editor.selectionHighlightBackground#5D4F3D
  • editorBracketMatch.background#4D3F30
  • editorBracketMatch.border#4DABF7
  • editorCursor.foreground#74C0FC
  • editorError.foreground#FF6B6B
  • editorGroupHeader.tabsBackground#1E1410
  • editorHint.foreground#6BCF7F
  • editorHoverWidget.background#3F2F20
  • editorHoverWidget.border#4D3F30
  • editorHoverWidget.foreground#F0E0D0
  • editorHoverWidget.statusBarBackground#4D3F30
  • editorIndentGuide.activeBackground#6D5F4D
  • editorIndentGuide.background#5D4F3D
  • editorInfo.foreground#4DABF7
  • editorLineNumber.activeForeground#4DABF7
  • editorLineNumber.foreground#8A7A6A
  • editorSuggestWidget.background#3F2F20
  • editorSuggestWidget.foreground#F0E0D0
  • editorSuggestWidget.highlightForeground#4DABF7
  • editorSuggestWidget.selectedBackground#4D3F30
  • editorSuggestWidget.selectedForeground#F0E0D0
  • editorWarning.foreground#FFD93D
  • editorWhitespace.foreground#5D4F3D
  • editorWidget.background#3F2F20
  • editorWidget.border#4D3F30
  • editorWidget.foreground#F0E0D0
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.ignoredResourceForeground#8A7A6A
  • gitDecoration.modifiedResourceForeground#FFD93D
  • gitDecoration.untrackedResourceForeground#4ECDC4
  • input.background#3F2F20
  • input.border#5D4F3D
  • input.foreground#E8D0BE
  • inputOption.activeBorder#4DABF7
  • inputValidation.errorBackground#4A2F2F
  • inputValidation.infoBackground#2A4F3F
  • inputValidation.warningBackground#4A4F2A
  • list.activeSelectionBackground#4D3F30
  • list.activeSelectionForeground#74C0FC
  • list.hoverBackground#5D4F3D
  • list.inactiveSelectionBackground#3F2F20
  • menu.background#3F2F20
  • menu.foreground#E8D0BE
  • menu.selectionBackground#4D3F30
  • menu.selectionForeground#4DABF7
  • menu.separatorBackground#4D3F30
  • menubar.background#3F2F20
  • menubar.foreground#E8D0BE
  • menubar.selectionBackground#4D3F30
  • menubar.selectionForeground#4DABF7
  • panel.background#2F1F14
  • panel.border#4D3F30
  • panelTitle.activeForeground#4DABF7
  • panelTitle.inactiveForeground#8A7A6A
  • parameterHints.activeBackground#4D3F30
  • parameterHints.activeForeground#F0E0D0
  • parameterHints.background#3F2F20
  • parameterHints.foreground#F0E0D0
  • quickInput.background#3F2F20
  • quickInput.foreground#F0E0D0
  • quickInputList.focusBackground#4D3F30
  • quickInputList.focusForeground#F0E0D0
  • scrollbar.shadow#2F1F14
  • scrollbarSlider.activeBackground#74C0FC80
  • scrollbarSlider.background#6D5F4D80
  • scrollbarSlider.hoverBackground#4DABF780
  • sideBar.background#3F2F20
  • sideBar.foreground#E8D0BE
  • sideBarSectionHeader.background#4D3F30
  • sideBarSectionHeader.foreground#74C0FC
  • sideBarTitle.foreground#4DABF7
  • statusBar.background#3F2F20
  • statusBar.debuggingBackground#5D4F3D
  • statusBar.foreground#4DABF7
  • statusBar.noFolderBackground#3F2F20
  • statusBarItem.prominentBackground#4D3F30
  • tab.activeBackground#2F1F14
  • tab.activeBorder#4DABF7
  • tab.activeForeground#74C0FC
  • tab.border#110D08
  • tab.inactiveBackground#1E1410
  • tab.inactiveForeground#8A7A6A
  • tab.unfocusedActiveBackground#1E1410
  • tab.unfocusedInactiveBackground#110D08
  • terminal.ansiBlack#3F2F20
  • terminal.ansiBlue#4DABF7
  • terminal.ansiBrightBlack#6D5F4D
  • terminal.ansiBrightBlue#74C0FC
  • terminal.ansiBrightCyan#6EDCD4
  • terminal.ansiBrightGreen#7FCF8F
  • terminal.ansiBrightMagenta#C5A3FF
  • terminal.ansiBrightRed#FF8E8E
  • terminal.ansiBrightWhite#F0E0D0
  • terminal.ansiBrightYellow#FFE66D
  • terminal.ansiCyan#4ECDC4
  • terminal.ansiGreen#6BCF7F
  • terminal.ansiMagenta#B197FC
  • terminal.ansiRed#FF6B6B
  • terminal.ansiWhite#E8D0BE
  • terminal.ansiYellow#FFD93D
  • terminal.background#2F1F14
  • terminal.foreground#E8D0BE
  • textLink.activeForeground#74C0FC
  • textLink.foreground#4DABF7
  • titleBar.activeBackground#3F2F20
  • titleBar.activeForeground#4DABF7
  • titleBar.inactiveBackground#2F1F14
  • titleBar.inactiveForeground#8A7A6A
  • toolbar.activeBackground#5D4F3D
  • toolbar.hoverBackground#4D3F30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A7A6Aitalic
string, string.quoted, string.template#6BCF7F
constant.numeric, constant.language.boolean, constant.language.null#FFD93D
keyword, storage.type, storage.modifier#FF6B6Bbold
entity.name.function, meta.function-call.generic, support.function#4DABF7
variable, meta.definition.variable#FFA07A
entity.name.type, entity.name.class, support.type, support.class#845EF7
constant, variable.other.constant#B197FC
entity.name.tag, meta.tag.sgml#4ECDC4
entity.other.attribute-name#FFE66D
keyword.operator, punctuation#74C0FC
punctuation.definition, punctuation.separator, punctuation.terminator#C5A3FF
markup.heading, entity.name.section#FF6B6Bbold
markup.boldbold
markup.italicitalic
markup.underline.link#4DABF7underline
Mourning Dove Theme by Michael Stott - VS Code Theme