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#24ae1d18
  • activityBar.activeBorder#89df00
  • activityBar.background#0a0a0a
  • activityBar.border#1a241a
  • activityBar.foreground#89df00
  • activityBar.inactiveForeground#4a6a3a
  • activityBarBadge.background#89df00
  • activityBarBadge.foreground#0a0a0a
  • badge.background#24ae1d
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.focusForeground#e0e0e0
  • breadcrumb.foreground#a0a0a0
  • breadcrumbPicker.background#1a1a1a
  • button.background#24ae1d
  • button.foreground#ffffff
  • button.hoverBackground#2cc524
  • button.secondaryBackground#243024
  • button.secondaryForeground#d4d4d4
  • checkbox.background#1a1a1a
  • checkbox.border#2a382a
  • checkbox.foreground#d4d4d4
  • checkbox.selectBackground#24ae1d
  • commandCenter.activeBackground#24ae1d20
  • commandCenter.activeForeground#e0e0e0
  • commandCenter.background#0e0e0e
  • commandCenter.border#1a241a
  • commandCenter.foreground#c0c0c0
  • debugIcon.breakpointForeground#f87171
  • debugIcon.continueForeground#89df00
  • debugIcon.restartForeground#89df00
  • debugIcon.startForeground#24ae1d
  • debugIcon.stepIntoForeground#5cc7e0
  • debugIcon.stepOutForeground#5cc7e0
  • debugIcon.stepOverForeground#5cc7e0
  • debugIcon.stopForeground#f87171
  • debugToolBar.background#1a1a1a
  • descriptionForeground#a0a0a0
  • diffEditor.insertedLineBackground#24ae1d12
  • diffEditor.insertedTextBackground#24ae1d18
  • diffEditor.removedLineBackground#f8717112
  • diffEditor.removedTextBackground#f8717118
  • dropdown.background#1a1a1a
  • dropdown.border#2a382a
  • dropdown.foreground#d4d4d4
  • dropdown.listBackground#1a1a1a
  • editor.background#151515
  • editor.findMatchBackground#89df0045
  • editor.findMatchHighlightBackground#89df0028
  • editor.foreground#d4d4d4
  • editor.lineHighlightBackground#89df0008
  • editor.linkedEditingBackground#24ae1d22
  • editor.rangeHighlightBackground#89df0008
  • editor.selectionBackground#24ae1d35
  • editor.selectionHighlightBackground#24ae1d22
  • editor.wordHighlightBackground#24ae1d1a
  • editor.wordHighlightStrongBackground#24ae1d2a
  • editorBracketHighlight.foreground1#24ae1d
  • editorBracketHighlight.foreground2#5cc7e0
  • editorBracketHighlight.foreground3#e5a84b
  • editorBracketHighlight.foreground4#c792ea
  • editorBracketHighlight.foreground5#f87171
  • editorBracketHighlight.foreground6#89df00
  • editorBracketMatch.background#24ae1d25
  • editorBracketMatch.border#24ae1d80
  • editorCursor.foreground#89df00
  • editorError.foreground#f87171
  • editorGroup.border#1a241a
  • editorGroupHeader.noTabsBackground#111111
  • editorGroupHeader.tabsBackground#0e0e0e
  • editorGutter.addedBackground#24ae1d
  • editorGutter.deletedBackground#f87171
  • editorGutter.modifiedBackground#e5a84b
  • editorHint.foreground#89df00
  • editorHoverWidget.background#1a1a1a
  • editorHoverWidget.border#2a382a
  • editorHoverWidget.foreground#d4d4d4
  • editorIndentGuide.activeBackground1#333333
  • editorIndentGuide.background1#222222
  • editorInfo.foreground#5cc7e0
  • editorLineNumber.activeForeground#89df00
  • editorLineNumber.foreground#3a3a3a
  • editorOverviewRuler.addedForeground#24ae1d
  • editorOverviewRuler.border#151515
  • editorOverviewRuler.deletedForeground#f87171
  • editorOverviewRuler.errorForeground#f87171
  • editorOverviewRuler.findMatchForeground#89df00
  • editorOverviewRuler.infoForeground#5cc7e0
  • editorOverviewRuler.modifiedForeground#e5a84b
  • editorOverviewRuler.warningForeground#e5a84b
  • editorRuler.foreground#222222
  • editorSuggestWidget.background#1a1a1a
  • editorSuggestWidget.border#2a382a
  • editorSuggestWidget.focusHighlightForeground#89df00
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#89df00
  • editorSuggestWidget.selectedBackground#24ae1d25
  • editorWarning.foreground#e5a84b
  • editorWhitespace.foreground#2a2a2a
  • editorWidget.background#1a1a1a
  • editorWidget.border#2a382a
  • editorWidget.foreground#d4d4d4
  • errorForeground#f87171
  • focusBorder#24ae1d80
  • foreground#d4d4d4
  • gitDecoration.addedResourceForeground#24ae1d
  • gitDecoration.conflictingResourceForeground#c792ea
  • gitDecoration.deletedResourceForeground#f87171
  • gitDecoration.ignoredResourceForeground#4a4a4a
  • gitDecoration.modifiedResourceForeground#e5a84b
  • gitDecoration.renamedResourceForeground#5cc7e0
  • gitDecoration.untrackedResourceForeground#89df00
  • icon.foreground#a0a0a0
  • input.background#111111
  • input.border#2a382a
  • input.foreground#d4d4d4
  • input.placeholderForeground#6b6b6b
  • inputOption.activeBackground#24ae1d40
  • inputOption.activeBorder#24ae1d
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#5a1d1d
  • inputValidation.errorBorder#be1100
  • inputValidation.infoBackground#0e3a5e
  • inputValidation.infoBorder#2b7fc3
  • inputValidation.warningBackground#4d3a00
  • inputValidation.warningBorder#c49000
  • list.activeSelectionBackground#24ae1d30
  • list.activeSelectionForeground#e0e0e0
  • list.activeSelectionIconForeground#e0e0e0
  • list.dropBackground#24ae1d20
  • list.errorForeground#f87171
  • list.focusBackground#24ae1d20
  • list.focusForeground#e0e0e0
  • list.focusOutline#24ae1d80
  • list.highlightForeground#89df00
  • list.hoverBackground#222222
  • list.hoverForeground#e0e0e0
  • list.inactiveSelectionBackground#222222
  • list.inactiveSelectionForeground#d4d4d4
  • list.warningForeground#e5a84b
  • menu.background#1a1a1a
  • menu.foreground#d4d4d4
  • menu.selectionBackground#24ae1d30
  • menu.selectionForeground#e0e0e0
  • menu.separatorBackground#2a382a
  • menubar.selectionBackground#24ae1d30
  • menubar.selectionForeground#e0e0e0
  • minimap.findMatchHighlight#89df0060
  • minimap.selectionHighlight#24ae1d40
  • minimapGutter.addedBackground#24ae1d
  • minimapGutter.deletedBackground#f87171
  • minimapGutter.modifiedBackground#e5a84b
  • notifications.background#1a1a1a
  • notifications.border#2a382a
  • notifications.foreground#d4d4d4
  • notificationsErrorIcon.foreground#f87171
  • notificationsInfoIcon.foreground#5cc7e0
  • notificationsWarningIcon.foreground#e5a84b
  • panel.background#111111
  • panel.border#1a241a
  • panelTitle.activeBorder#24ae1d
  • panelTitle.activeForeground#e0e0e0
  • panelTitle.inactiveForeground#6b6b6b
  • peekView.border#24ae1d
  • peekViewEditor.background#111111
  • peekViewEditor.matchHighlightBackground#89df0040
  • peekViewResult.background#131313
  • peekViewResult.matchHighlightBackground#89df0040
  • peekViewTitle.background#151515
  • peekViewTitleDescription.foreground#a0a0a0
  • peekViewTitleLabel.foreground#e0e0e0
  • progressBar.background#24ae1d
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#24ae1d60
  • scrollbarSlider.background#42424260
  • scrollbarSlider.hoverBackground#52525260
  • selection.background#24ae1d40
  • sideBar.background#111111
  • sideBar.border#1a241a
  • sideBar.foreground#c0c0c0
  • sideBarSectionHeader.background#141414
  • sideBarSectionHeader.border#1a241a
  • sideBarSectionHeader.foreground#c0c0c0
  • sideBarTitle.foreground#89df00
  • statusBar.background#24ae1d
  • statusBar.border#1d8f17
  • statusBar.debuggingBackground#c45000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#24ae1d
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#24ae1d50
  • statusBarItem.hoverBackground#24ae1d30
  • statusBarItem.prominentBackground#24ae1d
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.remoteBackground#89df00
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#1a1a1a
  • tab.activeBorderTop#89df00
  • tab.activeForeground#e0e0e0
  • tab.border#0e0e0e
  • tab.hoverBackground#1e1e1e
  • tab.inactiveBackground#0e0e0e
  • tab.inactiveForeground#707070
  • terminal.ansiBlack#151515
  • terminal.ansiBlue#5cc7e0
  • terminal.ansiBrightBlack#6b6b6b
  • terminal.ansiBrightBlue#90d8ff
  • terminal.ansiBrightCyan#a5e8ff
  • terminal.ansiBrightGreen#89df00
  • terminal.ansiBrightMagenta#ddb6f2
  • terminal.ansiBrightRed#ff9e9e
  • terminal.ansiBrightWhite#f0f0f0
  • terminal.ansiBrightYellow#ffd080
  • terminal.ansiCyan#7dcfff
  • terminal.ansiGreen#24ae1d
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#f87171
  • terminal.ansiWhite#d4d4d4
  • terminal.ansiYellow#e5a84b
  • terminal.foreground#d4d4d4
  • terminal.selectionBackground#24ae1d35
  • terminalCursor.foreground#89df00
  • testing.iconErrored#f87171
  • testing.iconFailed#f87171
  • testing.iconPassed#24ae1d
  • testing.iconQueued#5cc7e0
  • testing.iconSkipped#e5a84b
  • testing.iconUnset#6b6b6b
  • textLink.activeForeground#a5f030
  • textLink.foreground#89df00
  • titleBar.activeBackground#0a0a0a
  • titleBar.activeForeground#c0c0c0
  • titleBar.border#1a241a
  • titleBar.inactiveBackground#0a0a0a
  • titleBar.inactiveForeground#505050
  • walkThrough.embeddedEditorBackground#111111
  • welcomePage.progress.foreground#89df00
  • welcomePage.tileBackground#1a1a1a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b7b6bitalic
comment.block.documentation, comment.block.javadoc, string.quoted.docstring#7a8c7aitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.operator.expression, storage.type, storage.modifier#24ae1d
keyword.control.flow, keyword.control.return, keyword.control.break, keyword.control.continue, keyword.control.conditional, keyword.control.loop#24ae1dbold
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic#a0a0a0
string, string.quoted, string.template#89df00
constant.character.escape, string.regexp#5cc7e0
punctuation.definition.template-expression, string.template punctuation.definition.template-expression#24ae1d
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#e5a84b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#e07d5c
support.constant, variable.other.constant#e5a84b
entity.name.function, support.function, meta.function-call entity.name.function#5cc7e0
variable.parameter, meta.parameter#d4a0eaitalic
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#4da6ff
entity.name.type.interface, entity.name.type.alias#7dc8ff
entity.name.type.enum#4da6ff
variable.other.enummember#e5a84b
variable, variable.other, variable.other.readwrite#d4d4d4
variable.other.property, variable.other.object.property, meta.object-literal.key#b8d4e8
variable.language.this, variable.language.self#24ae1ditalic
entity.name.tag, punctuation.definition.tag#24ae1d
entity.other.attribute-name#89df00italic
support.class.component#4da6ff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#89df00
support.type.property-name.css#5cc7e0
support.constant.property-value.css, support.constant.color#e5a84b
keyword.other.unit.css#e07d5c
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#e5a84b
punctuation.definition.block, punctuation.definition.parameters, punctuation.separator, punctuation.terminator, punctuation.accessor#a0a0a0
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#24ae1d
support.type.property-name.json#5cc7e0
meta.structure.dictionary.value.json string.quoted#89df00
heading.1.markdown entity.name, heading.2.markdown entity.name, heading.3.markdown entity.name, heading.4.markdown entity.name, heading.5.markdown entity.name, heading.6.markdown entity.name, markup.heading#24ae1dbold
markup.bold#e0e0e0bold
markup.italic#d4a0eaitalic
markup.underline.link#89df00
markup.inline.raw, markup.fenced_code.block, markup.raw.block#e5a84b
markup.inserted#24ae1d
markup.deleted#f87171
markup.changed#e5a84b
variable.other.normal.shell, punctuation.definition.variable.shell#5cc7e0
entity.name.tag.yaml#5cc7e0
keyword.key.toml, support.type.property-name.toml#5cc7e0
entity.other.attribute-name.table.toml#4da6ff
entity.name.package.go#d4d4d4
invalid, invalid.deprecated#f87171strikethrough
Liatrio Theme by Daniel Hagen - Liatrio - VS Code Theme