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.bold—bold
markup.italic—italic
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—