Skip to main content
Coding Theme

Color themes

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#161b14
  • activityBar.inactiveForeground#9ca184
  • activityBarBadge.background#8ccf58
  • activityBarBadge.foreground#131712
  • badge.background#2f3c25
  • button.background#8ccf58
  • button.foreground#131712
  • button.hoverBackground#9cd773
  • debugToolBar.background#1c2118
  • descriptionForeground#c6bfa4
  • dropdown.background#20271d
  • dropdown.border#2b3422
  • editor.background#131712
  • editor.findMatchBackground#d0b06f44
  • editor.findMatchHighlightBackground#d0b06f26
  • editor.foreground#f2eddc
  • editor.hoverHighlightBackground#32422644
  • editor.inactiveSelectionBackground#25301c88
  • editor.lineHighlightBackground#1c2118
  • editor.selectionBackground#2d3822
  • editor.selectionHighlightBackground#2d382288
  • editor.wordHighlightBackground#32422644
  • editor.wordHighlightStrongBackground#32422688
  • editorBracketMatch.background#1f2619
  • editorBracketMatch.border#c9d891
  • editorCursor.foreground#f2eddc
  • editorGutter.addedBackground#76b87a88
  • editorGutter.background#131712
  • editorGutter.deletedBackground#b9654c88
  • editorGutter.modifiedBackground#c9d89188
  • editorIndentGuide.activeBackground#2d3822
  • editorIndentGuide.background#1f251b
  • editorLineNumber.activeForeground#c9d891
  • editorLineNumber.foreground#7a8468
  • editorLink.activeForeground#8ccf58
  • editorWhitespace.foreground#1f251b
  • editorWidget.background#20271d
  • editorWidget.border#2b3422
  • focusBorder#c9d891
  • foreground#f2eddc
  • gitDecoration.addedResourceForeground#76b87a
  • gitDecoration.deletedResourceForeground#b9654c
  • gitDecoration.ignoredResourceForeground#43503a
  • gitDecoration.modifiedResourceForeground#c9d891
  • gitDecoration.untrackedResourceForeground#8dd68f
  • input.background#20271d
  • input.border#2b3422
  • input.placeholderForeground#9ca184
  • list.activeSelectionBackground#24321f
  • list.focusHighlightForeground#c9d891
  • list.highlightForeground#c9d891
  • list.hoverBackground#1f2a1b
  • list.inactiveSelectionBackground#1a2318
  • list.inactiveSelectionForeground#e5dbc2
  • notifications.background#20271d
  • panel.background#161b14
  • panel.border#2b3422
  • panelTitle.inactiveForeground#9ca184
  • peekView.border#c9d891
  • peekViewEditor.background#1c2118
  • peekViewEditor.matchHighlightBackground#d0b06f44
  • peekViewResult.background#161b14
  • peekViewResult.matchHighlightBackground#d0b06f44
  • quickInput.background#20271d
  • scrollbarSlider.activeBackground#c9d89166
  • scrollbarSlider.background#2f3c2588
  • scrollbarSlider.hoverBackground#2f3c25cc
  • selection.background#2d3822
  • sideBar.background#171d15
  • sideBar.foreground#e5dbc2
  • sideBarSectionHeader.background#20271d
  • statusBar.background#161b14
  • statusBar.debuggingBackground#76b87a
  • statusBar.debuggingForeground#131712
  • statusBar.noFolderBackground#161b14
  • statusBarItem.hoverBackground#2a371f
  • tab.activeBackground#25321f
  • tab.activeBorder#c9d891
  • tab.border#131712
  • tab.hoverBackground#20271d
  • tab.inactiveBackground#171d15
  • tab.inactiveForeground#9ca184
  • tab.unfocusedActiveForeground#e5dbc2
  • tab.unfocusedInactiveForeground#7f866f
  • terminal.ansiBlack#1a1f18
  • terminal.ansiBlue#4f7b69
  • terminal.ansiBrightBlack#2b3422
  • terminal.ansiBrightBlue#5f8f7a
  • terminal.ansiBrightCyan#87d8b1
  • terminal.ansiBrightGreen#8dd68f
  • terminal.ansiBrightMagenta#c9a285
  • terminal.ansiBrightRed#c9755c
  • terminal.ansiBrightWhite#faf5e8
  • terminal.ansiBrightYellow#dcd79e
  • terminal.ansiCyan#74c6a0
  • terminal.ansiGreen#76b87a
  • terminal.ansiMagenta#b28c78
  • terminal.ansiRed#b9654c
  • terminal.ansiYellow#c9d891
  • terminal.background#131712
  • titleBar.activeBackground#161b14
  • titleBar.inactiveBackground#21281d
  • titleBar.inactiveForeground#9ca184

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7c826f
constant.numeric, constant.language, support.constant#d2aa5c
entity.name.function, support.function#9ddc7a
entity.name.tag, support.type.property-name#8bcf58
entity.name.type, support.type, support.class#74c6a0
entity.other.attribute-name, meta.tag.attribute-name, support.class.component#c7e3a6
entity.other.attribute-name.class#74c6a0
entity.other.attribute-name.id#d6b280
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#a9d68f
invalid#ffffff
keyword, storage.type, storage.modifier#8ccf58bold
markup.bold#9ddc7abold
markup.heading#c9d891bold
markup.italic#74c6a0italic
markup.link#8dd68f
meta.brace#c1cbb4
meta.property-name#b7dd8e
punctuation#c1cbb4
string, punctuation.definition.string#f0d6a4
support.constant.property-value#d2aa5c
variable.language#8ccf58
variable.other.constant, constant.other#c9d891
Traditional Japanese Theme by Adrià Forcada - VS Code Theme