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#2f333d
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#6699cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#282c34
  • button.background#404754
  • debugToolBar.background#21252b
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#1d1f23
  • dropdown.border#282c35
  • editor.background#282c35
  • editor.findMatchHighlightBackground#314365
  • editor.foreground#d4d4d4
  • editor.lineHighlightBackground#383e4a
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.wordHighlightBackground#484e5b
  • editor.wordHighlightStrongBackground#abb2bf26
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#b6bcc4
  • editorError.foreground#e15a60
  • editorGroup.background#181a1f
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#1c1f26
  • editorGroupHeader.tabsBorder#282c35
  • editorGutter.background#282c35
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.background#3b4048
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#21252b
  • gitDecoration.conflictingResourceForeground#e15a60
  • gitDecoration.deletedResourceForeground#e15a60
  • gitDecoration.ignoredResourceForeground#64727f
  • gitDecoration.modifiedResourceForeground#6699cc
  • gitDecoration.untrackedResourceForeground#99c794
  • input.background#1d1f23
  • list.activeSelectionBackground#343d46
  • list.activeSelectionForeground#dfe1e8
  • list.focusBackground#343d46
  • list.focusForeground#dfe1e8
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#232830
  • list.hoverForeground#c0c5cd
  • list.inactiveSelectionBackground#343d46
  • list.inactiveSelectionForeground#dfe1e8
  • panel.background#232830
  • panel.border#232830
  • peekViewEditor.matchHighlightBackground#29244b
  • scrollbar.shadow#282c35
  • scrollbarSlider.activeBackground#343d46
  • scrollbarSlider.background#282c35
  • scrollbarSlider.hoverBackground#343d46
  • sideBar.background#232830
  • sideBar.border#232830
  • sideBar.foreground#64727f
  • sideBarSectionHeader.background#282c34
  • sideBarSectionHeader.foreground#c0c5cd
  • statusBar.background#21252b
  • statusBar.debuggingBackground#7e0097
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252b
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#2b303b
  • tab.border#1c1f26
  • tab.inactiveBackground#1c1f26
  • terminal.ansiBlack#7f7f7f
  • terminal.ansiBlue#6699cc
  • terminal.ansiBrightBlack#7f7f7f
  • terminal.ansiBrightBlue#6699cc
  • terminal.ansiBrightCyan#5fb3b3
  • terminal.ansiBrightGreen#99c794
  • terminal.ansiBrightMagenta#c594c5
  • terminal.ansiBrightRed#e15a60
  • terminal.ansiBrightWhite#d4d4d4
  • terminal.ansiBrightYellow#ffe2a9
  • terminal.ansiCyan#5fb3b3
  • terminal.ansiGreen#99c794
  • terminal.ansiMagenta#c594c5
  • terminal.ansiRed#e15a60
  • terminal.ansiWhite#d4d4d4
  • terminal.ansiYellow#ffe2a9
  • titleBar.activeBackground#1c1f26
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#1c1f26
  • titleBar.inactiveForeground#6b717d
  • widget.shadow#282c35

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d4d4d4ff
comment, punctuation.definition.comment#7F7F7Fitalic
variable.other.flowtype.js, punctuation.section.flowtype.begin.js, punctuation.section.flowtype.end.js#d4d4d4
keyword, storage.type.js, storage.type.function.js, storage.type.extends.js, storage.type.function.js, storage.type.class.js, support.type.type.flowtype.js, meta.type.flowtype.js#7F7F7F
variable.function.js, meta.class meta.group.braces.curly meta.function-call variable.function.js, entity.name.tag.jsx, variable.function.constructor.js, entity.name.tag.script.html, support.type.property-name.css, entity.name.tag.style.html, tag.decorator.js#ffe2a9
entity.name.function.js, meta.class.js entity.name.class, meta.class meta.function-call variable.function.js, source.js keyword.control.loop.js, storage.type.function.arrow.js, entity.other.attribute-name.class.css#f1a5ab
keyword.control.flow.js, keyword.control.trycatch.js, source.js meta.group.braces.curly.js keyword.control.loop.js, keyword.control.switch.js#f1a5ab
keyword.operator.assignment#ffe2a9
keyword.operator.logical.js#ffe2a9
keyword.operator.comparison.js, keyword.operator.relational.js#f1a5ab
string.quoted, string.interpolated#a9cfa4
constant.language, constant.numeric, support.constant, constant.character, constant.other.color, constant.other.symbol, constant.other.key, keyword.other.unit#91c5d3
markup.inserted#99C794
markup.deleted#E15A60
markup.changed#BB80B3
*url*, *link*, *uri*underline
constant.numeric.line-number.find-in-files - match#AB7967
entity.name.filename.find-in-files#99C794
entity.other.attribute-name.jsx, variable.parameter.function.js#91c5d3
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
source.js entity.other.attribute-name.jsitalic
text.html.basic entity.other.attribute-name.htmlitalic