Skip to main content
Coding Theme

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#ff5c69
  • activityBar.background#131415
  • activityBar.border#2e3033
  • activityBar.foreground#f6f4f4
  • activityBar.inactiveForeground#4e5256
  • activityBarBadge.background#eb4755
  • activityBarBadge.foreground#f6f4f4
  • badge.background#eb4755
  • badge.foreground#f6f4f4
  • breadcrumb.activeSelectionForeground#ff5c69
  • breadcrumb.focusForeground#f6f4f4
  • breadcrumb.foreground#666b70
  • breadcrumbPicker.background#1b1c1d
  • button.background#eb4755
  • button.foreground#f6f4f4
  • button.hoverBackground#ff5c69
  • button.secondaryBackground#292b2e
  • button.secondaryForeground#f6f4f4
  • button.secondaryHoverBackground#333638
  • commandCenter.activeBackground#1f2123
  • commandCenter.activeForeground#f6f4f4
  • commandCenter.background#181a1b
  • commandCenter.border#2e3033
  • commandCenter.foreground#c2a3a6
  • debugConsole.errorForeground#eb4755
  • debugConsole.infoForeground#30cde8
  • debugConsole.warningForeground#ffb833
  • debugIcon.breakpointForeground#eb4755
  • debugIcon.pauseForeground#ffc966
  • debugIcon.restartForeground#9ecc7b
  • debugIcon.startForeground#9ecc7b
  • debugIcon.stepIntoForeground#30cde8
  • debugIcon.stepOutForeground#30cde8
  • debugIcon.stepOverForeground#30cde8
  • debugIcon.stopForeground#eb4755
  • debugToolBar.background#1b1c1d
  • descriptionForeground#666b70
  • diffEditor.diagonalFill#2e3033
  • diffEditor.insertedLineBackground#9ecc7b10
  • diffEditor.insertedTextBackground#9ecc7b18
  • diffEditor.removedLineBackground#eb475510
  • diffEditor.removedTextBackground#eb475518
  • dropdown.background#1f2123
  • dropdown.border#333638
  • dropdown.foreground#f6f4f4
  • editor.background#131415
  • editor.findMatchBackground#ffb83340
  • editor.findMatchBorder#ffb83380
  • editor.findMatchHighlightBackground#ffb83325
  • editor.foreground#f6f4f4
  • editor.hoverHighlightBackground#24262840
  • editor.inactiveSelectionBackground#8a0f1925
  • editor.lineHighlightBackground#1f212380
  • editor.linkedEditingBackground#ff5c6920
  • editor.rangeHighlightBackground#24262840
  • editor.selectionBackground#8a0f1950
  • editor.selectionHighlightBackground#8a0f1930
  • editor.wordHighlightBackground#3ebbb930
  • editor.wordHighlightStrongBackground#3ebbb945
  • editorBracketHighlight.foreground1#ff5c69
  • editorBracketHighlight.foreground2#ffc966
  • editorBracketHighlight.foreground3#47ebe8
  • editorBracketHighlight.foreground4#30cde8
  • editorBracketHighlight.foreground5#f9d086
  • editorBracketHighlight.foreground6#9ecc7b
  • editorBracketMatch.background#d6d6ff20
  • editorBracketMatch.border#d6d6ff60
  • editorCursor.foreground#ff5c69
  • editorError.foreground#eb4755
  • editorGroup.border#2e3033
  • editorGroup.dropBackground#ff5c6920
  • editorGroupHeader.tabsBackground#181a1b
  • editorGutter.addedBackground#9ecc7b
  • editorGutter.deletedBackground#eb4755
  • editorGutter.modifiedBackground#30cde8
  • editorHint.foreground#4cc2c0
  • editorHoverWidget.background#1b1c1d
  • editorHoverWidget.border#2e3033
  • editorIndentGuide.activeBackground#4e5256
  • editorIndentGuide.background#2e3033
  • editorInfo.foreground#30cde8
  • editorLineNumber.activeForeground#90dad9
  • editorLineNumber.foreground#4e5256
  • editorOverviewRuler.border#2e3033
  • editorOverviewRuler.errorForeground#eb4755
  • editorOverviewRuler.infoForeground#30cde8
  • editorOverviewRuler.warningForeground#ffb833
  • editorRuler.foreground#2e3033
  • editorSuggestWidget.background#1b1c1d
  • editorSuggestWidget.border#2e3033
  • editorSuggestWidget.focusHighlightForeground#ff5c69
  • editorSuggestWidget.foreground#f6f4f4
  • editorSuggestWidget.highlightForeground#ff5c69
  • editorSuggestWidget.selectedBackground#292b2e
  • editorWarning.foreground#ffb833
  • editorWhitespace.foreground#2e303380
  • editorWidget.background#1b1c1d
  • editorWidget.border#2e3033
  • editorWidget.foreground#f6f4f4
  • errorForeground#eb4755
  • focusBorder#ff5c6960
  • foreground#f6f4f4
  • gitDecoration.addedResourceForeground#9ecc7b
  • gitDecoration.conflictingResourceForeground#f9d086
  • gitDecoration.deletedResourceForeground#eb4755
  • gitDecoration.ignoredResourceForeground#4e5256
  • gitDecoration.modifiedResourceForeground#30cde8
  • gitDecoration.stageDeletedResourceForeground#eb4755
  • gitDecoration.stageModifiedResourceForeground#f9d086
  • gitDecoration.untrackedResourceForeground#9ecc7b
  • icon.foreground#90dad9
  • input.background#1f2123
  • input.border#333638
  • input.foreground#f6f4f4
  • input.placeholderForeground#52575b
  • inputOption.activeBackground#ff5c6930
  • inputOption.activeBorder#ff5c69
  • inputOption.activeForeground#f6f4f4
  • inputValidation.errorBackground#8a0f19
  • inputValidation.errorBorder#eb4755
  • inputValidation.infoBackground#149fb8
  • inputValidation.infoBorder#30cde8
  • inputValidation.warningBackground#333333
  • inputValidation.warningBorder#ffb833
  • keybindingLabel.background#292b2e
  • keybindingLabel.border#383b3e
  • keybindingLabel.bottomBorder#333638
  • keybindingLabel.foreground#f6f4f4
  • list.activeSelectionBackground#292b2e
  • list.activeSelectionForeground#f6f4f4
  • list.errorForeground#eb4755
  • list.focusBackground#292b2e
  • list.focusForeground#f6f4f4
  • list.highlightForeground#eb4755
  • list.hoverBackground#1f2123
  • list.hoverForeground#f6f4f4
  • list.inactiveSelectionBackground#242628
  • list.inactiveSelectionForeground#f6f4f4
  • list.warningForeground#f9d086
  • merge.currentContentBackground#9ecc7b20
  • merge.currentHeaderBackground#9ecc7b40
  • merge.incomingContentBackground#30cde820
  • merge.incomingHeaderBackground#30cde840
  • minimap.errorHighlight#eb4755
  • minimap.findMatchHighlight#ffb83360
  • minimap.selectionHighlight#8a0f1950
  • minimap.warningHighlight#ffb833
  • minimapGutter.addedBackground#9ecc7b
  • minimapGutter.deletedBackground#eb4755
  • minimapGutter.modifiedBackground#30cde8
  • notificationCenter.border#2e3033
  • notificationCenterHeader.background#1b1c1d
  • notificationCenterHeader.foreground#f6f4f4
  • notifications.background#1b1c1d
  • notifications.border#2e3033
  • notifications.foreground#f6f4f4
  • notificationsErrorIcon.foreground#eb4755
  • notificationsInfoIcon.foreground#30cde8
  • notificationsWarningIcon.foreground#ffb833
  • panel.background#181a1b
  • panel.border#2e3033
  • panelTitle.activeBorder#ff5c69
  • panelTitle.activeForeground#f6f4f4
  • panelTitle.inactiveForeground#666b70
  • peekView.border#ff5c69
  • peekViewEditor.background#1b1c1d
  • peekViewEditor.matchHighlightBackground#ffb83340
  • peekViewResult.background#181a1b
  • peekViewResult.fileForeground#f6f4f4
  • peekViewResult.lineForeground#c2a3a6
  • peekViewResult.matchHighlightBackground#ffb83340
  • peekViewResult.selectionBackground#292b2e
  • peekViewResult.selectionForeground#f6f4f4
  • peekViewTitle.background#131415
  • peekViewTitleDescription.foreground#666b70
  • peekViewTitleLabel.foreground#f6f4f4
  • progressBar.background#ff5c69
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#4e5256
  • scrollbarSlider.background#383b3e60
  • scrollbarSlider.hoverBackground#3d404380
  • selection.background#8a0f1950
  • settings.focusedRowBackground#1f2123
  • settings.headerForeground#f6f4f4
  • settings.modifiedItemIndicator#ff5c69
  • sideBar.background#101213
  • sideBar.border#2e3033
  • sideBar.foreground#c2a3a6
  • sideBarSectionHeader.background#1b1c1d
  • sideBarSectionHeader.foreground#f6f4f4
  • sideBarTitle.foreground#f6f4f4
  • statusBar.background#131415
  • statusBar.border#2e3033
  • statusBar.debuggingBackground#8a0f19
  • statusBar.debuggingForeground#f6f4f4
  • statusBar.foreground#90dad9
  • statusBar.noFolderBackground#1b1c1d
  • statusBarItem.hoverBackground#292b2e
  • statusBarItem.remoteBackground#05c7c4
  • statusBarItem.remoteForeground#131415
  • tab.activeBackground#131415
  • tab.activeBorderTop#eb4755
  • tab.activeForeground#f6f4f4
  • tab.border#181a1b
  • tab.hoverBackground#1f2123
  • tab.inactiveBackground#181a1b
  • tab.inactiveForeground#666b70
  • terminal.ansiBlack#1b1c1d
  • terminal.ansiBlue#30cde8
  • terminal.ansiBrightBlack#666b70
  • terminal.ansiBrightBlue#8ce3f2
  • terminal.ansiBrightCyan#90dad9
  • terminal.ansiBrightGreen#c5d6c2
  • terminal.ansiBrightMagenta#f76e79
  • terminal.ansiBrightRed#ff6673
  • terminal.ansiBrightWhite#f8f8f1
  • terminal.ansiBrightYellow#fada9e
  • terminal.ansiCyan#47ebe8
  • terminal.ansiGreen#9ecc7b
  • terminal.ansiMagenta#ff5c69
  • terminal.ansiRed#eb4755
  • terminal.ansiWhite#f6f4f4
  • terminal.ansiYellow#ffc966
  • terminal.background#131415
  • terminal.foreground#f6f4f4
  • terminalCursor.foreground#ff5c69
  • textLink.activeForeground#8ce3f2
  • textLink.foreground#30cde8
  • textPreformat.foreground#ffc966
  • titleBar.activeBackground#131415
  • titleBar.activeForeground#f6f4f4
  • titleBar.border#2e3033
  • titleBar.inactiveBackground#131415
  • titleBar.inactiveForeground#666b70
  • tree.indentGuidesStroke#333638
  • walkThrough.embeddedEditorBackground#181a1b
  • welcomePage.progress.foreground#ff5c69
  • welcomePage.tileBackground#181a1b
  • welcomePage.tileBorder#2e3033
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#656b61italic
comment.block.documentation, comment.block.javadoc#97a38fitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof, keyword.operator.in, keyword.operator.of, storage.type, storage.modifier#ff5c69
keyword.operator, keyword.operator.assignment#ed5e6a
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.relational, keyword.operator.logical, keyword.operator.ternary, keyword.operator.spread, keyword.operator.rest#d98c93
string, string.quoted, string.template#f6f4f4
punctuation.definition.template-expression, punctuation.section.embedded#ff5c69
constant.numeric#ffab66
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant#d9d0D6
variable, variable.other#f6f4f4
variable.parameter, meta.parameters#c2a3a6
variable.other.property, variable.other.object.property, meta.object-literal.key, support.type.property-name.json#90dad9
entity.name.function, meta.function-call entity.name.function#47ebe8
support.function, entity.name.function.member#4cc2c0
meta.method-call entity.name.function, entity.name.function.method#3ebbb9
entity.name.type, entity.name.class, support.class, support.type, entity.name.type.class#30cde8
entity.name.type.interface, entity.name.type.alias, entity.name.type.enum#6ee3f7
entity.name.type.parameter#8ce3f2
support.type.primitive, keyword.type, storage.type.primitive, storage.type.built-in#8ce3f2
entity.other.inherited-class#90dad9
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#f9d086italic
entity.name.tag, punctuation.definition.tag, support.class.component#ff6673
entity.other.attribute-name, entity.other.attribute-name.html#ffc966italic
support.class.component.tsx, support.class.component.jsx#30cde8
support.type.property-name.css, support.type.vendored.property-name.css#90dad9
support.constant.property-value.css, support.constant.color.css#ffc966
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#47ebe8
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#3ebbb9
keyword.other.unit.css#ffab66
string.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp#9ecc7b
constant.character.escape, constant.other.placeholder#ffab66
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.separator.comma, punctuation.terminator.statement#666b70
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default#ff5c69
variable.other.readwrite.alias, meta.import variable.other.readwrite#90dad9
entity.name.type.module, entity.name.type.namespace#a3c2c1
support.type.property-name.json, punctuation.support.type.property-name.json#90dad9
entity.name.tag.yaml#90dad9
markup.heading, heading.1.markdown entity.name, heading.2.markdown entity.name, heading.3.markdown entity.name#ff5c69bold
markup.bold#ffab66bold
markup.italic#f9d086italic
markup.underline.link, string.other.link#30cde8
markup.inline.raw, markup.fenced_code.block#9ecc7b
punctuation.definition.list.begin.markdown#ff5c69
markup.quote.markdown#97a38fitalic
markup.inserted#9ecc7b
markup.deleted#eb4755
markup.changed#30cde8
variable.language.this, variable.language.self, variable.language.super#f76e79italic
storage.type.function.arrow#ed5e6a
meta.object-binding-pattern-variable variable.object.property, meta.array-binding-pattern-variable#f6f4f4
variable.other.enummember, constant.other.enum#f9d086
support.variable, support.class.builtin#4cc2c0
variable.other.normal.shell, punctuation.definition.variable.shell#90dad9
support.function.builtin.shell#47ebe8
keyword.other.DML.sql, keyword.other.DDL.sql#ff5c69
invalid.illegal#f6f4f4
invalid.deprecated#f5a3aastrikethrough
Killer Dark by Austin Billings - VS Code Theme