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#FF329608
  • activityBar.activeBorder#c3c0ff
  • activityBar.background#0e0e13
  • activityBar.border#0e0e13
  • activityBar.foreground#BB78FFB0
  • activityBar.inactiveForeground#bfc7cd43
  • activityBarBadge.background#fa3986
  • activityBarBadge.foreground#EFF4F6
  • button.background#c00069
  • button.border#07070b00
  • button.foreground#EFF4F6
  • button.hoverBackground#fa3986
  • button.secondaryBackground#3E4875
  • button.secondaryForeground#EFF4F6
  • button.secondaryHoverBackground#656AAB
  • debugToolBar.background#242938
  • dropdown.background#232530
  • dropdown.listBackground#121418
  • editor.background#121418
  • editor.findMatchBackground#ff8296c0
  • editor.findMatchBorder#ff8296c0
  • editor.findMatchHighlightBackground#5a354fc0
  • editor.findMatchHighlightBorder#623532c0
  • editor.findRangeHighlightBackground#2e2f3950
  • editor.foreground#EFF4F6
  • editor.hoverHighlightBackground#6C6E8420
  • editor.inactiveSelectionBackground#27487360
  • editor.lineHighlightBackground#0a0c12
  • editor.lineHighlightBorder#14161e00
  • editor.selectionBackground#2f366eb3
  • editor.selectionHighlightBackground#6f618860
  • editor.wordHighlightBackground#527df280
  • editor.wordHighlightStrongBackground#846dfe80
  • editorBracketHighlight.foreground1#8Cd7FF
  • editorBracketHighlight.foreground2#FFC769
  • editorBracketHighlight.foreground3#FF7DF1
  • editorBracketHighlight.unexpectedBracket.foreground#de6067
  • editorBracketMatch.background#0e458340
  • editorBracketMatch.border#d7d9dc40
  • editorCodeLens.foreground#898b9b
  • editorCursor.foreground#ffd790
  • editorGroup.border#07070b
  • editorGroupHeader.noTabsBackground#121418
  • editorGroupHeader.tabsBackground#121418
  • editorGutter.foldingControlForeground#f74343
  • editorIndentGuide.activeBackground#33323b
  • editorIndentGuide.background#212029
  • editorLineNumber.activeForeground#b7b6dd
  • editorLineNumber.foreground#b7b6dd48
  • editorLink.activeForeground#72c4ff
  • editorMarkerNavigation.background#121418
  • editorMarkerNavigationError.background#de6067
  • editorMarkerNavigationError.headerBackground#de60671a
  • editorMarkerNavigationInfo.background#61badd
  • editorMarkerNavigationInfo.headerBackground#61badd1a
  • editorMarkerNavigationWarning.background#e7a552
  • editorMarkerNavigationWarning.headerBackground#e7a5521a
  • editorOverviewRuler.background#01000860
  • editorOverviewRuler.border#18182200
  • editorOverviewRuler.errorForeground#de6067
  • editorOverviewRuler.infoForeground#61badd
  • editorOverviewRuler.warningForeground#e7a552
  • editorRuler.foreground#33323b
  • editorSuggestWidget.focusHighlightForeground#ffe376
  • editorSuggestWidget.foreground#EFF4F6
  • editorSuggestWidget.highlightForeground#ffe376
  • editorSuggestWidget.selectedBackground#22233D
  • editorSuggestWidget.selectedForeground#EFF4F6
  • editorSuggestWidget.selectedIconForeground#c3c0ff
  • editorWhitespace.foreground#e8ecff29
  • editorWidget.background#1d1f27
  • editorWidget.border#fa3986b0
  • editorWidget.resizeBorder#fa3986b0
  • focusBorder#3565cc80
  • foreground#EFF4F6
  • gitDecoration.modifiedResourceForeground#ffb98c
  • gitDecoration.untrackedResourceForeground#8fc697
  • input.background#252730
  • input.border#f2f8f720
  • input.foreground#f2f8f7
  • input.placeholderForeground#B2B6C4
  • inputOption.activeBackground#527df280
  • inputOption.activeBorder#527df280
  • inputOption.activeForeground#f2f8f7
  • inputOption.hoverBackground#f2f8f71a
  • inputValidation.errorBorder#de606780
  • inputValidation.infoBorder#61badd80
  • inputValidation.warningBorder#e7a55280
  • keybindingTable.headerBackground#0e0e13
  • keybindingTable.rowsBackground#0e0e1380
  • list.activeSelectionBackground#242E67
  • list.activeSelectionForeground#f2f8f7
  • list.activeSelectionIconForeground#f2f8f7
  • list.dropBackground#141E3378
  • list.focusBackground#09327140
  • list.focusForeground#f2f8f7
  • list.focusHighlightForeground#ffe376e0
  • list.focusOutline#2D4A99
  • list.highlightForeground#ffe376e0
  • list.hoverBackground#02010458
  • list.hoverForeground#f2f8f7
  • list.inactiveFocusBackground#09327140
  • list.inactiveFocusOutline#18182200
  • list.inactiveSelectionBackground#20327180
  • list.inactiveSelectionForeground#f2f8f7
  • menu.background#1d1f27
  • menu.border#0e0e13
  • menu.foreground#EFF4F6e8
  • menu.selectionBackground#20327180
  • menu.selectionBorder#2D4A99
  • menu.selectionForeground#f2f8f7
  • menu.separatorBackground#0e0e13
  • menubar.selectionBackground#f2f8f71a
  • menubar.selectionBorder#f2f8f700
  • menubar.selectionForeground#f2f8f7
  • notebook.cellBorderColor#0e0e1300
  • notebook.cellEditorBackground#121418
  • notebook.cellHoverBackground#0e0e13
  • notebook.cellInsertionIndicator#c3c0ff
  • notebook.cellStatusBarItemHoverBackground#12141800
  • notebook.cellToolbarSeparator#12141800
  • notebook.editorBackground#0e0e13
  • notebook.focusedCellBackground#141E3300
  • notebook.focusedCellBorder#c3c0ffb0
  • notebook.focusedEditorBorder#0e0e1300
  • notebook.inactiveFocusedCellBorder#c3c0ff00
  • notebook.inactiveSelectedCellBorder#0e0e1300
  • notebook.outputContainerBackgroundColor#07070b
  • notebook.outputContainerBorderColor#07070b
  • notebook.selectedCellBackground#0e0e1300
  • notebook.selectedCellBorder#0e0e1300
  • notebook.symbolHighlightBackground#0e0e1300
  • notebookStatusErrorIcon.foreground#de6067
  • notebookStatusRunningIcon.foreground#61badd
  • notebookStatusSuccessIcon.foreground#7ba378
  • notificationsErrorIcon.foreground#de6067
  • notificationsInfoIcon.foreground#61badd
  • notificationsWarningIcon.foreground#e7a552
  • panel.background#121418
  • panel.border#0e0e13
  • panelSectionHeader.background#3e383f46
  • panelSectionHeader.foreground#D5D6DB
  • panelTitle.activeBorder#AF9CDBB0
  • panelTitle.activeForeground#CCA8FF
  • panelTitle.inactiveForeground#988692
  • peekView.border#0c0c0fc0
  • peekViewEditor.background#11141d
  • peekViewEditor.matchHighlightBackground#ff8296c0
  • peekViewEditor.matchHighlightBorder#ff8296c0
  • peekViewResult.background#0e0e13
  • peekViewResult.selectionBackground#3399ff33
  • peekViewTitle.background#0e0e13
  • pickerGroup.foreground#fa3986
  • problemsErrorIcon.foreground#de6067
  • problemsInfoIcon.foreground#61badd
  • problemsWarningIcon.foreground#e7a552
  • progressBar.background#fa398680
  • sash.hoverBorder#c3c0ff80
  • scrollbar.shadow#050407
  • selection.background#384083
  • settings.dropdownBackground#232530
  • settings.dropdownBorder#232530
  • settings.dropdownListBorder#121418
  • settings.modifiedItemIndicator#fa3986
  • sideBar.background#0e0e13
  • sideBar.border#0e0e13
  • sideBar.foreground#babfd9
  • sideBarSectionHeader.background#3e383f26
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#D5D6DB
  • sideBarTitle.foreground#C9CBD6
  • statusBar.background#0e0e13
  • statusBar.border#23253000
  • statusBar.debuggingBackground#e60054
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#D5D6DB90
  • statusBar.noFolderBackground#a524ff
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.hoverBackground#c3c0ff20
  • statusBarItem.hoverForeground#D5D6DB
  • statusBarItem.remoteBackground#f39759
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorder#c3c0ff
  • tab.activeBorderTop#c3c0ff00
  • tab.activeForeground#EFF4F6
  • tab.border#121418
  • tab.hoverBorder#c3c0ff
  • tab.inactiveBackground#121418
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#5B6DFF
  • terminal.ansiBrightBlack#848484
  • terminal.ansiBrightBlue#a8bcff
  • terminal.ansiBrightCyan#9cf6ff
  • terminal.ansiBrightGreen#bee2bc
  • terminal.ansiBrightMagenta#fb98ec
  • terminal.ansiBrightRed#f99fa8
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe376
  • terminal.ansiCyan#61badd
  • terminal.ansiGreen#7ba378
  • terminal.ansiMagenta#bda5e6
  • terminal.ansiRed#de6067
  • terminal.ansiWhite#cfd3d6
  • terminal.ansiYellow#e7a552
  • terminal.foreground#cfd3d6
  • terminal.inactiveSelectionBackground#2a4e7c40
  • terminalCommandDecoration.errorBackground#de6067
  • terminalCommandDecoration.successBackground#61badd
  • terminalCursor.background#000000
  • terminalCursor.foreground#ffd790
  • testing.iconErrored#de6067
  • testing.iconFailed#de6067
  • testing.iconPassed#7ba378
  • testing.iconQueued#e7a552
  • testing.iconSkipped#848484
  • testing.iconUnset#848484
  • testing.message.error.decorationForeground#de6067
  • testing.peekBorder#de6067
  • testing.peekHeaderBackground#de60671a
  • testing.runAction#7ba378
  • textBlockQuote.background#1d1f2700
  • textBlockQuote.border#fa3986b0
  • textLink.activeForeground#72c4ff
  • textLink.foreground#6ca4ff
  • textPreformat.foreground#ffba6a
  • titleBar.activeBackground#0e0e13
  • titleBar.activeForeground#D5D6DB
  • titleBar.border#0e0e13
  • titleBar.inactiveBackground#0e0e13
  • titleBar.inactiveForeground#D5D6DB90
  • tree.indentGuidesStroke#BABECC60
  • widget.border#00000000
  • widget.shadow#0c0c0fc0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#8d8da7
variable, string constant.other.placeholder, entity.name.variable, entity.other.attribute-name.id#EFF4F6
constant.other.php#EFF4F6
constant.other.color#EFF4F6
invalid, invalid.illegal#ff4080
invalid.deprecated#a4a8cc
keyword, storage.type, storage.modifier#bda5e6
punctuation.definition.template-expression, punctuation.section.embedded, punctuation.separator.pointer-access.cpp, punctuation.separator.inheritance.php, punctuation.tilde, punctuation.definition.keyword#bda5e6
punctuation.squarebracket-attribute, punctuation.definition.annotation, punctuation.definition.directive#bda5e6
punctuation, meta.brace.round#8Cd7FF
punctuation.section.class, punctuation.section.property-list#FFC769
punctuation.bracket.square, punctuation.squarebracket, punctuation.definition.end.bracket.square, punctuation.definition.begin.bracket.square, punctuation.definition.list, punctuation.definition.array, meta.brace.square#8Cd7FF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ffba6a
entity.name.function, entity.name.function.call.cpp, entity.name.function.preprocessor, variable.function, support.other.function, support.function, keyword.other.special-method, entity.name.function.invocation, meta.function-call.generic#a8bcff
source.cpp meta.block variable.other#EFF4F6
constant.numeric, constant.language, constant.other, support.constant, contant.language.NULL.cpp, support.constant.property-value, support.constant.font-name, support.constant.color#d4aeff
entity.name.variable.parameter, variable.parameter.function.language.special, variable.parameter#ffa184
constant.character, constant.character.escape, constant.escape, support.other.escape#d1d1ff
string, entity.other.inherited-class, markup.inserted.git_gutter, punctuation.definition.constant.css, constant.other.color.rgb-value, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.embedded.assembly, string.other.link.description.title.markdown#b0bfde
punctuation.definition.string#A4B2CF
constant.other.symbol, constant.other.key#ffa184
markup.heading#ffba6abold
entity.name.type, entity.name.class, variable.other.object#DCDAFF
entity.other.inherited-class#DCDAFFunderline
storage.modifier.import.java, entity.name.namespace, support.type, support.class, support.variable, support.other, support.other.namespace.use.php, support.other.namespace.php#DCDAFF
entity.name.scope-resolution#DCDAFF
entity.name.type.type-parameter, storage.type.java, variable.other.object.java, storage.type.generic.java, storage.type.object.array.java#DCDAFF
storage.type.numeric, keyword.other.unit#DCDAFF
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#D2C4FF
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ffa184
variable.language#AAAAFF
entity.name.method.js, meta.class-method.js entity.name.function.js, variable.function.constructor#a8bcff
punctuation.terminator#bda5e6
punctuation.definition.directive, entity.name.function.decorator, punctuation.definition.decorator, punctuation.definition.storage.type.objcpp, punctuation.definition.block.tag.jsdoc#bda5e6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.pseudo-class punctuation.definition.entity#bda5e6
support.type.property-name#eaa6ff
meta.object-literal.key, entity.name.type.hcl, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.field.declaration.ts variable.object.property, variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property, entity.name.variable.field, variable.other.object.property, variable.other.constant.property#D2C4FF
variable.other.local#bad6ff
entity.name.tag, entity.name.tag.css#d4aeff
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#AAAAFF
entity.other.attribute-name#D2C4FF
entity.other.attribute-name.class#DCDAFF
entity.tag.tagbraces#EFF4F6
source.sass keyword.control#a8bcff
string.regexp#d1d1ff
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#a8bcff
source.js constant.other.object.key.js string.unquoted.label.js#ffa184
source.json meta.structure.dictionary.json support.type.property-name.json#eaa6ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eaa6ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eaa6ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eaa6ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eaa6ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eaa6ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eaa6ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eaa6ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eaa6ff
text.html, text.log#EFF4F6
meta.paragraph.markdown, punctuation.definition.list_item.markdown#8d8da7
text.html.markdown markup.inline.raw.markdown#EFF4F6
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#DCDAFF
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ffba6a
markup.italic#DCDAFF
markup.bold, markup.bold string#DCDAFFbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#DCDAFFbold
markup.underline#AAAAFFunderline
markup.strikethrough#DCDAFFstrikethrough
markup.quote punctuation.definition.blockquote.markdown#ffba6a
string.other.link.title.markdown, string.other.link#a8bcff
constant.other.reference.link.markdown#d4aeff
markup.raw.block#EFF4F6
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#EFF4F6
variable.language.fenced.markdown#DCDAFF
meta.separator#ffba6a
markup.table#8d8da7
source.cpp meta.block variable.other, support.other.variable#EFF4F6
storage.type.primitive.java, storage.type.primitive.array.java, storage.type.built-in, keyword.type, storage.cpp#AAAAFF
meta.declaration.annotation#bda5e6
variable.other.enummember, constant.other.enum#AAAAFF
entity.name.type.namespace, meta.preprocessor, meta.body.function.definition#EFF4F6
keyword.operator.assignment#8Cd7FF
punctuation.separator, punctuation.definition.entity, punctuation.accessor, punctuation.separator.scope-resolution#8Cd7FF
keyword.operator, keyword.other.operator.overload, meta.head.function.definition.special.operator-overload#bda5e6