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.boldbold
markup.italicitalic
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
Macrodata Refiners Severance Theme by guinetik - VS Code Theme