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#F5A97F
  • activityBar.activeFocusBorder#F5A97F
  • activityBar.background#18181B
  • activityBar.border#27272A
  • activityBar.foreground#D4D4D8
  • activityBar.inactiveForeground#52525B
  • activityBarBadge.background#F5A97F
  • activityBarBadge.foreground#18181B
  • badge.background#F5A97F
  • badge.foreground#18181B
  • breadcrumb.activeSelectionForeground#D4D4D8
  • breadcrumb.background#1E1E24
  • breadcrumb.focusForeground#D4D4D8
  • breadcrumb.foreground#A1A1AA
  • button.background#F5A97F
  • button.border#00000000
  • button.foreground#18181B
  • button.hoverBackground#FFB86C
  • button.secondaryBackground#27272A
  • button.secondaryForeground#D4D4D8
  • button.secondaryHoverBackground#3F3F46
  • charts.blue#89DCEB
  • charts.foreground#D4D4D8
  • charts.green#A6E3A1
  • charts.orange#F5A97F
  • charts.purple#CBA6F7
  • charts.red#F38BA8
  • charts.yellow#FFB86C
  • debugConsole.errorForeground#F38BA8
  • debugConsole.infoForeground#89DCEB
  • debugConsole.warningForeground#FFB86C
  • debugIcon.breakpointForeground#F38BA8
  • debugIcon.continueForeground#A6E3A1
  • debugIcon.startForeground#A6E3A1
  • debugIcon.stopForeground#F38BA8
  • debugToolBar.background#1E1E24
  • descriptionForeground#A1A1AA
  • diffEditor.insertedLineBackground#A6E3A115
  • diffEditor.insertedTextBackground#A6E3A115
  • diffEditor.removedLineBackground#F38BA815
  • diffEditor.removedTextBackground#F38BA815
  • disabledForeground#52525B
  • dropdown.background#1E1E24
  • dropdown.border#3F3F46
  • dropdown.foreground#D4D4D8
  • dropdown.listBackground#1E1E24
  • editor.background#1A1A20
  • editor.findMatchBackground#F5A97F40
  • editor.findMatchBorder#F5A97F
  • editor.findMatchHighlightBackground#F5A97F25
  • editor.findRangeHighlightBackground#F5A97F10
  • editor.foldBackground#F5A97F10
  • editor.foreground#D4D4D8
  • editor.hoverHighlightBackground#F5A97F15
  • editor.inactiveSelectionBackground#F5A97F15
  • editor.lineHighlightBackground#27272A60
  • editor.lineHighlightBorder#27272A00
  • editor.selectionBackground#F5A97F30
  • editor.selectionHighlightBackground#F5A97F18
  • editor.wordHighlightBackground#F5A97F18
  • editor.wordHighlightStrongBackground#F5A97F25
  • editorBracketHighlight.foreground1#F5A97F
  • editorBracketHighlight.foreground2#89DCEB
  • editorBracketHighlight.foreground3#CBA6F7
  • editorBracketHighlight.foreground4#94E2D5
  • editorBracketHighlight.foreground5#FFB86C
  • editorBracketHighlight.foreground6#F38BA8
  • editorBracketMatch.background#F5A97F20
  • editorBracketMatch.border#F5A97F80
  • editorCursor.background#1A1A20
  • editorCursor.foreground#F5A97F
  • editorGroup.border#27272A
  • editorGroupHeader.tabsBackground#18181B
  • editorGroupHeader.tabsBorder#27272A
  • editorGutter.addedBackground#A6E3A160
  • editorGutter.deletedBackground#F38BA860
  • editorGutter.modifiedBackground#F5A97F60
  • editorHoverWidget.background#1E1E24
  • editorHoverWidget.border#3F3F46
  • editorIndentGuide.activeBackground1#3F3F46
  • editorIndentGuide.background1#27272A
  • editorLineNumber.activeForeground#F5A97F
  • editorLineNumber.foreground#3F3F46
  • editorLink.activeForeground#F5A97F
  • editorStickyScroll.background#18181B
  • editorStickyScrollHover.background#1E1E24
  • editorSuggestWidget.background#1E1E24
  • editorSuggestWidget.border#3F3F46
  • editorSuggestWidget.focusHighlightForeground#F5A97F
  • editorSuggestWidget.foreground#D4D4D8
  • editorSuggestWidget.highlightForeground#F5A97F
  • editorSuggestWidget.selectedBackground#F5A97F20
  • editorWhitespace.foreground#27272A
  • editorWidget.background#1E1E24
  • editorWidget.border#3F3F46
  • editorWidget.foreground#D4D4D8
  • errorForeground#EF4444
  • focusBorder#F5A97F00
  • foreground#D4D4D8
  • gitDecoration.addedResourceForeground#A6E3A1
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#C75050
  • gitDecoration.ignoredResourceForeground#52525B
  • gitDecoration.modifiedResourceForeground#E5C07B
  • gitDecoration.renamedResourceForeground#89DCEB
  • gitDecoration.untrackedResourceForeground#A6E3A1
  • icon.foreground#A1A1AA
  • input.background#18181B
  • input.border#3F3F46
  • input.foreground#D4D4D8
  • input.placeholderForeground#52525B
  • inputOption.activeBackground#F5A97F33
  • inputOption.activeBorder#F5A97F
  • inputOption.activeForeground#D4D4D8
  • inputValidation.errorBackground#450A0A
  • inputValidation.errorBorder#F38BA8
  • inputValidation.infoBackground#18181B
  • inputValidation.infoBorder#89DCEB
  • inputValidation.warningBackground#422006
  • inputValidation.warningBorder#F5A97F
  • list.activeSelectionBackground#F5A97F20
  • list.activeSelectionForeground#D4D4D8
  • list.dropBackground#F5A97F15
  • list.errorForeground#EF4444
  • list.focusBackground#F5A97F20
  • list.focusForeground#D4D4D8
  • list.focusOutline#F5A97F80
  • list.highlightForeground#F5A97F
  • list.hoverBackground#1E1E2480
  • list.hoverForeground#D4D4D8
  • list.inactiveSelectionBackground#F5A97F15
  • list.inactiveSelectionForeground#D4D4D8
  • list.warningForeground#FFB86C
  • menu.background#1E1E24
  • menu.border#3F3F46
  • menu.foreground#D4D4D8
  • menu.selectionBackground#F5A97F20
  • menu.selectionForeground#D4D4D8
  • menu.separatorBackground#27272A
  • minimap.background#18181B
  • minimap.findMatchHighlight#F5A97F66
  • minimap.selectionHighlight#F5A97F44
  • notificationLink.foreground#F5A97F
  • notifications.background#1E1E24
  • notifications.border#3F3F46
  • notifications.foreground#D4D4D8
  • panel.background#18181B
  • panel.border#27272A
  • panelTitle.activeBorder#F5A97F
  • panelTitle.activeForeground#D4D4D8
  • panelTitle.inactiveForeground#52525B
  • peekView.border#F5A97F
  • peekViewEditor.background#18181B
  • peekViewResult.background#1E1E24
  • peekViewTitle.background#1E1E24
  • progressBar.background#F5A97F
  • quickInput.background#1E1E24
  • quickInput.foreground#D4D4D8
  • quickInputList.focusBackground#F5A97F20
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#F5A97F66
  • scrollbarSlider.background#D4D4D820
  • scrollbarSlider.hoverBackground#D4D4D840
  • selection.background#F5A97F40
  • settings.headerForeground#D4D4D8
  • settings.modifiedItemIndicator#F5A97F
  • sideBar.background#18181B
  • sideBar.border#27272A
  • sideBar.foreground#A1A1AA
  • sideBarSectionHeader.background#18181B
  • sideBarSectionHeader.border#27272A
  • sideBarSectionHeader.foreground#D4D4D8
  • sideBarTitle.foreground#D4D4D8
  • statusBar.background#18181B
  • statusBar.border#27272A
  • statusBar.debuggingBackground#F5A97F
  • statusBar.debuggingForeground#18181B
  • statusBar.foreground#A1A1AA
  • statusBar.noFolderBackground#18181B
  • statusBarItem.remoteBackground#F5A97F
  • statusBarItem.remoteForeground#18181B
  • tab.activeBackground#1E1E24
  • tab.activeBorder#1E1E24
  • tab.activeBorderTop#F5A97F
  • tab.activeForeground#D4D4D8
  • tab.border#27272A
  • tab.hoverBackground#1E1E2480
  • tab.inactiveBackground#18181B
  • tab.inactiveForeground#52525B
  • terminal.ansiBlack#18181B
  • terminal.ansiBlue#89DCEB
  • terminal.ansiBrightBlack#52525B
  • terminal.ansiBrightBlue#A0E7F3
  • terminal.ansiBrightCyan#A8F0E0
  • terminal.ansiBrightGreen#B8F0B0
  • terminal.ansiBrightMagenta#DDB8FF
  • terminal.ansiBrightRed#F5A0B8
  • terminal.ansiBrightWhite#FAFAFA
  • terminal.ansiBrightYellow#FFB86C
  • terminal.ansiCyan#94E2D5
  • terminal.ansiGreen#A6E3A1
  • terminal.ansiMagenta#CBA6F7
  • terminal.ansiRed#F38BA8
  • terminal.ansiWhite#D4D4D8
  • terminal.ansiYellow#F5A97F
  • terminal.background#18181B
  • terminal.border#27272A
  • terminal.foreground#D4D4D8
  • terminal.selectionBackground#F5A97F30
  • terminalCursor.foreground#F5A97F
  • testing.iconErrored#F38BA8
  • testing.iconFailed#F38BA8
  • testing.iconPassed#A6E3A1
  • testing.iconQueued#F5A97F
  • testing.runAction#A6E3A1
  • textBlockQuote.background#18181B
  • textBlockQuote.border#F5A97F
  • textLink.activeForeground#FFB86C
  • textLink.foreground#F5A97F
  • textPreformat.foreground#D4D4D8
  • textSeparator.foreground#27272A
  • titleBar.activeBackground#18181B
  • titleBar.activeForeground#D4D4D8
  • titleBar.border#27272A
  • titleBar.inactiveBackground#18181B
  • titleBar.inactiveForeground#52525B
  • welcomePage.tileBackground#1E1E24
  • welcomePage.tileBorder#27272A
  • welcomePage.tileHoverBackground#27272A
  • widget.border#27272A
  • widget.shadow#00000050
  • window.activeBorder#00000000
  • window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#52525Bitalic
comment.block.documentation, comment.block.javadoc, string.quoted.docstring#71717Aitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof, keyword.operator.in, keyword.operator.of#F5A97F
keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.trycatch, keyword.control.switch, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default#F5A97Fitalic
storage, storage.type, storage.modifier#F5A97F
storage.type.function, storage.type.class, storage.type.interface, storage.type.enum, storage.type.type#F5A97Fitalic
entity.name.function, meta.function-call entity.name.function, support.function, meta.function-call, meta.method-call#94E2D5
variable.parameter, meta.parameter#DDB8FFitalic
variable, variable.other, variable.other.readwrite#D4D4D8
variable.language, variable.language.this, variable.language.self, variable.language.super#FFB86Citalic
variable.other.constant, constant.other, support.constant#89B4FA
string, string.quoted, string.template, string.quoted.single, string.quoted.double, string.quoted.triple#F38BA8
string.template meta.template.expression, punctuation.definition.template-expression, punctuation.section.embedded#F5A97F
constant.character.escape#89DCEB
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#FFB86C
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#FFB86C
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, support.class, support.type#89DCEB
entity.name.type.parameter#CBA6F7
entity.other.inherited-class#89DCEBitalic
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.relational#89DCEB
storage.type.function.arrow, keyword.operator.arrow#F5A97F
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator, meta.brace, punctuation.accessor#A1A1AA
punctuation.definition.string, punctuation.definition.string.begin, punctuation.definition.string.end#F38BA8
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#FFB86Citalic
entity.name.tag, punctuation.definition.tag#F38BA8
entity.other.attribute-name#F5A97Fitalic
support.class.component#89DCEB
support.type.property-name.css#89DCEB
support.constant.property-value.css#FFB86C
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css#94E2D5
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#CBA6F7italic
support.type.property-name.json#89DCEB
string.quoted.double.json#F38BA8
markup.heading, heading.1.markdown entity.name, heading.2.markdown entity.name#F5A97Fbold
markup.bold#D4D4D8bold
markup.italic#D4D4D8italic
markup.underline.link, string.other.link#89DCEB
markup.inline.raw, markup.fenced_code, markup.raw#94E2D5
string.regexp#F38BA8
entity.name.function.decorator.python, meta.function.decorator.python#FFB86Citalic
variable.parameter.function.language.special.self.python, variable.language.special.self.python#FFB86Citalic
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust#CBA6F7italic
markup.inserted#A6E3A1
markup.deleted#F38BA8
markup.changed#F5A97F
support.function#94E2D5
support.type, support.class#89DCEB
invalid, invalid.illegal#F38BA8strikethrough
invalid.deprecated#FFB86Cstrikethrough
Midnight Ember by Waqar Ali Siyal - VS Code Theme