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#020508
  • activityBar.border#0f1a22
  • activityBar.foreground#aab5c0
  • activityBar.inactiveForeground#252a2f
  • activityBarBadge.background#5dd9f0
  • activityBarBadge.foreground#020508
  • button.background#0a5f7a
  • button.foreground#c0f5fa
  • button.hoverBackground#2ec2e0
  • diffEditor.insertedTextBackground#5dd9f020
  • diffEditor.removedTextBackground#e8505020
  • dropdown.background#070a10
  • dropdown.border#14202a
  • dropdown.foreground#2ec2e0
  • editor.background#020508
  • editor.foreground#aab5c0
  • editor.inactiveSelectionBackground#1a283255
  • editor.lineHighlightBackground#05080d
  • editor.lineHighlightBorder#05080d00
  • editor.selectionBackground#1a2832AA
  • editorBracketHighlight.foreground1#5dd9f0
  • editorBracketHighlight.foreground2#5dd9f0
  • editorBracketHighlight.foreground3#8fe9f4
  • editorBracketHighlight.foreground4#d0b580
  • editorBracketHighlight.foreground5#b070a0
  • editorBracketHighlight.foreground6#e8e8e8
  • editorBracketHighlight.unexpectedBracket.foreground#e85050
  • editorCursor.foreground#c0f5fa
  • editorGroupHeader.noTabsBackground#030609
  • editorGroupHeader.tabsBackground#030609
  • editorGroupHeader.tabsBorder#0f1a22
  • editorGutter.background#020508
  • editorHoverWidget.background#070a10
  • editorHoverWidget.border#0a5f7a
  • editorIndentGuide.activeBackground#14202a
  • editorIndentGuide.background#0f1a22
  • editorLineNumber.activeForeground#5dd9f0
  • editorLineNumber.foreground#4a5158
  • editorLink.activeForeground#8fe9f4
  • editorSuggestWidget.background#070a10
  • editorSuggestWidget.border#0a5f7a
  • editorSuggestWidget.selectedBackground#1a2832
  • editorWhitespace.foreground#0f1a2280
  • editorWidget.background#070a10
  • editorWidget.border#0a5f7a
  • editorWidget.foreground#aab5c0
  • gitDecoration.conflictingResourceForeground#e08060
  • gitDecoration.deletedResourceForeground#e85050
  • gitDecoration.ignoredResourceForeground#4a5158
  • gitDecoration.modifiedResourceForeground#d0b580
  • gitDecoration.untrackedResourceForeground#5dd9f0
  • input.background#070a10
  • input.border#14202a
  • input.foreground#2ec2e0
  • input.placeholderForeground#4a5158
  • list.activeSelectionBackground#1a2832
  • list.activeSelectionForeground#c0f5fa
  • list.focusBackground#1a2832
  • list.focusForeground#c0f5fa
  • list.highlightForeground#5dd9f0
  • list.hoverBackground#14202a
  • list.hoverForeground#8fe9f4
  • list.inactiveSelectionBackground#1a2832
  • list.inactiveSelectionForeground#8fe9f4
  • notificationCenter.border#0a5f7a
  • notificationCenterHeader.background#05080d
  • notifications.background#070a10
  • notifications.border#0a5f7a
  • notifications.foreground#2ec2e0
  • panel.background#020508
  • panel.border#14202a
  • panelTitle.activeBorder#5dd9f0
  • panelTitle.activeForeground#5dd9f0
  • panelTitle.inactiveForeground#4a5158
  • scrollbarSlider.activeBackground#0a5f7aCC
  • scrollbarSlider.background#1a283280
  • scrollbarSlider.hoverBackground#1a3a50AA
  • sideBar.background#030609
  • sideBar.border#0f1a22
  • sideBar.foreground#aab5c0
  • sideBarSectionHeader.background#05080d
  • sideBarSectionHeader.foreground#2ec2e0
  • sideBarTitle.foreground#5dd9f0
  • statusBar.background#030609
  • statusBar.border#024e69
  • statusBar.debuggingBackground#e85050
  • statusBar.debuggingForeground#e8e8e8
  • statusBar.foreground#2ec2e0
  • statusBar.noFolderBackground#030609
  • statusBar.noFolderForeground#2ec2e0
  • statusBarItem.activeBackground#1a3a50
  • statusBarItem.hoverBackground#1a2832
  • statusBarItem.prominentBackground#1a3a50
  • statusBarItem.prominentHoverBackground#1a2832
  • tab.activeBackground#05080d
  • tab.activeBorder#5dd9f0
  • tab.activeBorderTop#5dd9f0
  • tab.activeForeground#5dd9f0
  • tab.border#020508
  • tab.inactiveBackground#020508
  • tab.inactiveForeground#4a5158
  • tab.unfocusedActiveBorder#1a2832
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2ec2e0
  • terminal.ansiBrightBlack#353a3f
  • terminal.ansiBrightBlue#5dd9f0
  • terminal.ansiBrightCyan#8fe9f4
  • terminal.ansiBrightGreen#8fe9f4
  • terminal.ansiBrightMagenta#b070a0
  • terminal.ansiBrightRed#e85050
  • terminal.ansiBrightWhite#e8e8e8
  • terminal.ansiBrightYellow#d0b580
  • terminal.ansiCyan#5dd9f0
  • terminal.ansiGreen#5dd9f0
  • terminal.ansiMagenta#b070a0
  • terminal.ansiRed#e85050
  • terminal.ansiWhite#e8e8e8
  • terminal.ansiYellow#d0b580
  • terminal.background#020508
  • terminal.foreground#aab5c0
  • textLink.activeForeground#8fe9f4
  • textLink.foreground#5dd9f0
  • titleBar.activeBackground#030609
  • titleBar.activeForeground#aab5c0
  • titleBar.border#0f1a22
  • titleBar.inactiveBackground#020508
  • titleBar.inactiveForeground#4a5158

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a5158italic
comment.block.documentation#6a7580italic
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.conditional, keyword.control.loop, keyword.other#5dd9f0bold
storage, storage.type, storage.modifier#0a5f7abold
string.quoted.docstring, comment.block.documentation.python#6a7580italic
string, string.quoted, string.template#2ec2e0—
string.quoted.double punctuation.definition.string, string.quoted.single punctuation.definition.string, string.template punctuation.definition.string#2ec2e0—
constant.character.escape, string constant.character.escape#5dd9f0—
punctuation.definition.template-expression, meta.template.expression#8fe9f4—
constant.numeric, constant.language.numeric#8fe9f4—
constant.language.boolean, constant.language.null, constant.language.undefined#5dd9f0—
constant, constant.other, variable.other.constant#5dd9f0—
variable, variable.other, variable.other.readwrite, variable.other.object#c0cad5—
variable.other.property, variable.other.member, meta.object.member, support.variable.property#aab5c0—
variable.language, variable.language.this, variable.language.super#c0f5fabold
entity.name.function, meta.function-call entity.name.function, support.function#8fe9f4—
meta.function-call, variable.function#5dd9f0—
meta.method-call entity.name.function, entity.name.method#8fe9f4—
entity.name.class, entity.name.type.class, support.class#0a5f7abold
entity.name.type, support.type, storage.type.primitive, storage.type.built-in#0a5f7a—
entity.name.type.interface, entity.other.inherited-class#2ec2e0—
entity.name.type.enum#0a5f7a—
variable.parameter, meta.function.parameters variable, meta.parameters variable#c0cad5italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational, keyword.operator.bitwise#2ec2e0—
keyword.operator.assignment#5dd9f0—
punctuation.definition.parameters, punctuation.definition.block, punctuation.definition.bracket, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section.brackets, punctuation.section.braces, punctuation.section.parens, meta.brace.round, meta.brace.square, meta.brace.curly#6a7580—
punctuation.separator, punctuation.terminator, punctuation.separator.comma, punctuation.separator.period, meta.delimiter#6a7580—
entity.name.tag, meta.tag#5dd9f0—
entity.other.attribute-name, meta.tag entity.other.attribute-name#2ec2e0—
meta.object-literal.key, meta.object.member, support.type.property-name#aab5c0—
entity.name.function.decorator, meta.decorator, punctuation.decorator#2ec2e0—
storage.type.annotation, punctuation.definition.annotation#2ec2e0—
entity.name.namespace, entity.name.module, support.other.namespace#0a5f7a—
entity.name.label#5dd9f0—
string.regexp, constant.character.regexp#e08060—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5dd9f0—
support.type.property-name.css#aab5c0—
support.constant.property-value.css, constant.other.color.css#5dd9f0—
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#aab5c0—
markup.heading, entity.name.section.markdown#5dd9f0bold
markup.bold—bold
markup.italic—italic
markup.underline.link, string.other.link.markdown#5dd9f0—
markup.inline.raw, markup.fenced_code#2ec2e0—
variable.language.special.self.python, variable.parameter.function.language.special.self.python#c0f5fabold
entity.name.function.decorator.python#2ec2e0—
support.function.magic.python#b070a0—
variable.other.readwrite.alias, meta.import variable.other, meta.export variable.other#c0cad5—
entity.name.type.parameter#2ec2e0italic
entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.tsx, support.class.component.jsx#0a5f7abold
invalid, invalid.illegal#000000—