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#182431
  • activityBar.inactiveForeground#8f9ca9
  • activityBarBadge.background#75b0de
  • activityBarBadge.foreground#141c24
  • badge.background#3a4d60
  • button.background#75b0de
  • button.foreground#141c24
  • button.hoverBackground#88bde6
  • debugToolBar.background#1e2a36
  • descriptionForeground#c0cad6
  • dropdown.background#21303d
  • dropdown.border#2d3c48
  • editor.background#141c24
  • editor.findMatchBackground#d6bc7444
  • editor.findMatchHighlightBackground#d6bc7426
  • editor.foreground#f1f7fc
  • editor.hoverHighlightBackground#3a4d6044
  • editor.inactiveSelectionBackground#2d3c4888
  • editor.lineHighlightBackground#1e2a36
  • editor.selectionBackground#324153
  • editor.selectionHighlightBackground#32415388
  • editor.wordHighlightBackground#3a4d6044
  • editor.wordHighlightStrongBackground#3a4d6088
  • editorBracketMatch.background#23313f
  • editorBracketMatch.border#bdd6ec
  • editorCursor.foreground#f1f7fc
  • editorGutter.addedBackground#7fc1ad88
  • editorGutter.background#141c24
  • editorGutter.deletedBackground#ba456388
  • editorGutter.modifiedBackground#bdd6ec88
  • editorIndentGuide.activeBackground#3a4d60
  • editorIndentGuide.background#273642
  • editorLineNumber.activeForeground#bdd6ec
  • editorLineNumber.foreground#758699
  • editorLink.activeForeground#75b0de
  • editorWhitespace.foreground#273642
  • editorWidget.background#21303d
  • editorWidget.border#2d3c48
  • focusBorder#2f5790
  • foreground#f1f7fc
  • gitDecoration.addedResourceForeground#74ad95
  • gitDecoration.deletedResourceForeground#ba4563
  • gitDecoration.ignoredResourceForeground#445464
  • gitDecoration.modifiedResourceForeground#bdd6ec
  • gitDecoration.untrackedResourceForeground#8bd3be
  • input.background#21303d
  • input.border#2d3c48
  • input.placeholderForeground#8f9ca9
  • list.activeSelectionBackground#293a4d
  • list.focusHighlightForeground#75b0de
  • list.highlightForeground#75b0de
  • list.hoverBackground#253547
  • list.inactiveSelectionBackground#202e3b
  • list.inactiveSelectionForeground#d9e5f0
  • notifications.background#21303d
  • panel.background#182431
  • panel.border#2d3c48
  • panelTitle.inactiveForeground#8f9ca9
  • peekView.border#bdd6ec
  • peekViewEditor.background#1e2a36
  • peekViewEditor.matchHighlightBackground#d6bc7444
  • peekViewResult.background#182431
  • peekViewResult.matchHighlightBackground#d6bc7444
  • quickInput.background#21303d
  • scrollbarSlider.activeBackground#bdd6ec66
  • scrollbarSlider.background#3a4d6088
  • scrollbarSlider.hoverBackground#3a4d60cc
  • selection.background#324153
  • sideBar.background#192530
  • sideBar.foreground#d9e5f0
  • sideBarSectionHeader.background#21303d
  • statusBar.background#162a3f
  • statusBar.debuggingBackground#74ad95
  • statusBar.debuggingForeground#141c24
  • statusBar.noFolderBackground#162a3f
  • statusBarItem.hoverBackground#26415a
  • tab.activeBackground#2c3d51
  • tab.activeBorder#2f5790
  • tab.border#141c24
  • tab.hoverBackground#21303d
  • tab.inactiveBackground#192530
  • tab.inactiveForeground#8f9ca9
  • tab.unfocusedActiveForeground#d9e5f0
  • tab.unfocusedInactiveForeground#758394
  • terminal.ansiBlack#1a2632
  • terminal.ansiBlue#2f5790
  • terminal.ansiBrightBlack#2d3c48
  • terminal.ansiBrightBlue#3c6aa8
  • terminal.ansiBrightCyan#99ddee
  • terminal.ansiBrightGreen#8bd3be
  • terminal.ansiBrightMagenta#a9a0e4
  • terminal.ansiBrightRed#cb5c79
  • terminal.ansiBrightWhite#f7fbff
  • terminal.ansiBrightYellow#e1d9a2
  • terminal.ansiCyan#86cde3
  • terminal.ansiGreen#74ad95
  • terminal.ansiMagenta#8f87ca
  • terminal.ansiRed#ba4563
  • terminal.ansiYellow#d2c48a
  • terminal.background#141c24
  • titleBar.activeBackground#182431
  • titleBar.inactiveBackground#23313f
  • titleBar.inactiveForeground#8f9ca9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#768ba0—
constant.numeric, constant.language, support.constant#f0ba94—
entity.name.function, support.function#86cde3—
entity.name.tag, support.type.property-name#b0a3ef—
entity.name.type, support.type, support.class#8bd3be—
entity.other.attribute-name, meta.tag.attribute-name, support.class.component#d6c9f2—
entity.other.attribute-name.class#8bd3be—
entity.other.attribute-name.id#8f87ca—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#a9a0e4—
invalid#ffffff—
keyword, storage.type, storage.modifier#75b0debold
markup.bold#86cde3bold
markup.heading#bdd6ecbold
markup.italic#b0a3efitalic
markup.link#8bd3be—
meta.brace#bcc7d4—
meta.property-name#bdd6ec—
punctuation#bcc7d4—
string, punctuation.definition.string#f5dfad—
support.constant.property-value#f0ba94—
variable.language#75b0de—
variable.other.constant, constant.other#bdd6ec—
Traditional Japanese Theme by Adrià Forcada - VS Code Theme