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#20232B
  • activityBar.border#1B1D23
  • activityBar.dropBackground#3a404e
  • activityBar.foreground#BAAFC0
  • activityBarBadge.background#00b0ff
  • activityBarBadge.foreground#20232B
  • badge.background#00b0ff
  • badge.foreground#20232B
  • button.background#00e8c5cc
  • button.hoverBackground#07d4b6cc
  • debugExceptionWidget.background#FF9F2E60
  • debugExceptionWidget.border#FF9F2E60
  • debugToolBar.background#20232A
  • diffEditor.insertedTextBackground#29BF1220
  • diffEditor.removedTextBackground#F21B3F20
  • dropdown.background#2b303b
  • dropdown.border#363c49
  • editor.background#262A33
  • editor.findMatchBackground#f39d1256
  • editor.findMatchBorder#f39d12b6
  • editor.findMatchHighlightBackground#59b8b377
  • editor.foreground#D5CED9
  • editor.hoverHighlightBackground#373941
  • editor.lineHighlightBackground#2e323d
  • editor.lineHighlightBorder#2e323d
  • editor.rangeHighlightBackground#372F3C
  • editor.selectionBackground#3D4352
  • editor.selectionHighlightBackground#4F435580
  • editor.wordHighlightBackground#4F4355
  • editor.wordHighlightStrongBackground#db45a280
  • editorBracketMatch.background#746f77
  • editorBracketMatch.border#746f77
  • editorCodeLens.foreground#746f77
  • editorCursor.foreground#FFF
  • editorError.foreground#FC644D
  • editorGroup.background#23262E
  • editorGroup.dropBackground#495061d7
  • editorGroupHeader.tabsBackground#23262E
  • editorGutter.addedBackground#9BC53DBB
  • editorGutter.deletedBackground#FC644DBB
  • editorGutter.modifiedBackground#5BC0EBBB
  • editorHoverWidget.background#373941
  • editorHoverWidget.border#00e8c5cc
  • editorIndentGuide.activeBackground1#585C66
  • editorIndentGuide.background1#333844
  • editorLineNumber.foreground#746f77
  • editorLink.activeForeground#3B79C7
  • editorOverviewRuler.border#1B1D23
  • editorRuler.foreground#4F4355
  • editorSuggestWidget.background#20232A
  • editorSuggestWidget.border#372F3C
  • editorSuggestWidget.selectedBackground#373941
  • editorWarning.foreground#FF9F2E
  • editorWhitespace.foreground#333844
  • editorWidget.background#20232A
  • errorForeground#FC644D
  • extensionButton.prominentBackground#07d4b6cc
  • extensionButton.prominentHoverBackground#07d4b5b0
  • focusBorder#746f77
  • foreground#D5CED9
  • gitDecoration.ignoredResourceForeground#555555
  • input.background#2b303b
  • input.placeholderForeground#746f77
  • inputOption.activeBorder#C668BA
  • inputValidation.errorBackground#D65343
  • inputValidation.errorBorder#D65343
  • inputValidation.infoBackground#3A6395
  • inputValidation.infoBorder#3A6395
  • inputValidation.warningBackground#DE9237
  • inputValidation.warningBorder#DE9237
  • list.activeSelectionBackground#23262E
  • list.activeSelectionForeground#00e8c6
  • list.dropBackground#3a404e
  • list.focusBackground#282b35
  • list.focusForeground#eee
  • list.hoverBackground#23262E
  • list.hoverForeground#eee
  • list.inactiveSelectionBackground#23262E
  • list.inactiveSelectionForeground#00e8c6
  • merge.currentContentBackground#F9267240
  • merge.currentHeaderBackground#F92672
  • merge.incomingContentBackground#3B79C740
  • merge.incomingHeaderBackground#3B79C7BB
  • notification.background#2d313b
  • notification.buttonBackground#00e8c5cc
  • notification.buttonHoverBackground#07d4b5b0
  • notification.errorBackground#FC644D
  • notification.infoBackground#00b0ff
  • notification.warningBackground#FF9F2E
  • panel.background#23262E
  • panel.border#1B1D23
  • panelTitle.activeBorder#23262E
  • panelTitle.inactiveForeground#746f77
  • peekView.border#23262E
  • peekViewEditor.background#1A1C22
  • peekViewEditor.matchHighlightBackground#FF9F2E60
  • peekViewResult.background#1A1C22
  • peekViewResult.matchHighlightBackground#FF9F2E60
  • peekViewResult.selectionBackground#23262E
  • peekViewTitle.background#1A1C22
  • peekViewTitleDescription.foreground#746f77
  • pickerGroup.border#4F4355
  • pickerGroup.foreground#746f77
  • progressBar.background#C668BA
  • scrollbar.shadow#23262E
  • scrollbarSlider.activeBackground#3A3F4CCC
  • scrollbarSlider.background#3A3F4C77
  • scrollbarSlider.hoverBackground#3A3F4CAA
  • selection.background#746f77
  • sideBar.background#23262E
  • sideBar.border#1B1D23
  • sideBar.foreground#999999
  • sideBarSectionHeader.background#23262E
  • sideBarTitle.foreground#00e8c6
  • statusBar.background#23262E
  • statusBar.debuggingBackground#FC644D
  • statusBar.noFolderBackground#23262E
  • statusBarItem.activeBackground#00e8c5cc
  • statusBarItem.hoverBackground#07d4b5b0
  • statusBarItem.prominentBackground#07d4b5b0
  • statusBarItem.prominentHoverBackground#00e8c5cc
  • tab.activeBackground#262A33
  • tab.activeForeground#00e8c6
  • tab.inactiveBackground#23262E
  • tab.inactiveForeground#746f77
  • terminal.ansiBlue#7cb7ff
  • terminal.ansiBrightBlue#7cb7ff
  • terminal.ansiBrightCyan#00e8c6
  • terminal.ansiBrightGreen#96E072
  • terminal.ansiBrightMagenta#ff00aa
  • terminal.ansiBrightRed#ee5d43
  • terminal.ansiBrightYellow#FFE66D
  • terminal.ansiCyan#00e8c6
  • terminal.ansiGreen#96E072
  • terminal.ansiMagenta#ff00aa
  • terminal.ansiRed#ee5d43
  • terminal.ansiYellow#FFE66D
  • terminalCursor.background#23262E
  • terminalCursor.foreground#FFE66D
  • titleBar.activeBackground#23262E
  • walkThrough.embeddedEditorBackground#23262E
  • widget.shadow#14151A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ffffff70
string#A3CE9E
punctuation.definition#5fb3b3
constant.numeric#FAB763
constant.language#FF9070italic
constant.character, constant.other#c594c5
variable.member#EE6A6F
keyword, keyword.operator.word, keyword.control, keyword.operator.new.js#c594c5
string.template.js meta.template.expression.js meta.embedded.line.js#ffffffdd
keyword.operator#FA8763
punctuation.separator, punctuation.terminator#ffffff70
punctuation.section#ffffffdd
punctuation.accessor#ffffff70
punctuation.definition.annotation#5fb3b3
variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js#5fb3b3
storage#c594c5
storage.type#c594c5
entity.name.function#5fb3b3
meta.object-literal.key.js#6699cc
entity.name#FAB763
entity.other.inherited-class#5fb3b3italic underline
variable.language#EE6A6Fitalic
entity.name.tag#FF9070
entity.other.attribute-name#c594c5
variable.function, variable.annotation#6699cc
support.function, support.macro#6699ccitalic
support.constant#c594c5italic
variable.parameter#FAB763
support.type, support.class#6699cc
invalid#ffffff70
invalid.deprecated#ffffffdd
entity.name.tag.yaml#5fb3b3
source.yaml string.unquoted#ffffffdd
markup.headingbold
markup.heading punctuation.definition.heading#EE6A6F
markup.heading.1 punctuation.definition.heading#EE6A6F
string.other.link, markup.underline.link#6699cc
markup.boldbold
markup.italicitalic
markup.italic markup.bold | markup.bold markup.italicbold italic
punctuation.definition.thematic-break#FAB763
markup.list.numbered.bullet#A3CE9E
markup.quote punctuation.definition.blockquote, markup.list punctuation.definition.list_item#FAB763
(text punctuation.definition.italic | text punctuation.definition.bold)#c594c5
meta.diff, meta.diff.header#c594c5
markup.deleted#EE6A6F
markup.inserted#A3CE9E
markup.changed#ebcb8b
support.type.property-name#ffffffdd
constant.numeric.line-number.match#EE6A6F
message.error#EE6A6F