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.background#040a07
  • activityBar.border#0c1f17
  • activityBar.foreground#34d399
  • activityBar.inactiveForeground#8fc7ab
  • activityBarBadge.background#34d399
  • activityBarBadge.foreground#000000
  • badge.background#1f8f63
  • breadcrumb.background#050c09
  • button.background#1f8f63
  • button.foreground#ffffff
  • button.hoverBackground#34d399
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#070825
  • dropdown.border#181A1F
  • editor.background#050c09
  • editor.findMatchBackground#1f8f63
  • editor.findMatchBorder#34D399
  • editor.findMatchHighlightBackground#1f8f6380
  • editor.findMatchHighlightBorder#10B98166
  • editor.foreground#f1f1f1
  • editor.lineHighlightBackground#0c1a14
  • editor.lineHighlightBorder#14513a
  • editor.selectionBackground#14513a80
  • editorBracketMatch.border#34D399
  • editorCursor.foreground#34d399
  • editorGroup.border#0c1f17
  • editorGroupHeader.noTabsBackground#050c09
  • editorGroupHeader.tabsBackground#040a07
  • editorGutter.addedBackground#34d399
  • editorGutter.background#050c09
  • editorGutter.modifiedBackground#34d399
  • editorHoverWidget.background#0c1a14
  • editorHoverWidget.border#14513a
  • editorHoverWidget.foreground#d7ecdf
  • editorIndentGuide.background#2c394c8f
  • editorLineNumber.foreground#3B4D66
  • editorOverviewRuler.addedForeground#34d399
  • editorOverviewRuler.modifiedForeground#34d399
  • editorSuggestWidget.background#0c1a14
  • editorSuggestWidget.border#14513a
  • editorSuggestWidget.foreground#d7ecdf
  • editorSuggestWidget.highlightForeground#34d399
  • editorSuggestWidget.selectedBackground#14513a
  • editorWhitespace.foreground#2c394c8f
  • editorWidget.background#0c1a14
  • editorWidget.border#14513a
  • extensionButton.prominentBackground#34D399
  • extensionButton.prominentHoverBackground#34D39996
  • focusBorder#10B981
  • gitDecoration.addedResourceForeground#34d399
  • gitDecoration.deletedResourceForeground#34D399
  • gitDecoration.ignoredResourceForeground#D5D8DA59
  • gitDecoration.modifiedResourceForeground#34d399
  • gitDecoration.untrackedResourceForeground#B3F361
  • input.background#0c1f17
  • input.border#14513a
  • input.foreground#e0e0e0
  • list.activeSelectionBackground#14513a
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#2C313A
  • list.highlightForeground#34d399
  • list.hoverBackground#0c1f17
  • list.inactiveSelectionBackground#0c1f17
  • list.inactiveSelectionForeground#D7DAE0
  • menu.background#050c09
  • menu.selectionBackground#14513a
  • minimapGutter.addedBackground#34d399
  • minimapGutter.modifiedBackground#34d399
  • notificationCenter.background#0c1a14
  • notifications.background#0c1a14
  • notifications.border#14513a
  • output.background#050c09
  • panel.background#050c09
  • pickerGroup.border#34D399
  • quickInput.background#050c09
  • scrollbarSlider.activeBackground#34d39966
  • scrollbarSlider.background#34d39922
  • scrollbarSlider.hoverBackground#34d39944
  • sideBar.background#040a07
  • sideBar.border#0c1f17
  • sideBar.foreground#8fc7ab
  • sideBarSectionHeader.background#040a07
  • sideBarSectionHeader.border#0c1f17
  • statusBar.background#0c1a14
  • statusBar.border#12291f
  • statusBar.debuggingBackground#34D399
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#b5becf
  • statusBar.noFolderBackground#070825
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#0c1a14
  • tab.activeForeground#34d399
  • tab.border#12291f
  • tab.inactiveBackground#040a07
  • terminal.ansiBlue#10B981
  • terminal.ansiBrightBlue#10B981
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#34d399
  • terminal.ansiBrightMagenta#F806FA
  • terminal.ansiBrightRed#34D399
  • terminal.ansiBrightYellow#FFEA16
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#34d399
  • terminal.ansiMagenta#F806FA
  • terminal.ansiRed#34D399
  • terminal.ansiYellow#FFEA16
  • terminal.background#050c09
  • terminal.border#14513a
  • terminal.foreground#d7ecdf
  • terminal.selectionBackground#14513a80
  • terminalCommandDecoration.defaultBackground#34d399
  • terminalCommandDecoration.errorBackground#ff5555
  • terminalCommandDecoration.successBackground#34d399
  • terminalCursor.background#050c09
  • terminalCursor.foreground#34d399
  • titleBar.activeBackground#040a07
  • titleBar.activeForeground#b5becf
  • titleBar.inactiveBackground#040a07
  • titleBar.inactiveForeground#7b7f86
  • walkThrough.embeddedEditorBackground#232530

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#4a6b58italic
string.quoted, string.template, punctuation.definition.string#FBBF24
string.template meta.embedded.line#e5faf0
variable, entity.name.variable#6EE7B7
variable.language, variable.other.object.js#10B981
variable.parameter#6EE7B7bold
storage.type, storage.modifier#34D399bold
constant#6EE7B7
string.regexp#6EE7B7
meta.jsx.children.js, meta.property-value.css, text.html.derivative#e5faf0
constant.numeric#34D399bold
constant.language#6EE7B7
constant.character.escape#FFFFFF
entity.name#10B981
entity.name.tag#10B981bold
punctuation.definition.tag#FFFFFF
entity.other.attribute-name#6EE7B7
entity.name.type#10B981bold
entity.other.inherited-class#F2F2F2
entity.name.function, variable.function#e5faf0bold
keyword#34D399bold
keyword.control#34D399bold
keyword.operator#34D399bold
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#34D399bold
keyword.other.unit#6EE7B7
support#10B981bold
support.function#e5faf0
support.variable#6EE7B7
meta.object-literal.key, support.type.property-name#10B981
variable.other.property.js#34D399bold
punctuation.separator.key-value#34D399bold
punctuation.section.embedded#34D399bold
punctuation.section.embedded#FFFFFF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#34D399
support.type.property-name.css, support.type.vendored.property-name.css#F2F2F2
constant.other.color#34D399bold
support.constant.font-name#6EE7B7
entity.other.attribute-name.id#34D399bold
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#F2F2F2
support.function.misc.css#34D399bold
markup.heading, entity.name.section#6EE7B7
markup.quote#F472B6bold
beginning.punctuation.definition.list#6EE7B7
markup.underline.link#F2F2F2
string.other.link.description#6EE7B7
meta.function-call.generic.python#e5faf0
storage.type.cs#34D399bold
entity.name.variable.local.cs#6EE7B7
entity.name.variable.field.cs, entity.name.variable.property.cs#6EE7B7
source.cpp keyword.operator#34D399bold
punctuation.definition.heading.markdown#6EE7B77c
punctuation.definition.bold.markdown#34D3997a
punctuation.definition.italic.markdown#ffffff7e
markup.bold.markdownbold
markup.italic.markdownitalic
storage.type.interface.ts, storage.type.interface.tsx, storage.type.type.ts, storage.type.type.tsx, storage.type.enum.ts, storage.type.enum.tsx, storage.type.namespace.ts, storage.type.namespace.tsx, storage.type.class.ts, storage.type.class.tsx#34D399bold
entity.name.type.interface.ts, entity.name.type.interface.tsx, entity.name.type.alias.ts, entity.name.type.alias.tsx, entity.name.type.enum.ts, entity.name.type.enum.tsx#10B981bold
meta.type.annotation.ts, meta.type.annotation.tsx, meta.return.type.ts, meta.return.type.tsx#10B981
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx#10B981
keyword.operator.type.ts, keyword.operator.type.tsx, keyword.operator.type.annotation.ts, keyword.operator.type.annotation.tsx#34D399
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust#FBBF24italic
entity.name.function.macro.rust, support.macro.rust#10B981bold
variable.language.self.rust, variable.language.super.rust#10B981italic
entity.name.type.rust, entity.name.type.struct.rust, entity.name.type.enum.rust, entity.name.type.trait.rust, entity.name.type.option.rust, entity.name.type.result.rust#10B981bold
support.type.primitive.rust, entity.name.type.primitive.rust#34D399bold
meta.attribute.rust, punctuation.definition.attribute.rust#6EE7B7
support.class.component.js, support.class.component.jsx, support.class.component.tsx#10B981bold
meta.jsx.children, meta.jsx.children.tsx#e5faf0
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#34D399bold
meta.decorator, punctuation.decorator#6EE7B7italic
meta.type.parameters, variable.other.type.ts, variable.other.type.tsx#10B981
entity.name.package.go, entity.name.import.go#6EE7B7
support.type.property-name.json#10B981
entity.name.tag.yaml#10B981
support.type.property-name.toml, entity.name.table.toml#10B981