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#04090d
  • activityBar.border#0f1c22
  • activityBar.foreground#b0b8b8
  • activityBar.inactiveForeground#2a3f3a
  • activityBarBadge.background#00d5d5
  • activityBarBadge.foreground#04090d
  • button.background#203a42
  • button.foreground#00e5e5
  • button.hoverBackground#1a3038
  • diffEditor.insertedTextBackground#70b0a020
  • diffEditor.removedTextBackground#e8505020
  • dropdown.background#0a1318
  • dropdown.border#142630
  • dropdown.foreground#6aa090
  • editor.background#04090d
  • editor.foreground#b0b8b8
  • editor.inactiveSelectionBackground#14263055
  • editor.lineHighlightBackground#0a0f13
  • editor.lineHighlightBorder#0a0f1300
  • editor.selectionBackground#142630AA
  • editorBracketHighlight.foreground1#00d5d5
  • editorBracketHighlight.foreground2#70b0a0
  • editorBracketHighlight.foreground3#00e5e5
  • editorBracketHighlight.foreground4#d0b580
  • editorBracketHighlight.foreground5#b070a0
  • editorBracketHighlight.foreground6#e8e8e8
  • editorBracketHighlight.unexpectedBracket.foreground#e85050
  • editorCursor.foreground#10f5f5
  • editorGroupHeader.noTabsBackground#050a0e
  • editorGroupHeader.tabsBackground#050a0e
  • editorGroupHeader.tabsBorder#0f1c22
  • editorGutter.background#04090d
  • editorHoverWidget.background#0a1318
  • editorHoverWidget.border#4a8585
  • editorIndentGuide.activeBackground#142630
  • editorIndentGuide.background#0f1c22
  • editorLineNumber.activeForeground#00e5e5
  • editorLineNumber.foreground#2a3f3a
  • editorLink.activeForeground#10f5f5
  • editorSuggestWidget.background#0a1318
  • editorSuggestWidget.border#4a8585
  • editorSuggestWidget.selectedBackground#203a42
  • editorWhitespace.foreground#0f1c2280
  • editorWidget.background#0a1318
  • editorWidget.border#4a8585
  • editorWidget.foreground#b0b8b8
  • gitDecoration.conflictingResourceForeground#e08060
  • gitDecoration.deletedResourceForeground#e85050
  • gitDecoration.ignoredResourceForeground#4a5555
  • gitDecoration.modifiedResourceForeground#d0b580
  • gitDecoration.untrackedResourceForeground#70b0a0
  • input.background#0a1318
  • input.border#142630
  • input.foreground#6aa090
  • input.placeholderForeground#4a5555
  • list.activeSelectionBackground#203a42
  • list.activeSelectionForeground#10f5f5
  • list.focusBackground#203a42
  • list.focusForeground#10f5f5
  • list.highlightForeground#00e5e5
  • list.hoverBackground#1a3038
  • list.hoverForeground#80c0b0
  • list.inactiveSelectionBackground#1a3038
  • list.inactiveSelectionForeground#80c0b0
  • notificationCenter.border#4a8585
  • notificationCenterHeader.background#0a0f13
  • notifications.background#0a1318
  • notifications.border#4a8585
  • notifications.foreground#6aa090
  • panel.background#04090d
  • panel.border#142630
  • panelTitle.activeBorder#00d5d5
  • panelTitle.activeForeground#00d5d5
  • panelTitle.inactiveForeground#4a5555
  • scrollbarSlider.activeBackground#4a8585CC
  • scrollbarSlider.background#1a303880
  • scrollbarSlider.hoverBackground#203a42AA
  • sideBar.background#050a0e
  • sideBar.border#0f1c22
  • sideBar.foreground#b0b8b8
  • sideBarSectionHeader.background#0a0f13
  • sideBarSectionHeader.foreground#2ec2e0
  • sideBarTitle.foreground#00d5d5
  • statusBar.background#050a0e
  • statusBar.border#4a8585
  • statusBar.debuggingBackground#e85050
  • statusBar.debuggingForeground#e8e8e8
  • statusBar.foreground#b0b8b8
  • statusBar.noFolderBackground#050a0e
  • statusBar.noFolderForeground#b0b8b8
  • statusBarItem.activeBackground#203a42
  • statusBarItem.hoverBackground#1a3038
  • statusBarItem.prominentBackground#203a42
  • statusBarItem.prominentHoverBackground#1a3038
  • tab.activeBackground#0a0f13
  • tab.activeBorder#00d5d5
  • tab.activeBorderTop#00d5d5
  • tab.activeForeground#00e5e5
  • tab.border#04090d
  • tab.inactiveBackground#04090d
  • tab.inactiveForeground#354a45
  • tab.unfocusedActiveBorder#1a3038
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2ec2e0
  • terminal.ansiBrightBlack#3a4545
  • terminal.ansiBrightBlue#00d5d5
  • terminal.ansiBrightCyan#00e5e5
  • terminal.ansiBrightGreen#80c0b0
  • terminal.ansiBrightMagenta#b070a0
  • terminal.ansiBrightRed#e85050
  • terminal.ansiBrightWhite#e8e8e8
  • terminal.ansiBrightYellow#d0b580
  • terminal.ansiCyan#00d5d5
  • terminal.ansiGreen#70b0a0
  • terminal.ansiMagenta#b070a0
  • terminal.ansiRed#e85050
  • terminal.ansiWhite#e8e8e8
  • terminal.ansiYellow#d0b580
  • terminal.background#04090d
  • terminal.foreground#b0b8b8
  • textLink.activeForeground#10f5f5
  • textLink.foreground#00e5e5
  • titleBar.activeBackground#050a0e
  • titleBar.activeForeground#b0b8b8
  • titleBar.border#0f1c22
  • titleBar.inactiveBackground#04090d
  • titleBar.inactiveForeground#4a5555

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a5555italic
comment.block.documentation#6a7575italic
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.conditional, keyword.control.loop, keyword.other#00d5d5bold
storage, storage.type, storage.modifier#4a8585bold
string.quoted.docstring, comment.block.documentation.python#405550italic
string, string.quoted, string.template#70b0a0
string.quoted.double punctuation.definition.string, string.quoted.single punctuation.definition.string, string.template punctuation.definition.string#70b0a0
constant.character.escape, string constant.character.escape#2ec2e0
punctuation.definition.template-expression, meta.template.expression#00e5e5
constant.numeric, constant.language.numeric#d0b580
constant.language.boolean, constant.language.null, constant.language.undefined#2ec2e0
constant, constant.other, variable.other.constant#2ec2e0
variable, variable.other, variable.other.readwrite, variable.other.object#c8d0d0
variable.other.property, variable.other.member, meta.object.member, support.variable.property#b0b8b8
variable.language, variable.language.this, variable.language.super#00d5d5bold
entity.name.function, meta.function-call entity.name.function, support.function#8fe9f4
meta.function-call, variable.function#2ec2e0
meta.method-call entity.name.function, entity.name.method#8fe9f4
entity.name.class, entity.name.type.class, support.class#4a8585bold
entity.name.type, support.type, storage.type.primitive, storage.type.built-in#4a8585
entity.name.type.interface, entity.other.inherited-class#2ec2e0
entity.name.type.enum#4a8585
variable.parameter, meta.function.parameters variable, meta.parameters variable#c8d0d0italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational, keyword.operator.bitwise#659595
keyword.operator.assignment#00d5d5
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#6a7575
punctuation.separator, punctuation.terminator, punctuation.separator.comma, punctuation.separator.period, meta.delimiter#6a7575
entity.name.tag, meta.tag#00d5d5
entity.other.attribute-name, meta.tag entity.other.attribute-name#2ec2e0
meta.object-literal.key, meta.object.member, support.type.property-name#b0b8b8
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#4a8585
entity.name.label#00d5d5
string.regexp, constant.character.regexp#e08060
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#00d5d5
support.type.property-name.css#b0b8b8
support.constant.property-value.css, constant.other.color.css#2ec2e0
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#b0b8b8
markup.heading, entity.name.section.markdown#00d5d5bold
markup.boldbold
markup.italicitalic
markup.underline.link, string.other.link.markdown#00d5d5
markup.inline.raw, markup.fenced_code#70b0a0
variable.language.special.self.python, variable.parameter.function.language.special.self.python#00d5d5bold
entity.name.function.decorator.python#2ec2e0
support.function.magic.python#b070a0
variable.other.readwrite.alias, meta.import variable.other, meta.export variable.other#c8d0d0
entity.name.type.parameter#2ec2e0italic
entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.tsx, support.class.component.jsx#4a8585bold
invalid, invalid.illegal#000000