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#4fc1b6
  • activityBar.background#070a0f
  • activityBar.border#070a0f
  • activityBar.foreground#4fc1b6
  • activityBar.inactiveForeground#3a4555
  • activityBarBadge.background#4fc1b6
  • activityBarBadge.foreground#070a0f
  • badge.background#4fc1b6
  • badge.foreground#070a0f
  • breadcrumb.activeSelectionForeground#4fc1b6
  • breadcrumb.focusForeground#b4bdc9
  • breadcrumb.foreground#5a6a7a
  • breadcrumbPicker.background#0c1018
  • button.background#4fc1b6
  • button.foreground#070a0f
  • button.hoverBackground#6eddcf
  • button.secondaryBackground#1c2a3d
  • button.secondaryForeground#b4bdc9
  • button.secondaryHoverBackground#243550
  • commandCenter.activeBackground#141c28
  • commandCenter.activeForeground#b4bdc9
  • commandCenter.background#0c1018
  • commandCenter.border#141a24
  • commandCenter.foreground#8891a0
  • debugToolBar.background#0c1018
  • debugToolBar.border#141a24
  • descriptionForeground#8891a0
  • diffEditor.diagonalFill#141a24
  • diffEditor.insertedLineBackground#5ccc6a10
  • diffEditor.insertedTextBackground#5ccc6a15
  • diffEditor.removedLineBackground#e0556110
  • diffEditor.removedTextBackground#e0556115
  • dropdown.background#0c1018
  • dropdown.border#1a2030
  • dropdown.foreground#b4bdc9
  • dropdown.listBackground#0c1018
  • editor.background#0a0e14
  • editor.findMatchBackground#e6c77a30
  • editor.findMatchBorder#e6c77a60
  • editor.findMatchHighlightBackground#e6c77a15
  • editor.foldBackground#0e131b80
  • editor.foreground#b4bdc9
  • editor.hoverHighlightBackground#4fc1b610
  • editor.inactiveSelectionBackground#1c2a3d60
  • editor.lineHighlightBackground#0e131b
  • editor.lineHighlightBorder#0e131b00
  • editor.rangeHighlightBackground#0e131b80
  • editor.selectionBackground#1c2a3d
  • editor.selectionHighlightBackground#1c2a3d80
  • editor.snippetTabstopHighlightBackground#4fc1b615
  • editor.wordHighlightBackground#4fc1b615
  • editor.wordHighlightStrongBackground#4fc1b625
  • editorBracketHighlight.foreground1#4fc1b6
  • editorBracketHighlight.foreground2#9f6ad1
  • editorBracketHighlight.foreground3#e6c77a
  • editorBracketHighlight.foreground4#d97aa0
  • editorBracketHighlight.foreground5#d4956a
  • editorBracketHighlight.foreground6#5ccc6a
  • editorBracketHighlight.unexpectedBracket.foreground#e05561
  • editorBracketMatch.background#4fc1b620
  • editorBracketMatch.border#4fc1b660
  • editorCursor.foreground#4fc1b6
  • editorError.foreground#e05561
  • editorGroup.border#141a24
  • editorGroup.dropBackground#4fc1b615
  • editorGroupHeader.noTabsBackground#0a0e14
  • editorGroupHeader.tabsBackground#080b10
  • editorGroupHeader.tabsBorder#080b10
  • editorGutter.addedBackground#5ccc6a60
  • editorGutter.deletedBackground#e0556160
  • editorGutter.modifiedBackground#4fc1b660
  • editorHint.foreground#9f6ad1
  • editorHoverWidget.background#0c1018
  • editorHoverWidget.border#141a24
  • editorHoverWidget.foreground#b4bdc9
  • editorIndentGuide.activeBackground#2a3545
  • editorIndentGuide.background#1a2030
  • editorInfo.foreground#4fc1b6
  • editorLineNumber.activeForeground#5a6a7a
  • editorLineNumber.foreground#2d3a4a
  • editorLink.activeForeground#4fc1b6
  • editorOverviewRuler.border#0a0e14
  • editorRuler.foreground#1a2030
  • editorSuggestWidget.background#0c1018
  • editorSuggestWidget.border#141a24
  • editorSuggestWidget.focusHighlightForeground#4fc1b6
  • editorSuggestWidget.foreground#b4bdc9
  • editorSuggestWidget.highlightForeground#4fc1b6
  • editorSuggestWidget.selectedBackground#1c2a3d
  • editorWarning.foreground#e6c77a
  • editorWhitespace.foreground#1a2030
  • editorWidget.background#0c1018
  • editorWidget.border#141a24
  • editorWidget.foreground#b4bdc9
  • errorForeground#e05561
  • focusBorder#4fc1b630
  • foreground#b4bdc9
  • gitDecoration.addedResourceForeground#5ccc6a
  • gitDecoration.conflictingResourceForeground#d4956a
  • gitDecoration.deletedResourceForeground#e05561
  • gitDecoration.ignoredResourceForeground#3a4555
  • gitDecoration.modifiedResourceForeground#e6c77a
  • gitDecoration.renamedResourceForeground#4fc1b6
  • gitDecoration.untrackedResourceForeground#5ccc6a
  • icon.foreground#8891a0
  • input.background#0c1018
  • input.border#1a2030
  • input.foreground#b4bdc9
  • input.placeholderForeground#5a6578
  • inputOption.activeBackground#4fc1b630
  • inputOption.activeBorder#4fc1b660
  • inputOption.activeForeground#4fc1b6
  • inputValidation.errorBackground#e0556130
  • inputValidation.errorBorder#e05561
  • inputValidation.infoBackground#4fc1b630
  • inputValidation.infoBorder#4fc1b6
  • inputValidation.warningBackground#e6c77a30
  • inputValidation.warningBorder#e6c77a
  • list.activeSelectionBackground#1c2a3d
  • list.activeSelectionForeground#d4dce6
  • list.errorForeground#e05561
  • list.focusBackground#1c2a3d
  • list.focusForeground#d4dce6
  • list.highlightForeground#4fc1b6
  • list.hoverBackground#0e131b
  • list.hoverForeground#b4bdc9
  • list.inactiveSelectionBackground#141c28
  • list.inactiveSelectionForeground#b4bdc9
  • list.warningForeground#e6c77a
  • merge.currentContentBackground#5ccc6a15
  • merge.currentHeaderBackground#5ccc6a30
  • merge.incomingContentBackground#4fc1b615
  • merge.incomingHeaderBackground#4fc1b630
  • minimap.findMatchHighlight#e6c77a60
  • minimap.selectionHighlight#1c2a3d
  • minimapGutter.addedBackground#5ccc6a60
  • minimapGutter.deletedBackground#e0556160
  • minimapGutter.modifiedBackground#4fc1b660
  • minimapSlider.activeBackground#1a203080
  • minimapSlider.background#1a203040
  • minimapSlider.hoverBackground#1a203060
  • notification.background#0c1018
  • notification.foreground#b4bdc9
  • notificationCenterHeader.background#080b10
  • notificationCenterHeader.foreground#b4bdc9
  • panel.background#080b10
  • panel.border#141a24
  • panelTitle.activeBorder#4fc1b6
  • panelTitle.activeForeground#b4bdc9
  • panelTitle.inactiveForeground#5a6a7a
  • peekView.border#4fc1b660
  • peekViewEditor.background#0c1018
  • peekViewEditor.matchHighlightBackground#e6c77a30
  • peekViewResult.background#080b10
  • peekViewResult.fileForeground#b4bdc9
  • peekViewResult.lineForeground#8891a0
  • peekViewResult.matchHighlightBackground#e6c77a30
  • peekViewResult.selectionBackground#1c2a3d
  • peekViewResult.selectionForeground#d4dce6
  • peekViewTitle.background#0c1018
  • peekViewTitleDescription.foreground#8891a0
  • peekViewTitleLabel.foreground#b4bdc9
  • quickInput.background#0c1018
  • quickInput.foreground#b4bdc9
  • quickInputList.focusBackground#1c2a3d
  • quickInputList.focusForeground#d4dce6
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#3a4555a0
  • scrollbarSlider.background#1a203060
  • scrollbarSlider.hoverBackground#2a354580
  • selection.background#4fc1b640
  • settings.headerForeground#d4dce6
  • settings.modifiedItemIndicator#4fc1b6
  • sideBar.background#080b10
  • sideBar.border#080b10
  • sideBar.foreground#8891a0
  • sideBarSectionHeader.background#080b10
  • sideBarSectionHeader.foreground#b4bdc9
  • sideBarTitle.foreground#b4bdc9
  • statusBar.background#070a0f
  • statusBar.border#070a0f
  • statusBar.debuggingBackground#e6c77a
  • statusBar.debuggingForeground#070a0f
  • statusBar.foreground#5a6a7a
  • statusBar.noFolderBackground#070a0f
  • statusBar.noFolderForeground#5a6a7a
  • statusBarItem.activeBackground#1c2a3d
  • statusBarItem.hoverBackground#141c28
  • statusBarItem.prominentBackground#141c28
  • statusBarItem.prominentHoverBackground#1c2a3d
  • statusBarItem.remoteBackground#4fc1b6
  • statusBarItem.remoteForeground#070a0f
  • tab.activeBackground#0a0e14
  • tab.activeBorder#0a0e14
  • tab.activeBorderTop#4fc1b6
  • tab.activeForeground#d4dce6
  • tab.border#080b10
  • tab.hoverBackground#0a0e14
  • tab.inactiveBackground#080b10
  • tab.inactiveForeground#5a6a7a
  • tab.unfocusedActiveBackground#0a0e14
  • tab.unfocusedActiveBorderTop#4fc1b660
  • tab.unfocusedActiveForeground#8891a0
  • tab.unfocusedInactiveBackground#080b10
  • tab.unfocusedInactiveForeground#5a6578
  • terminal.ansiBlack#0a0e14
  • terminal.ansiBlue#4a90d9
  • terminal.ansiBrightBlack#5a6578
  • terminal.ansiBrightBlue#6ea8e6
  • terminal.ansiBrightCyan#7ae0d6
  • terminal.ansiBrightGreen#7ad989
  • terminal.ansiBrightMagenta#c99ae0
  • terminal.ansiBrightRed#e87a82
  • terminal.ansiBrightWhite#d4dce6
  • terminal.ansiBrightYellow#ecd590
  • terminal.ansiCyan#4fc1b6
  • terminal.ansiGreen#5ccc6a
  • terminal.ansiMagenta#9f6ad1
  • terminal.ansiRed#e05561
  • terminal.ansiWhite#b4bdc9
  • terminal.ansiYellow#e6c77a
  • terminal.background#0a0e14
  • terminal.foreground#b4bdc9
  • terminalCursor.foreground#4fc1b6
  • titleBar.activeBackground#070a0f
  • titleBar.activeForeground#8891a0
  • titleBar.border#070a0f
  • titleBar.inactiveBackground#070a0f
  • titleBar.inactiveForeground#5a6578
  • tree.indentGuidesStroke#1a2030
  • walkThrough.embeddedEditorBackground#080b10
  • welcomePage.background#0a0e14
  • welcomePage.tileBackground#0c1018
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a6578italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage, storage.type, storage.modifier#e6c77a
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.relational#8891a0
entity.name.function, meta.function-call, support.function, meta.method-call entity.name.function#4fc1b6
string, string.quoted, string.template#d97aa0
constant.character.escape#c76e91
string.template punctuation.definition, punctuation.definition.template-expression#e6c77a
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#d4956a
constant.language, support.constant#d4956aitalic
constant, constant.other#d4956a
variable, variable.other, variable.other.readwrite#b4bdc9
variable.parameter#b4bdc9
variable.language#e6c77aitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#b4bdc9
entity.name.type, entity.name.class, entity.name.namespace, support.type, support.class, entity.other.inherited-class#9f6ad1
meta.type.annotation, meta.return.type#9f6ad1
entity.name.type.interface#9f6ad1
entity.name.type.enum#9f6ad1
meta.decorator, meta.decorator entity.name.function#e6c77aitalic
entity.name.tag, meta.tag#e6c77a
entity.other.attribute-name#4fc1b6italic
support.class.component, entity.name.tag support.class.component#9f6ad1
punctuation, meta.brace, punctuation.definition.block, punctuation.definition.parameters, punctuation.separator, punctuation.terminator#8891a0
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#e6c77a
string.regexp#4fc1b6
markup.heading, entity.name.section#4fc1b6bold
markup.bold#e6c77abold
markup.italic#d97aa0italic
markup.underline.link#4fc1b6
markup.inline.raw, markup.fenced_code#d4956a
markup.list#e6c77a
markup.quote#5a6578italic
support.type.property-name.css, support.type.vendored.property-name.css#4fc1b6
support.constant.property-value.css, support.constant.color.css#d4956a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#e6c77a
keyword.other.unit.css#d4956a
support.type.property-name.json#4fc1b6
meta.structure.dictionary.value.json string.quoted#d97aa0
entity.name.tag.yaml#4fc1b6
variable.parameter.function.language.special.self.python, variable.language.special.self.python#e6c77aitalic
entity.name.function.decorator.python#e6c77aitalic
meta.fstring#d97aa0
entity.name.package.go#9f6ad1
storage.modifier.lifetime.rust, entity.name.lifetime.rust#e6c77aitalic
entity.name.function.macro.rust#4fc1b6bold
variable.other.normal.shell, variable.other.special.shell#4fc1b6
markup.inserted#5ccc6a
markup.deleted#e05561
markup.changed#e6c77a
invalid, invalid.illegal#e05561
invalid.deprecated#d4956astrikethrough
Turbokiller by Murat Demirci - VS Code Theme