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.activeBackground#8b0178
  • activityBar.activeBorder#3b0835
  • activityBar.activeFocusBorder#630056
  • activityBar.background#630056
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#d1d1d1
  • activityBarBadge.background#d660c7
  • activityBarTop.activeBackground#3b0835
  • activityBarTop.activeBorder#fda2f1
  • activityBarTop.background#333
  • activityBarTop.inactiveForeground#f6e7f4
  • badge.background#ff89ef44
  • badge.foreground#90007d
  • button.background#ffd4f6
  • button.border#ffd4f6
  • button.foreground#cd04b2
  • button.hoverBackground#fdc3f1
  • button.secondaryBackground#cd04b2
  • button.secondaryForeground#fff
  • button.secondaryHoverBackground#cd04b2
  • debugConsoleInputIcon.foreground#fda2f1
  • debugExceptionWidget.background#1c212b
  • debugExceptionWidget.border#171b24
  • debugIcon.breakpointDisabledForeground#f29e7480
  • debugIcon.breakpointForeground#f29e74
  • debugToolBar.background#1c212b
  • descriptionForeground#707a8c
  • diffEditor.diagonalFill#fda2f1
  • diffEditor.insertedTextBackground#87d96c1f
  • diffEditor.removedTextBackground#f279831f
  • disabledForeground#999
  • dropdown.background#fff
  • dropdown.border#ffc7f8
  • dropdown.foreground#cd04b2
  • editor.background#f8f4f4
  • editor.findMatchBackground#695380
  • editor.findMatchBorder#695380
  • editor.findMatchHighlightBackground#69538066
  • editor.findMatchHighlightBorder#5c467266
  • editor.findRangeHighlightBackground#69538040
  • editor.foreground#90007d
  • editor.inactiveSelectionBackground#409fff21
  • editor.lineHighlightBackground#63005612
  • editor.rangeHighlightBackground#69538033
  • editor.selectionBackground#409fff40
  • editor.selectionHighlightBackground#87d96c26
  • editor.selectionHighlightBorder#87d96c00
  • editor.snippetTabstopHighlightBackground#87d96c33
  • editor.wordHighlightBackground#80bfff14
  • editor.wordHighlightBorder#80bfff80
  • editor.wordHighlightStrongBackground#87d96c14
  • editor.wordHighlightStrongBorder#87d96c80
  • editorBracketMatch.background#8a91994d
  • editorBracketMatch.border#8a91994d
  • editorCodeLens.foreground#b8cfe680
  • editorCursor.foreground#ff66ab
  • editorError.foreground#ff6666
  • editorGroup.border#ffffff
  • editorGroupHeader.noTabsBackground#ffeafa
  • editorGroupHeader.tabsBackground#ffeafa
  • editorGroupHeader.tabsBorder#ffffff
  • editorGutter.addedBackground#87d96ccc
  • editorGutter.deletedBackground#f27983cc
  • editorGutter.modifiedBackground#80bfffcc
  • editorHoverWidget.background#fff0fd
  • editorHoverWidget.border#fff0fd
  • editorIndentGuide.activeBackground1#8a919959
  • editorIndentGuide.background1#8a91992e
  • editorLineNumber.activeForeground#8a9199cc
  • 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.modifiedForeground#80bfff
  • editorOverviewRuler.warningForeground#ba9a5b
  • editorOverviewRuler.wordHighlightForeground#80bfff66
  • editorOverviewRuler.wordHighlightStrongForeground#87d96c66
  • editorRuler.foreground#8a91992e
  • editorSuggestWidget.background#fff0fd
  • editorSuggestWidget.border#fff0fd
  • editorSuggestWidget.highlightForeground#fda2f1
  • editorSuggestWidget.selectedBackground#63759926
  • editorWarning.foreground#ffd88b
  • editorWhitespace.foreground#8a919966
  • editorWidget.background#fff0fd
  • editorWidget.border#fff0fd
  • errorForeground#ff6666
  • extensionButton.background#ff89ef44
  • extensionButton.foreground#cd04b2
  • extensionButton.hoverBackground#ff89ef6a
  • focusBorder#fda2f15d
  • foreground#630056
  • gitDecoration.deletedResourceForeground#dc0416
  • gitDecoration.ignoredResourceForeground#a5a5a5
  • gitDecoration.modifiedResourceForeground#0056ac
  • gitDecoration.renamedResourceForeground#00bd5e
  • gitDecoration.submoduleResourceForeground#aa5bfa
  • gitDecoration.untrackedResourceForeground#c400aa
  • icon.foreground#630056
  • input.background#fff
  • input.border#af0298
  • input.foreground#90007d
  • input.placeholderForeground#af0298
  • 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#fda0f1
  • keybindingLabel.border#cccac21a
  • keybindingLabel.bottomBorder#cccac21a
  • keybindingLabel.foreground#4d0042
  • list.activeSelectionBackground#fedcfa
  • list.activeSelectionForeground#90007d
  • list.deemphasizedForeground#ff6666
  • list.errorForeground#ff7d7d
  • list.filterMatchBackground#5c467266
  • list.filterMatchBorder#69538066
  • list.focusBackground#eeddeb1a
  • list.focusForeground#ff89efc7
  • list.focusOutline#ff89ef1a
  • list.highlightForeground#ff89ef
  • list.hoverBackground#ff89ef0e
  • list.inactiveSelectionBackground#fedcfa
  • list.inactiveSelectionForeground#90007d
  • list.inactiveSelectionIconForeground#111
  • list.warningForeground#630056
  • listFilterWidget.background#90007d
  • listFilterWidget.noMatchesOutline#ff6666
  • listFilterWidget.outline#ff89ef
  • menu.background#fff0fd
  • menu.foreground#630056
  • menu.separatorBackground#630056
  • menubar.selectionBackground#630056
  • minimap.background#242936
  • minimap.errorHighlight#ff6666
  • minimap.selectionHighlight#409fff40
  • minimapGutter.addedBackground#87d96c
  • minimapGutter.deletedBackground#f27983
  • minimapGutter.modifiedBackground#80bfff
  • panel.background#fedcfa
  • panel.border#fda0f1
  • panelTitle.activeBorder#4d0042
  • panelTitle.activeForeground#4d0042
  • panelTitle.inactiveForeground#4d0042
  • 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#90007d
  • scrollbar.shadow#63759926
  • scrollbarSlider.activeBackground#fda2f191
  • scrollbarSlider.background#fda2f191
  • scrollbarSlider.hoverBackground#fda2f1d8
  • selection.background#409fff40
  • settings.headerForeground#cccac2
  • settings.modifiedItemIndicator#80bfff
  • sideBar.background#fff0fd
  • sideBar.border#fcd5f3
  • sideBarSectionHeader.background#ffeafa
  • sideBarSectionHeader.border#90007d
  • sideBarSectionHeader.foreground#90007d
  • sideBarTitle.foreground#90007d
  • statusBar.background#3b0835
  • statusBar.debuggingBackground#f29e74
  • statusBar.debuggingForeground#242936
  • statusBar.foreground#ffdefb
  • statusBar.noFolderBackground#1c212b
  • statusBarItem.activeBackground#707a8c33
  • statusBarItem.hoverBackground#707a8c33
  • statusBarItem.prominentBackground#171b24
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#3b0835
  • statusBarItem.remoteForeground#fda2f1
  • tab.activeBackground#ffdef7
  • tab.activeBorder#ffffff
  • tab.activeBorderTop#ffffff
  • tab.activeForeground#b3009b
  • tab.border#ffffff
  • tab.hoverBackground#fff0fd
  • tab.inactiveBackground#fff0fd
  • tab.inactiveForeground#630056
  • tab.unfocusedActiveBorderTop#707a8c
  • tab.unfocusedActiveForeground#630056
  • tab.unfocusedInactiveForeground#630056
  • terminal.ansiBlack#2a3243
  • 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#fda2f1
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#87d96c
  • terminal.ansiMagenta#dabafa
  • terminal.ansiRed#ed8274
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#facc6e
  • terminal.background#fdebfb
  • terminal.foreground#797979
  • textBlockQuote.background#630056
  • textLink.activeForeground#ff89ef
  • textLink.foreground#cd04b2
  • textPreformat.foreground#ff89ef
  • titleBar.activeBackground#43003a
  • titleBar.activeForeground#ffdefb
  • titleBar.border#630056
  • titleBar.inactiveBackground#43003a
  • titleBar.inactiveForeground#ffdefb
  • toolbar.hoverBackground#fde0f7
  • tree.indentGuidesStroke#8a919959
  • walkThrough.embeddedEditorBackground#1c212b
  • welcomePage.progress.background#1a1f29
  • welcomePage.tileBackground#1f2430
  • widget.shadow#c2cbe1b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#000000
texto#383838
comment#a5a5a5italic
string, constant.other.symbol#ff008c
string.regexp, constant.character, constant.other#00a558
constant.numeric#e46f01
constant.language#e46f01
variable., variable.other.readwrite#0032bd
variable.member#f28779
variable.language#5ccfe6italic
storage#ff0040
keyword#ff0040
keyword.operator#0088a3
punctuation.separator, punctuation.terminator#630056
punctuation.section#630056
punctuation.accessor#0070d8
punctuation.definition.template-expression#b6009e
punctuation.section.embedded#b6009e
meta.embedded#ff7700
source.java storage.type, source.haskell storage.type, source.c storage.type#73d0ff
entity.other.inherited-class#6fe0f9
storage.type.function#c300d4
source.java storage.type.primitive#5ccfe6
entity.name.function#008547
variable.parameter, meta.parameter#006a78
variable.function, variable.annotation, meta.function-call.generic, support.function.go#00703c
support.function, support.macro#ff6b57
entity.name.import, entity.name.package#829b4f
entity.name#73d0ff
support.class.component#cd04b2
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#3b3b3b
entity.name.tag, meta.tag.sgml#3b3b3b
entity.other.attribute-name#0088a3
support.constant#f9013fitalic
support.type, support.class, source.go storage.type#f9013f
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#ef8c00
invalid#ff7272
meta.diff, meta.diff.header#e46f01
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#0072dd
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#0072dd
support.type.property-name#cd04b2
constant.numeric.line-number.find-in-files - match#cd04b2
constant.numeric.line-number.match#ffad66
entity.name.filename.find-in-files#aaff00
message.error#ff5b5b
markup.heading, markup.heading entity.name#00a558bold
markup.underline.link, string.other.link#5ccfe6
markup.italic#f28779italic
markup.bold#f28779bold
markup.italic markup.bold, markup.bold markup.italicbold italic
meta.separator#00a558bold
markup.quote#95e6cbitalic
markup.list punctuation.definition.list.begin#0072dd
markup.inserted#87d96c
markup.changed#80bfff
markup.deleted#f27983
markup.strike#d660c7
markup.table#5ccfe6
text.html.markdown markup.inline.raw#0072dd
text.html.markdown meta.dummy.line-break#b8cfe680
punctuation.definition.markdown#b8cfe680
punctuation.definition.block#d660c7