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