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#090b0f
  • activityBar.border#090b0f
  • 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#0f1118
  • editor.background#0f1118
  • 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#0f1118
  • editorGroupHeader.tabsBackground#0f1118
  • editorGutter.foldingControlForeground#f74343
  • editorIndentGuide.activeBackground#33323b
  • editorIndentGuide.background#212029
  • editorLineNumber.activeForeground#b7b6dd
  • editorLineNumber.foreground#b7b6dd48
  • editorLink.activeForeground#72c4ff
  • editorMarkerNavigation.background#0f1118
  • 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#161926
  • 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#090b0f
  • keybindingTable.rowsBackground#090b0f80
  • 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#161926
  • menu.border#090b0f
  • menu.foreground#EFF4F6e8
  • menu.selectionBackground#20327180
  • menu.selectionBorder#2D4A99
  • menu.selectionForeground#f2f8f7
  • menu.separatorBackground#090b0f
  • menubar.selectionBackground#f2f8f71a
  • menubar.selectionBorder#f2f8f700
  • menubar.selectionForeground#f2f8f7
  • notebook.cellBorderColor#090b0f00
  • notebook.cellEditorBackground#0f1118
  • notebook.cellHoverBackground#090b0f
  • notebook.cellInsertionIndicator#c3c0ff
  • notebook.cellStatusBarItemHoverBackground#0f111800
  • notebook.cellToolbarSeparator#0f111800
  • notebook.editorBackground#090b0f
  • notebook.focusedCellBackground#141E3300
  • notebook.focusedCellBorder#c3c0ffb0
  • notebook.focusedEditorBorder#090b0f00
  • notebook.inactiveFocusedCellBorder#c3c0ff00
  • notebook.inactiveSelectedCellBorder#090b0f00
  • notebook.outputContainerBackgroundColor#07070b
  • notebook.outputContainerBorderColor#07070b
  • notebook.selectedCellBackground#090b0f00
  • notebook.selectedCellBorder#090b0f00
  • notebook.symbolHighlightBackground#090b0f00
  • notebookStatusErrorIcon.foreground#de6067
  • notebookStatusRunningIcon.foreground#61badd
  • notebookStatusSuccessIcon.foreground#7ba378
  • notificationsErrorIcon.foreground#de6067
  • notificationsInfoIcon.foreground#61badd
  • notificationsWarningIcon.foreground#e7a552
  • panel.background#0f1118
  • panel.border#090b0f
  • 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#090b0f
  • peekViewResult.selectionBackground#3399ff33
  • peekViewTitle.background#090b0f
  • 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#0f1118
  • settings.modifiedItemIndicator#fa3986
  • sideBar.background#090b0f
  • sideBar.border#090b0f
  • sideBar.foreground#babfd9
  • sideBarSectionHeader.background#3e383f26
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#D5D6DB
  • sideBarTitle.foreground#C9CBD6
  • statusBar.background#090b0f
  • 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#0f1118
  • tab.hoverBorder#c3c0ff
  • tab.inactiveBackground#0f1118
  • 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#16192600
  • textBlockQuote.border#fa3986b0
  • textLink.activeForeground#72c4ff
  • textLink.foreground#6ca4ff
  • textPreformat.foreground#ffba6a
  • titleBar.activeBackground#090b0f
  • titleBar.activeForeground#D5D6DB
  • titleBar.border#090b0f
  • titleBar.inactiveBackground#090b0f
  • 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#DCDAFFitalic underline
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