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#4A90FF
  • activityBar.background#050A14
  • activityBar.border#141f31
  • activityBar.foreground#E0F0FF
  • activityBar.inactiveForeground#B7D9FF
  • activityBarBadge.background#4A90FF
  • activityBarBadge.foreground#000000
  • badge.background#4A90FF
  • badge.foreground#000000
  • button.background#4A90FF
  • button.border#00000000
  • button.foreground#000000
  • button.hoverBackground#7AB4FF
  • button.secondaryBackground#2E3642
  • button.secondaryForeground#e7eaee
  • button.secondaryHoverBackground#4A5361
  • button.separator#E0F0FF
  • descriptionForeground#B7D9FF
  • diffEditor.insertedTextBackground#5ed1a126
  • diffEditor.removedTextBackground#f5496626
  • disabledForeground#e0f0ff66
  • dropdown.background#050A14
  • dropdown.border#141f31
  • dropdown.foreground#E0F0FF
  • dropdown.listBackground#0B111B
  • editor.background#0B111B
  • editor.findMatchBackground#7b5e25
  • editor.findMatchHighlightBackground#1d2f59
  • editor.foreground#E0F0FF
  • editor.inactiveSelectionBackground#1b3154
  • editor.lineHighlightBackground#2d3033
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#1a3259
  • editor.selectionHighlightBackground#213d6b
  • editor.stackFrameHighlightBackground#3d2f12
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightStrongBackground#00000000
  • editorBracketHighlight.foreground1#bbd8ff
  • editorBracketHighlight.foreground2#bbd8ff
  • editorBracketHighlight.foreground3#bbd8ff
  • editorBracketHighlight.foreground4#bbd8ff
  • editorBracketHighlight.foreground5#bbd8ff
  • editorBracketHighlight.foreground6#bbd8ff
  • editorBracketMatch.background#213d6b
  • editorBracketMatch.border#376abb
  • editorCursor.foreground#4A90FF
  • editorError.border#00000000
  • editorError.foreground#F54966
  • editorGroup.border#141f31
  • editorGroup.dropBackground#4a90ff33
  • editorGroupHeader.border#1d2c46
  • editorGroupHeader.noTabsBackground#050A14
  • editorGroupHeader.tabsBackground#050A14
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#5ED1A1
  • editorGutter.deletedBackground#F54966
  • editorGutter.modifiedBackground#F5BC49
  • editorHoverWidget.background#050A14
  • editorHoverWidget.border#141f31
  • editorIndentGuide.activeBackground#747d85
  • editorIndentGuide.background#383c40
  • editorInlayHint.background#050A14
  • editorInlayHint.foreground#E0F0FF
  • editorLineNumber.activeForeground#E0F0FF
  • editorLineNumber.foreground#707880
  • editorLink.activeForeground#4A90FF
  • editorSuggestWidget.background#050A14
  • editorSuggestWidget.border#141f31
  • editorSuggestWidget.foreground#E0F0FF
  • editorSuggestWidget.highlightForeground#4A90FF
  • editorSuggestWidget.selectedBackground#1a3259
  • editorWarning.border#00000000
  • editorWarning.foreground#F5BC49
  • editorWhitespace.foreground#e0f0ff66
  • editorWidget.background#050A14
  • editorWidget.border#141f31
  • errorForeground#F54966
  • focusBorder#4A90FF
  • foreground#E0F0FF
  • gitDecoration.conflictingResourceForeground#FA7087
  • gitDecoration.deletedResourceForeground#F54966
  • gitDecoration.ignoredResourceForeground#B7D9FF
  • gitDecoration.modifiedResourceForeground#F5BC49
  • gitDecoration.submoduleResourceForeground#5486ff
  • gitDecoration.untrackedResourceForeground#5C9AED
  • icon.foreground#E0F0FF
  • input.background#0B111B
  • input.border#141f31
  • input.foreground#E0F0FF
  • input.placeholderForeground#e0f0ffb3
  • inputOption.activeBackground#e0f0ff21
  • inputOption.activeBorder#4A90FF
  • inputOption.activeForeground#E0F0FF
  • inputOption.hoverBackground#e0f0ff1a
  • inputValidation.errorBackground#f5496640
  • inputValidation.errorBorder#F54966
  • inputValidation.infoBackground#5da6ff40
  • inputValidation.infoBorder#5DA6FF
  • inputValidation.warningBackground#f5bc4940
  • inputValidation.warningBorder#F5BC49
  • keybindingLabel.background#050A14
  • keybindingLabel.border#2E3642
  • keybindingLabel.bottomBorder#4A5361
  • keybindingLabel.foreground#B7D9FF
  • list.activeSelectionBackground#e0f0ff21
  • list.activeSelectionForeground#E0F0FF
  • list.activeSelectionIconForeground#E0F0FF
  • list.dropBackground#4a90ff33
  • list.errorForeground#F54966
  • list.focusBackground#e0f0ff21
  • list.focusForeground#E0F0FF
  • list.highlightForeground#4A90FF
  • list.hoverBackground#e0f0ff1a
  • list.hoverForeground#E0F0FF
  • list.inactiveSelectionBackground#e0f0ff21
  • list.inactiveSelectionForeground#E0F0FF
  • list.invalidItemForeground#F54966
  • menu.separatorBackground#141f31
  • minimap.background#0B111B
  • minimapSlider.activeBackground#4a90ff8c
  • minimapSlider.background#4a90ff40
  • minimapSlider.hoverBackground#4a90ff66
  • notificationCenter.border#141f31
  • notificationCenterHeader.background#0B111B
  • notificationCenterHeader.foreground#E0F0FF
  • notifications.background#050A14
  • notifications.border#141f31
  • notifications.foreground#E0F0FF
  • notificationToast.border#1d2c46
  • panel.background#050A14
  • panel.border#141f31
  • panelTitle.activeBorder#4A90FF
  • panelTitle.activeForeground#E0F0FF
  • panelTitle.inactiveForeground#B7D9FF
  • peekView.border#1d2c46
  • peekViewEditor.background#050A14
  • peekViewEditor.matchHighlightBackground#213d6b
  • peekViewResult.background#050A14
  • peekViewResult.fileForeground#E0F0FF
  • peekViewResult.lineForeground#B7D9FF
  • peekViewResult.matchHighlightBackground#213d6b
  • peekViewResult.selectionBackground#e0f0ff21
  • peekViewTitle.background#050A14
  • peekViewTitleDescription.foreground#B7D9FF
  • peekViewTitleLabel.foreground#E0F0FF
  • pickerGroup.border#1d2c46
  • pickerGroup.foreground#4A90FF
  • progressBar.background#4A90FF
  • quickInput.background#050A14
  • quickInput.foreground#E0F0FF
  • scrollbar.background#0B111B
  • scrollbar.shadow#0B111B
  • scrollbarSlider.activeBackground#e0f0ff66
  • scrollbarSlider.background#e0f0ff26
  • scrollbarSlider.hoverBackground#e0f0ff40
  • selection.background#1a3259
  • settings.headerForeground#E0F0FF
  • settings.modifiedItemIndicator#F5BC49
  • sideBar.background#050A14
  • sideBar.border#141f31
  • sideBar.dropBackground#4a90ff33
  • sideBar.foreground#E0F0FF
  • sideBarSectionHeader.background#050A14
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#E0F0FF
  • sideBarTitle.foreground#E0F0FF
  • statusBar.background#050A14
  • statusBar.border#141f31
  • statusBar.debuggingBackground#F5BC49
  • statusBar.debuggingForeground#241802
  • statusBar.foreground#E0F0FF
  • statusBarItem.activeBackground#e0f0ff21
  • statusBarItem.hoverBackground#e0f0ff1a
  • statusBarItem.remoteBackground#4A90FF
  • statusBarItem.remoteForeground#000000
  • statusBarItem.remoteHoverBackground#7AB4FF
  • tab.activeBackground#0B111B
  • tab.activeBorderTop#4A90FF
  • tab.activeForeground#E0F0FF
  • tab.border#00000000
  • tab.inactiveBackground#050A14
  • tab.inactiveForeground#B7D9FF
  • terminal.ansiBlack#0B111B
  • terminal.ansiBlue#5DA6FF
  • terminal.ansiBrightBlack#4368a5
  • terminal.ansiBrightBlue#5C9AED
  • terminal.ansiBrightCyan#85C1FF
  • terminal.ansiBrightGreen#7EE6BA
  • terminal.ansiBrightMagenta#7AB4FF
  • terminal.ansiBrightRed#FA7087
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FACC70
  • terminal.ansiCyan#5486ff
  • terminal.ansiGreen#5ED1A1
  • terminal.ansiMagenta#4A90FF
  • terminal.ansiRed#F54966
  • terminal.ansiWhite#E0F0FF
  • terminal.ansiYellow#F5BC49
  • terminal.background#0B111B
  • terminal.foreground#E0F0FF
  • terminal.selectionBackground#1a3259
  • terminalCursor.background#4A90FF
  • terminalCursor.foreground#4A90FF
  • textLink.activeForeground#85C1FF
  • textLink.foreground#4A90FF
  • textSeparator.foreground#B7D9FF
  • titleBar.activeBackground#050A14
  • titleBar.activeForeground#E0F0FF
  • titleBar.border#141f31
  • titleBar.inactiveBackground#0B111B
  • titleBar.inactiveForeground#B7D9FF
  • toolbar.activeBackground#e0f0ff21
  • toolbar.hoverBackground#e0f0ff1a
  • toolbar.hoverOutline#4A5361
  • tree.indentGuidesStroke#383c40
  • welcomePage.progress.background#2E3642
  • welcomePage.tileBackground#050A14
  • widget.border#141f31
  • widget.shadow#0B111B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function.preprocessor#E0F0FF—
entity.other.attribute-name#7AB4FF—
constant, constant.language#4A90FF—
comment#5f6c7d—
entity.name.function#5C9AED—
keyword, storage.type, storage.modifier, storage.type.enum, storage.type.struct, storage.type.template#7AB4FF—
constant.numeric#4A90FF—
keyword.operator, entity.name.function.operator#F54966—
variable.other.property, variable.other.constant.property, support.type.property-name#5DA6FF—
entity.other.attribute-name.class.css#7AB4FF—
entity.other.attribute-name.id.css#4A90FF—
entity.other.attribute-name.pseudo-element#4A90FF—
string, constant.other.symbol#5ED1A1—
constant.character, constant.other#4A90FF—
string.regexp#7EE6BA—
entity.name.tag, meta.tag.sgml#F54966—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class, storage.type.built-in.primitive, support.type#5486ff—
entity.name.scope-resolution#73A6FF—
variable, variable.parameter.function-call#E0F0FF—
variable.language, variable.parameter.function.language.special.self.python#F54966—
variable.parameter, meta.parameter#E0F0FF—
text.html.markdown markup.inline.raw#B7D9FF—
markup.bold#7AB4FF—
punctuation.definition.bold#4A90FF—
string.other.link.title, punctuation.definition.link.title, string.other.link.description, punctuation.definition.link.description#4A90FF—
markup.underline.link, punctuation.definition.metadata#5DA6FF—
markup.heading#73A6FF—
punctuation.definition.markdown, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.accessor, punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag, meta.decorator punctuation.decorator, markup.list punctuation.definition.list.begin#bbd8ff—
punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js#85C1FF—