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#282c34
  • 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#e06c75italic
constant.character, constant.other#A78CFA
variable.member#EE6A6F
variable.other,support.variable,meta.definition.variable,variable.other.object,variable.other.readwrite,entity.name.type.enum,meta.method.body,entity.name.variable,meta.block.c,meta.class-struct-block,meta.item-access.python,meta.function-call.arguments.python,meta.item-access.arguments.python,variable.parameter.keyframe-list.css,meta.property-value.css,meta.property-value.scss,entity.name.tag.custom,entity.name.function.scss,variable,meta.function-call.c,meta.parens,support.constant.color.w3c-standard-color-name,support.constant.color.w3c-extended-color-name,constant.other.color.rgb-value.hex,constant.other.rgb-value,support.constant.color.w3c-extended-color-name.css,text.tex.latex constant.other.math.tex,constant.other.general.math.tex,constant.other.general.math.tex,constant.character.math.tex,constant.other.reference.citation.latex,code-runner.output,meta.preprocessor.macro entity.name.function.preprocessor,entity.name.type.enum,entity.name.variable.tuple-element,constant.other.color.rgb-value,constant.other.color.rgb-value punctuation.definition.constant,#B0B7C3
meta.object-literal.key#B0B7C3
keyword, keyword.operator.word, keyword.control, keyword.operator.new.js#FF6AB3
string.template.js meta.template.expression.js meta.embedded.line.js#ffffffdd
keyword.operator#FF9070
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#A78CFA
storage.type#A78CFA
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#e06c75
entity.other.attribute-name#A78CFA
variable.function, variable.annotation#6699cc
support.function, support.macro#6495EEitalic
support.constant#5fb3b3italic
variable.parameter#FAB763
support.type, support.class#6495EE
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
entity.other.attribute-name.class.css#5fb3b3
support.type.property-name.css#B0B7C3
support.constant.property-value.css#FF9070
constant.numeric.line-number.match#EE6A6F
message.error#EE6A6F
meta.tag.tsx#B0B7C3