Skip to main content
CodingTheme

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.activeBackground#585C66
  • editorIndentGuide.background#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, string.quoted.docstring, string.quoted.docstring punctuation.definitionLIGHT_0
stringMINT
punctuation.definition, -punctuation.definition.numeric.baseTEAL
constant.numericORANGE
constant.languageREDitalic
constant.character, constant.otherPURPLE
variable.memberRED
keyword, keyword.operator.word, keyword.operator.newPURPLE
keyword.operatorCORAL
punctuation.separator, punctuation.terminatorLIGHT_0
punctuation.sectionLIGHT_1
punctuation.accessorLIGHT_0
punctuation.definition.annotationTEAL
variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.jsTEAL
storageRED
storage.typePURPLEitalic
entity.name.functionTEAL
entity.name, -entity.name.section, -entity.name.tag, -entity.name.labelORANGE
entity.other.inherited-classTEALitalic underline
variable.parameterORANGE
variable.languageREDitalic
entity.name.tagRED
entity.other.attribute-namePURPLE
variable.function, variable.annotation, meta.function-call.genericBLUE
support.function, support.macroBLUEitalic
support.constantPURPLEitalic
support.type, support.classBLUE
invalidRED
invalid.deprecatedORANGE
entity.name.tag.yamlTEAL
source.yaml string.unquotedLIGHT_1
markup.headingbold
markup.heading punctuation.definition.headingCORAL
markup.heading.1 punctuation.definition.headingRED
string.other.link, markup.underline.linkBLUE
markup.boldbold
markup.italicitalic
markup.underlineunderline
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.underline markup.bold, markup.bold markup.underlinebold underline
markup.underline markup.italic, markup.italic markup.underlineitalic underline
markup.bold markup.italic markup.underline, markup.bold markup.underline markup.italic, markup.italic markup.bold markup.underline, markup.italic markup.underline markup.bold, markup.underline markup.bold markup.italic, markup.underline markup.italic markup.boldbold italic underline
punctuation.definition.thematic-break, meta.separator.markdownORANGE
markup.list.numbered.bullet, markup.list.numbered punctuation.definition.list.begin.markdownMINT
markup.quote punctuation.definition.blockquote, markup.list punctuation.definition.list_item, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdownORANGE
markup.inline.raw, fenced_code.block.language.markdownPURPLE
text punctuation.definition.italic, text punctuation.definition.boldPURPLE
meta.diff, meta.diff.headerPURPLE
markup.deletedRED
markup.insertedMINT
markup.changedORANGE
support.type.property-nameLIGHT_1
constant.numeric.line-number.matchRED
message.errorRED
meta.object-literal.keyBLUE
log.errorREDbold
log.infoMINTbold
log.debugBLUEbold
log.warningORANGEbold

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...