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.activeBorder#ffcc66
  • activityBar.background#242936
  • activityBar.border#171b24
  • activityBar.foreground#959595
  • activityBar.inactiveForeground#707a8c99
  • activityBarBadge.background#ffcc66
  • activityBarBadge.foreground#805500
  • badge.background#ffcc6633
  • badge.foreground#ffcc66
  • bookmarks.lineBackground#0505053a
  • bookmarks.lineBorder#1480fbd4
  • button.background#ffcc66
  • button.foreground#805500
  • button.hoverBackground#fac761
  • button.secondaryBackground#707a8c33
  • button.secondaryForeground#cccac2
  • button.secondaryHoverBackground#707a8c80
  • debugConsoleInputIcon.foreground#ffcc66
  • debugExceptionWidget.background#1c212b
  • debugExceptionWidget.border#171b24
  • debugIcon.breakpointDisabledForeground#f29e7480
  • debugIcon.breakpointForeground#ff0303
  • debugToolBar.background#1c212b
  • descriptionForeground#707a8c
  • diffEditor.diagonalFill#171b24
  • diffEditor.insertedTextBackground#87d96c1f
  • diffEditor.removedTextBackground#f279831f
  • dropdown.background#242936
  • dropdown.border#707a8c45
  • dropdown.foreground#707a8c
  • editor.background#242936
  • editor.findMatchBackground#000000d0
  • editor.findMatchBorder#f9f9f9
  • editor.findMatchHighlightBackground#8c8c8c59
  • editor.findMatchHighlightBorder#f9f9f965
  • editor.findRangeHighlightBackground#69538040
  • editor.foreground#cccac2
  • editor.inactiveSelectionBackground#00000092
  • editor.lineHighlightBackground#1a1f29
  • editor.rangeHighlightBackground#69538033
  • editor.selectionBackground#409fff40
  • editor.selectionHighlightBackground#ff4c162e
  • editor.selectionHighlightBorder#f5f5f547
  • editor.snippetTabstopHighlightBackground#87d96c33
  • editor.wordHighlightBackground#00000026
  • editor.wordHighlightBorder#ebb11333
  • editor.wordHighlightStrongBackground#87d96c14
  • editor.wordHighlightStrongBorder#87d96c80
  • editorBracketMatch.background#0c0c0c00
  • editorBracketMatch.border#ffee03d7
  • editorCodeLens.foreground#b8cfe680
  • editorCursor.foreground#ffffff
  • editorError.background#e80c0874
  • editorError.foreground#ff6666
  • editorGroup.border#0b0d12
  • editorGroupHeader.noTabsBackground#1f2430
  • editorGroupHeader.tabsBackground#1f2430
  • editorGroupHeader.tabsBorder#171b2462
  • editorGutter.addedBackground#87d96ccc
  • editorGutter.deletedBackground#f27983cc
  • editorGutter.modifiedBackground#80bfffcc
  • editorHoverWidget.background#1f2430
  • editorHoverWidget.border#171b24
  • editorIndentGuide.activeBackground1#ccff00
  • editorIndentGuide.background1#8a91992e
  • editorLineNumber.activeForeground#e7e7e7f1
  • editorLineNumber.foreground#8a919966
  • editorLink.activeForeground#ffcc66
  • editorMarkerNavigation.background#1c212b
  • editorOverviewRuler.addedForeground#87d96c
  • editorOverviewRuler.border#171b24
  • editorOverviewRuler.bracketMatchForeground#8a9199b3
  • editorOverviewRuler.deletedForeground#f27983
  • editorOverviewRuler.errorForeground#ff6666
  • editorOverviewRuler.findMatchForeground#695380a6
  • editorOverviewRuler.modifiedForeground#80bfff
  • editorOverviewRuler.warningForeground#ffcc66
  • editorOverviewRuler.wordHighlightForeground#80bfff66
  • editorOverviewRuler.wordHighlightStrongForeground#87d96c66
  • editorRuler.foreground#8a91992e
  • editorStickyScroll.background#1a1f29
  • editorSuggestWidget.background#1c212b
  • editorSuggestWidget.border#171b24
  • editorSuggestWidget.highlightForeground#ffcc66
  • editorSuggestWidget.selectedBackground#63759926
  • editorWarning.foreground#ffcc66
  • editorWhitespace.foreground#dfd9d99a
  • editorWidget.background#1f2430
  • editorWidget.border#171b24
  • errorForeground#ff6666
  • extensionButton.prominentBackground#ffcc66
  • extensionButton.prominentForeground#805500
  • extensionButton.prominentHoverBackground#fac761
  • focusBorder#ffcc66b3
  • foreground#707a8c
  • gitDecoration.conflictingResourceForeground#dfbfffb3
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#707a8c80
  • gitDecoration.modifiedResourceForeground#80bfffb3
  • gitDecoration.submoduleResourceForeground#dfbfff00
  • gitDecoration.untrackedResourceForeground#87d96cb3
  • icon.foreground#707a8c
  • input.background#242936
  • input.border#707a8c45
  • input.foreground#cccac2
  • input.placeholderForeground#707a8c80
  • inputOption.activeBackground#ffcc6633
  • inputOption.activeBorder#ffcc664d
  • inputOption.activeForeground#ffcc66
  • inputValidation.errorBackground#242936
  • inputValidation.errorBorder#ff6666
  • inputValidation.infoBackground#1f2430
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.warningBackground#1f2430
  • inputValidation.warningBorder#ffd173
  • keybindingLabel.background#707a8c1a
  • keybindingLabel.border#cccac21a
  • keybindingLabel.bottomBorder#cccac21a
  • keybindingLabel.foreground#cccac2
  • list.activeSelectionBackground#63759926
  • list.activeSelectionForeground#f9f9f9
  • list.deemphasizedForeground#ff6666
  • list.errorForeground#ff6666
  • list.filterMatchBackground#5c467266
  • list.filterMatchBorder#69538066
  • list.focusAndSelectionOutline#999797
  • list.focusBackground#63759926
  • list.focusForeground#cccac2
  • list.focusOutline#a0a0a0
  • list.highlightForeground#ffcc66
  • list.hoverBackground#63759926
  • list.inactiveFocusOutline#a0a0a0
  • list.inactiveSelectionBackground#69758c1f
  • list.inactiveSelectionForeground#707a8c
  • list.invalidItemForeground#707a8c4d
  • listFilterWidget.background#1c212b
  • listFilterWidget.noMatchesOutline#ff6666
  • listFilterWidget.outline#ffcc66
  • minimap.background#242936
  • minimap.errorHighlight#ff6666
  • minimap.findMatchHighlight#695380a7
  • minimap.selectionHighlight#409fff40
  • minimapGutter.addedBackground#87d96c
  • minimapGutter.deletedBackground#f27983
  • minimapGutter.modifiedBackground#80bfff
  • minimapSlider.activeBackground#4e5aa96a
  • minimapSlider.hoverBackground#b3b6c745
  • panel.background#1f2430
  • panel.border#171b24
  • panelTitle.activeBorder#ffcc66
  • panelTitle.activeForeground#cccac2
  • panelTitle.inactiveForeground#707a8c
  • peekView.border#63759926
  • peekViewEditor.background#1f2430
  • peekViewEditor.matchHighlightBackground#69538066
  • peekViewEditor.matchHighlightBorder#5c467266
  • peekViewResult.background#1f2430
  • peekViewResult.fileForeground#cccac2
  • peekViewResult.lineForeground#707a8c
  • peekViewResult.matchHighlightBackground#69538066
  • peekViewResult.selectionBackground#63759926
  • peekViewTitle.background#63759926
  • peekViewTitleDescription.foreground#707a8c
  • peekViewTitleLabel.foreground#cccac2
  • pickerGroup.border#171b24
  • pickerGroup.foreground#707a8c80
  • progressBar.background#ffcc66c1
  • scrollbar.shadow#171b2400
  • scrollbarSlider.activeBackground#707a8cb3
  • scrollbarSlider.background#707a8c66
  • scrollbarSlider.hoverBackground#707a8c99
  • selection.background#409fff40
  • settings.headerForeground#cccac2
  • settings.modifiedItemIndicator#80bfff
  • sideBar.background#1f2430
  • sideBar.border#0b0d12
  • sideBarSectionHeader.background#1f2430
  • sideBarSectionHeader.border#171b24
  • sideBarSectionHeader.foreground#707a8c
  • sideBarTitle.foreground#707a8c
  • statusBar.background#1f2430
  • statusBar.border#171b24
  • statusBar.debuggingBackground#f29e74
  • statusBar.debuggingForeground#242936
  • statusBar.foreground#707a8c
  • statusBar.noFolderBackground#1c212b
  • statusBarItem.activeBackground#707a8c33
  • statusBarItem.hoverBackground#707a8c33
  • statusBarItem.prominentBackground#171b24
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#ffcc66
  • statusBarItem.remoteForeground#805500
  • tab.activeBackground#242936
  • tab.activeBorder#00000000
  • tab.activeBorderTop#fff124
  • tab.activeForeground#ffffff
  • tab.border#43423b
  • tab.inactiveBackground#1f2430
  • tab.inactiveForeground#707a8c
  • tab.unfocusedActiveBorderTop#707a8c
  • tab.unfocusedActiveForeground#d6d2d2
  • tab.unfocusedInactiveForeground#707a8c
  • terminal.ansiBlack#171b24
  • terminal.ansiBlue#6dcbfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#73d0ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#d5ff80
  • terminal.ansiBrightMagenta#dfbfff
  • terminal.ansiBrightRed#f28779
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd173
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#87d96c
  • terminal.ansiMagenta#dabafa
  • terminal.ansiRed#ed8274
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#facc6e
  • terminal.background#1f2430
  • terminal.border#3a2901
  • terminal.foreground#cccac2
  • textBlockQuote.background#1c212b
  • textLink.activeForeground#ffcc66
  • textLink.foreground#ffcc66
  • textPreformat.foreground#cccac2
  • titleBar.activeBackground#1f2430
  • titleBar.activeForeground#cccac2
  • titleBar.border#171b24
  • titleBar.inactiveBackground#1f2430
  • titleBar.inactiveForeground#707a8c
  • tree.inactiveIndentGuidesStroke#474747
  • tree.indentGuidesStroke#e9e7e7
  • walkThrough.embeddedEditorBackground#1c212b
  • welcomePage.progress.background#1a1f29
  • welcomePage.tileBackground#1f2430
  • widget.shadow#12151cb3
  • window.activeBorder#cfc104

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#cccac2
comment#b8cfe680italic
string, constant.other.symbol#d5ff80e4
string.regexp, constant.character, constant.other#95e6cb
constant.numeric#dfbfff
constant.language#dfbfff
variable, variable.parameter.function-call#cccac2
variable.member#f28779
variable.language#5ccfe6italic
storage#ffad66
keyword#ffad66
keyword.operator#f29e74
punctuation.separator, punctuation.terminator#cccac2b3
punctuation.section#cccac2
punctuation.accessor#f29e74
punctuation.definition.template-expression#ffad66
punctuation.section.embedded#ffad66
meta.embedded#cccac2
source.java storage.type, source.haskell storage.type, source.c storage.type#73d0ff
entity.other.inherited-class#5ccfe6
storage.type.function#ffad66
source.java storage.type.primitive#5ccfe6
entity.name.function#ffd173
variable.parameter, meta.parameter#dfbfff
variable.function, variable.annotation, meta.function-call.generic, support.function.go#ffd173
support.function, support.macro#f28779
entity.name.import, entity.name.package#d5ff80
entity.name#73d0ff
entity.name.tag, meta.tag.sgml#5cd6eed5
support.class.component#73d0ff
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#c1f7f0
entity.other.attribute-name#ffd173
support.constant#f29e74italic
support.type, support.class, source.go storage.type#5ccfe6
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#ffdfb3
invalid#ff6666
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#ffd173
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#73d0ff
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#b8cfe680
support.type.property-name#5ccfe6
constant.numeric.line-number.find-in-files - match#b8cfe680
constant.numeric.line-number.match#ffad66
entity.name.filename.find-in-files#d5ff80
message.error#ff6666
markup.heading, markup.heading entity.name#d5ff80bold
markup.underline.link, string.other.link#5ccfe6
markup.italic#f28779italic
markup.bold#f28779bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#b8cfe680bold
markup.quote#95e6cbitalic
markup.list punctuation.definition.list.begin#ffd173
markup.inserted#87d96c
markup.changed#80bfff
markup.deleted#f27983
markup.strike#ffdfb3
markup.table#5ccfe6
text.html.markdown markup.inline.raw#f29e74
text.html.markdown meta.dummy.line-break#b8cfe680
punctuation.definition.markdown#b8cfe680
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#c1f7f0
punctuation.tag.liquid, punctuation.definition.tag, punctuation.definition.tag.begin.liquid, punctuation.definition.tag.end.liquid, punctuation.output.liquid, source.liquid#fff706cd
keyword.other.dot.liquid#fff706b9
keyword.operator.equality.liquid, keyword.operator.assignment.augmented.liquid#fff706b9
punctuation.output.liquid, source.liquid#61afef
support.variable.liquid, variable.parameter.liquid, string.other.property-value.liquid#7af8ecec
constant.numeric.property-value.liquid, constant.numeric.liquid#7ad0f8italic
constant.language.object-value.liquid#7af8ececitalic
constant.language.liquid, constant.numeric.float.liquid#49bdcd
support.class.object.liquid, support.class.object-value.liquid, support.class.object-value.liquid, variable.other.liquid#f9f9f0
entity.name.tag.conditional.liquid, keyword.operator.logical.liquid, entity.name.tag.control.liquid, keyword.operator.liquid, entity.name.tag.iteration.liquid, entity.name.tag.method.liquid#ffabfe
entity.name.tag.variable.liquid#ffabfeitalic
entity.name.tag.liquid#fda8fc
entity.name.tag.other.liquid#f4c1f3
support.function.filter.liquid, keyword.separator.pipe.liquid, keyword.operator.assignment.colon.liquid, support.function.without-args.liquid#E06C75
constant.character.entity.named.nbsp.htmlitalic underline
entity.name.tag.css#FFD173bold
variable.scss#d9fbebf1
keyword.other.important.scss#f94c2df1
variable.parameter#ffffffe4italic
entity.name.tag.reference.scss#fada25f7
punctuation.definition.keyword.scss#efff0bf7
keyword.control.at-rule.include.scss, meta.at-rule.include.scss#f68d58
entity.name.function.js, entity.name.function#cd91f8eb
entity.name.function.member#cd91f8eb
parameter variable.parameter#e34747d1
keyword.other.debugger.js#f61606bold
constant.language.boolean.true.js.jsx, constant.language.boolean.false.js.jsx#ecca30italic underline
variable.other.property.ts#e0c883
keyword.operator.expression.delete.ts#ed6565
variable.other.property.tsx, meta.embedded.expression.tsx#a6e8e8f8
support.class.component.tsx#92fbfefaitalic