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#f4f7f9
  • activityBar.border#d8dee3
  • activityBar.foreground#2a3a48
  • activityBar.inactiveForeground#7a8a98
  • activityBarBadge.background#4a9ec0
  • activityBarBadge.foreground#f8fafb
  • button.background#4a9ec0
  • button.foreground#ffffff
  • button.hoverBackground#2d8ab0
  • diffEditor.insertedTextBackground#508a7020
  • diffEditor.removedTextBackground#c0505020
  • dropdown.background#e8ecf0
  • dropdown.border#2a4d6b
  • dropdown.foreground#508a70
  • editor.background#f8fafb
  • editor.foreground#2a3a48
  • editor.inactiveSelectionBackground#e5eef555
  • editor.lineHighlightBackground#eff3f6
  • editor.lineHighlightBorder#eff3f600
  • editor.selectionBackground#e5eef5AA
  • editorBracketHighlight.foreground1#4a9ec0
  • editorBracketHighlight.foreground2#508a70
  • editorBracketHighlight.foreground3#70b5d0
  • editorBracketHighlight.foreground4#c0a560
  • editorBracketHighlight.foreground5#9a70a0
  • editorBracketHighlight.foreground6#ffffff
  • editorBracketHighlight.unexpectedBracket.foreground#c05050
  • editorCursor.foreground#2d8ab0
  • editorGroupHeader.noTabsBackground#f4f7f9
  • editorGroupHeader.tabsBackground#f4f7f9
  • editorGroupHeader.tabsBorder#1c3448
  • editorGutter.background#f8fafb
  • editorHoverWidget.background#e8ecf0
  • editorHoverWidget.border#2d8ab0
  • editorIndentGuide.activeBackground#2a4d6b
  • editorIndentGuide.background#1c3448
  • editorLineNumber.activeForeground#4a9ec0
  • editorLineNumber.foreground#9aa8b5
  • editorLink.activeForeground#2d8ab0
  • editorSuggestWidget.background#e8ecf0
  • editorSuggestWidget.border#2d8ab0
  • editorSuggestWidget.selectedBackground#e5eef5
  • editorWhitespace.foreground#1c344880
  • editorWidget.background#e8ecf0
  • editorWidget.border#2d8ab0
  • editorWidget.foreground#2a3a48
  • gitDecoration.conflictingResourceForeground#c08050
  • gitDecoration.deletedResourceForeground#c05050
  • gitDecoration.ignoredResourceForeground#7a8a98
  • gitDecoration.modifiedResourceForeground#c0a560
  • gitDecoration.untrackedResourceForeground#508a70
  • input.background#e8ecf0
  • input.border#2a4d6b
  • input.foreground#508a70
  • input.placeholderForeground#7a8a98
  • list.activeSelectionBackground#e5eef5
  • list.activeSelectionForeground#70b5d0
  • list.focusBackground#e5eef5
  • list.focusForeground#70b5d0
  • list.highlightForeground#4a9ec0
  • list.hoverBackground#eff3f6
  • list.hoverForeground#508a70
  • list.inactiveSelectionBackground#3d6d8f
  • list.inactiveSelectionForeground#508a70
  • notificationCenter.border#2d8ab0
  • notificationCenterHeader.background#dfe4e8
  • notifications.background#e8ecf0
  • notifications.border#2d8ab0
  • notifications.foreground#508a70
  • panel.background#f8fafb
  • panel.border#2a4d6b
  • panelTitle.activeBorder#4a9ec0
  • panelTitle.activeForeground#4a9ec0
  • panelTitle.inactiveForeground#7a8a98
  • scrollbarSlider.activeBackground#2d8ab0CC
  • scrollbarSlider.background#3d6d8f80
  • scrollbarSlider.hoverBackground#5a8bb0AA
  • sideBar.background#f4f7f9
  • sideBar.border#d8dee3
  • sideBar.foreground#2a3a48
  • sideBarSectionHeader.background#dfe4e8
  • sideBarSectionHeader.foreground#4a9ec0
  • sideBarTitle.foreground#4a9ec0
  • statusBar.background#f4f7f9
  • statusBar.border#cdd4db
  • statusBar.debuggingBackground#c05050
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#4a9ec0
  • statusBar.noFolderBackground#f4f7f9
  • statusBar.noFolderForeground#4a9ec0
  • statusBarItem.activeBackground#5a8bb0
  • statusBarItem.hoverBackground#3d6d8f
  • statusBarItem.prominentBackground#5a8bb0
  • statusBarItem.prominentHoverBackground#3d6d8f
  • tab.activeBackground#f8fafb
  • tab.activeBorder#4a9ec0
  • tab.activeBorderTop#4a9ec0
  • tab.activeForeground#2d8ab0
  • tab.border#f8fafb
  • tab.inactiveBackground#e8ecf0
  • tab.inactiveForeground#5a6a78
  • tab.unfocusedActiveBorder#3d6d8f
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#4a9ec0
  • terminal.ansiBrightBlack#5a6a78
  • terminal.ansiBrightBlue#4a9ec0
  • terminal.ansiBrightCyan#70b5d0
  • terminal.ansiBrightGreen#508a70
  • terminal.ansiBrightMagenta#9a70a0
  • terminal.ansiBrightRed#c05050
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#c0a560
  • terminal.ansiCyan#4a9ec0
  • terminal.ansiGreen#508a70
  • terminal.ansiMagenta#9a70a0
  • terminal.ansiRed#c05050
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#c0a560
  • terminal.background#f8fafb
  • terminal.foreground#2a3a48
  • textLink.activeForeground#2d8ab0
  • textLink.foreground#4a9ec0
  • titleBar.activeBackground#f4f7f9
  • titleBar.activeForeground#2a3a48
  • titleBar.border#1c3448
  • titleBar.inactiveBackground#f8fafb
  • titleBar.inactiveForeground#7a8a98

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9aa8b5italic
comment.block.documentation#9aa8b5italic
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.conditional, keyword.control.loop, keyword.other#3d6d8fbold
storage, storage.type, storage.modifier#2a4d6bbold
string.quoted.docstring, comment.block.documentation.python#5a6a78italic
string, string.quoted, string.template#508a70
string.quoted.double punctuation.definition.string, string.quoted.single punctuation.definition.string, string.template punctuation.definition.string#508a70
constant.character.escape, string constant.character.escape#4a9ec0
punctuation.definition.template-expression, meta.template.expression#70b5d0
constant.numeric, constant.language.numeric#c0a560
constant.language.boolean, constant.language.null, constant.language.undefined#2d8ab0
constant, constant.other, variable.other.constant#2d8ab0
variable, variable.other, variable.other.readwrite, variable.other.object#3a4a58
variable.other.property, variable.other.member, meta.object.member, support.variable.property#2a3a48
variable.language, variable.language.this, variable.language.super#3d6d8fbold
entity.name.function, meta.function-call entity.name.function, support.function#4a9ec0
meta.function-call, variable.function#2d8ab0
meta.method-call entity.name.function, entity.name.method#4a9ec0
entity.name.class, entity.name.type.class, support.class#2a4d6bbold
entity.name.type, support.type, storage.type.primitive, storage.type.built-in#2a4d6b
entity.name.type.interface, entity.other.inherited-class#2d8ab0
entity.name.type.enum#2a4d6b
variable.parameter, meta.function.parameters variable, meta.parameters variable#3a4a58italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational, keyword.operator.bitwise#2d8ab0
keyword.operator.assignment#4a9ec0
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#7a8a98
punctuation.separator, punctuation.terminator, punctuation.separator.comma, punctuation.separator.period, meta.delimiter#7a8a98
entity.name.tag, meta.tag#3d6d8f
entity.other.attribute-name, meta.tag entity.other.attribute-name#4a9ec0
meta.object-literal.key, meta.object.member, support.type.property-name#2a3a48
entity.name.function.decorator, meta.decorator, punctuation.decorator#4a9ec0
storage.type.annotation, punctuation.definition.annotation#4a9ec0
entity.name.namespace, entity.name.module, support.other.namespace#2a4d6b
entity.name.label#3d6d8f
string.regexp, constant.character.regexp#c08050
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4a9ec0
support.type.property-name.css#2a3a48
support.constant.property-value.css, constant.other.color.css#2d8ab0
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#2a3a48
markup.heading, entity.name.section.markdown#3d6d8fbold
markup.boldbold
markup.italicitalic
markup.underline.link, string.other.link.markdown#4a9ec0
markup.inline.raw, markup.fenced_code#508a70
variable.language.special.self.python, variable.parameter.function.language.special.self.python#3d6d8fbold
entity.name.function.decorator.python#4a9ec0
support.function.magic.python#9a70a0
variable.other.readwrite.alias, meta.import variable.other, meta.export variable.other#3a4a58
entity.name.type.parameter#4a9ec0italic
entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.tsx, support.class.component.jsx#2a4d6bbold
invalid, invalid.illegal#ffffff