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#04060b
  • activityBar.border#101827
  • activityBar.foreground#6ea8fe
  • activityBar.inactiveForeground#93a8c9
  • activityBarBadge.background#6ea8fe
  • activityBarBadge.foreground#000000
  • badge.background#2a5db3
  • breadcrumb.background#05070d
  • button.background#2a5db3
  • button.foreground#ffffff
  • button.hoverBackground#6ea8fe
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#070825
  • dropdown.border#181A1F
  • editor.background#05070d
  • editor.findMatchBackground#2a5db3
  • editor.findMatchBorder#6EA8FE
  • editor.findMatchHighlightBackground#2a5db380
  • editor.findMatchHighlightBorder#38BDF866
  • editor.foreground#f1f1f1
  • editor.lineHighlightBackground#0b101c
  • editor.lineHighlightBorder#1a3661
  • editor.selectionBackground#1a366180
  • editorBracketMatch.border#6EA8FE
  • editorCursor.foreground#6ea8fe
  • editorGroup.border#101827
  • editorGroupHeader.noTabsBackground#05070d
  • editorGroupHeader.tabsBackground#04060b
  • editorGutter.addedBackground#50fa7b
  • editorGutter.background#05070d
  • editorGutter.modifiedBackground#6ea8fe
  • editorHoverWidget.background#0b101c
  • editorHoverWidget.border#1a3661
  • editorHoverWidget.foreground#dbe6f5
  • editorIndentGuide.background#2c394c8f
  • editorLineNumber.foreground#3B4D66
  • editorOverviewRuler.addedForeground#50fa7b
  • editorOverviewRuler.modifiedForeground#6ea8fe
  • editorSuggestWidget.background#0b101c
  • editorSuggestWidget.border#1a3661
  • editorSuggestWidget.foreground#dbe6f5
  • editorSuggestWidget.highlightForeground#6ea8fe
  • editorSuggestWidget.selectedBackground#1a3661
  • editorWhitespace.foreground#2c394c8f
  • editorWidget.background#0b101c
  • editorWidget.border#1a3661
  • extensionButton.prominentBackground#6EA8FE
  • extensionButton.prominentHoverBackground#6EA8FE96
  • focusBorder#38BDF8
  • gitDecoration.addedResourceForeground#50fa7b
  • gitDecoration.deletedResourceForeground#6EA8FE
  • gitDecoration.ignoredResourceForeground#D5D8DA59
  • gitDecoration.modifiedResourceForeground#6ea8fe
  • gitDecoration.untrackedResourceForeground#B3F361
  • input.background#101827
  • input.border#1a3661
  • input.foreground#e0e0e0
  • list.activeSelectionBackground#1a3661
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#2C313A
  • list.highlightForeground#6ea8fe
  • list.hoverBackground#101827
  • list.inactiveSelectionBackground#101827
  • list.inactiveSelectionForeground#D7DAE0
  • menu.background#05070d
  • menu.selectionBackground#1a3661
  • minimapGutter.addedBackground#50fa7b
  • minimapGutter.modifiedBackground#6ea8fe
  • notificationCenter.background#0b101c
  • notifications.background#0b101c
  • notifications.border#1a3661
  • output.background#05070d
  • panel.background#05070d
  • pickerGroup.border#6EA8FE
  • quickInput.background#05070d
  • scrollbarSlider.activeBackground#6ea8fe66
  • scrollbarSlider.background#6ea8fe22
  • scrollbarSlider.hoverBackground#6ea8fe44
  • sideBar.background#04060b
  • sideBar.border#101827
  • sideBar.foreground#93a8c9
  • sideBarSectionHeader.background#04060b
  • sideBarSectionHeader.border#101827
  • statusBar.background#0b101c
  • statusBar.border#17233a
  • statusBar.debuggingBackground#6EA8FE
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#b5becf
  • statusBar.noFolderBackground#070825
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#0b101c
  • tab.activeForeground#6ea8fe
  • tab.border#17233a
  • tab.inactiveBackground#04060b
  • terminal.ansiBlue#38BDF8
  • terminal.ansiBrightBlue#38BDF8
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#50fa7b
  • terminal.ansiBrightMagenta#F806FA
  • terminal.ansiBrightRed#6EA8FE
  • terminal.ansiBrightYellow#FFEA16
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#50fa7b
  • terminal.ansiMagenta#F806FA
  • terminal.ansiRed#6EA8FE
  • terminal.ansiYellow#FFEA16
  • terminal.background#05070d
  • terminal.border#1a3661
  • terminal.foreground#dbe6f5
  • terminal.selectionBackground#1a366180
  • terminalCommandDecoration.defaultBackground#6ea8fe
  • terminalCommandDecoration.errorBackground#ff5555
  • terminalCommandDecoration.successBackground#50fa7b
  • terminalCursor.background#05070d
  • terminalCursor.foreground#6ea8fe
  • titleBar.activeBackground#04060b
  • titleBar.activeForeground#b5becf
  • titleBar.inactiveBackground#04060b
  • titleBar.inactiveForeground#7b7f86
  • walkThrough.embeddedEditorBackground#232530

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#4a5a73italic
string.quoted, string.template, punctuation.definition.string#93C5FD
string.template meta.embedded.line#e6edfb
variable, entity.name.variable#A5B4FC
variable.language, variable.other.object.js#38BDF8
variable.parameter#A5B4FCbold
storage.type, storage.modifier#6EA8FEbold
constant#A5B4FC
string.regexp#A5B4FC
meta.jsx.children.js, meta.property-value.css, text.html.derivative#e6edfb
constant.numeric#6EA8FEbold
constant.language#A5B4FC
constant.character.escape#FFFFFF
entity.name#38BDF8
entity.name.tag#38BDF8bold
punctuation.definition.tag#FFFFFF
entity.other.attribute-name#A5B4FC
entity.name.type#38BDF8bold
entity.other.inherited-class#F2F2F2
entity.name.function, variable.function#e6edfbbold
keyword#6EA8FEbold
keyword.control#6EA8FEbold
keyword.operator#6EA8FEbold
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#6EA8FEbold
keyword.other.unit#A5B4FC
support#38BDF8bold
support.function#e6edfb
support.variable#A5B4FC
meta.object-literal.key, support.type.property-name#38BDF8
variable.other.property.js#6EA8FEbold
punctuation.separator.key-value#6EA8FEbold
punctuation.section.embedded#6EA8FEbold
punctuation.section.embedded#FFFFFF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#6EA8FE
support.type.property-name.css, support.type.vendored.property-name.css#F2F2F2
constant.other.color#6EA8FEbold
support.constant.font-name#A5B4FC
entity.other.attribute-name.id#6EA8FEbold
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#F2F2F2
support.function.misc.css#6EA8FEbold
markup.heading, entity.name.section#A5B4FC
markup.quote#F472B6bold
beginning.punctuation.definition.list#A5B4FC
markup.underline.link#F2F2F2
string.other.link.description#A5B4FC
meta.function-call.generic.python#e6edfb
storage.type.cs#6EA8FEbold
entity.name.variable.local.cs#A5B4FC
entity.name.variable.field.cs, entity.name.variable.property.cs#A5B4FC
source.cpp keyword.operator#6EA8FEbold
punctuation.definition.heading.markdown#A5B4FC7c
punctuation.definition.bold.markdown#6EA8FE7a
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#6EA8FEbold
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#38BDF8bold
meta.type.annotation.ts, meta.type.annotation.tsx, meta.return.type.ts, meta.return.type.tsx#38BDF8
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx#38BDF8
keyword.operator.type.ts, keyword.operator.type.tsx, keyword.operator.type.annotation.ts, keyword.operator.type.annotation.tsx#6EA8FE
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust#93C5FDitalic
entity.name.function.macro.rust, support.macro.rust#38BDF8bold
variable.language.self.rust, variable.language.super.rust#38BDF8italic
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#38BDF8bold
support.type.primitive.rust, entity.name.type.primitive.rust#6EA8FEbold
meta.attribute.rust, punctuation.definition.attribute.rust#A5B4FC
support.class.component.js, support.class.component.jsx, support.class.component.tsx#38BDF8bold
meta.jsx.children, meta.jsx.children.tsx#e6edfb
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#6EA8FEbold
meta.decorator, punctuation.decorator#A5B4FCitalic
meta.type.parameters, variable.other.type.ts, variable.other.type.tsx#38BDF8
entity.name.package.go, entity.name.import.go#A5B4FC
support.type.property-name.json#38BDF8
entity.name.tag.yaml#38BDF8
support.type.property-name.toml, entity.name.table.toml#38BDF8