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#e9e4dc
  • activityBar.border#d5cfc5
  • activityBar.foreground#3a4a54
  • activityBar.inactiveForeground#849aa6
  • activityBarBadge.background#2d6d62
  • activityBarBadge.foreground#f5f2ed
  • button.background#2d6d62
  • button.foreground#ffffff
  • button.hoverBackground#1f5e54
  • diffEditor.insertedTextBackground#b08d5720
  • diffEditor.removedTextBackground#a2676920
  • dropdown.background#ede8df
  • dropdown.border#d5cfc5
  • dropdown.foreground#3a4a54
  • editor.background#f5f2ed
  • editor.foreground#3a4a54
  • editor.inactiveSelectionBackground#d9d4cb55
  • editor.lineHighlightBackground#eae5dd
  • editor.lineHighlightBorder#eae5dd00
  • editor.selectionBackground#d9d4cbAA
  • editorBracketHighlight.foreground1#2d6d62
  • editorBracketHighlight.foreground2#b08d57
  • editorBracketHighlight.foreground3#3a8d82
  • editorBracketHighlight.foreground4#c0a060
  • editorBracketHighlight.foreground5#866c89
  • editorBracketHighlight.foreground6#ffffff
  • editorBracketHighlight.unexpectedBracket.foreground#a26769
  • editorCursor.foreground#2d6d62
  • editorGroupHeader.noTabsBackground#eae5dd
  • editorGroupHeader.tabsBackground#eae5dd
  • editorGroupHeader.tabsBorder#c8c2b8
  • editorGutter.background#f5f2ed
  • editorHoverWidget.background#ede8df
  • editorHoverWidget.border#1f5e54
  • editorIndentGuide.activeBackground#d5cfc5
  • editorIndentGuide.background#c8c2b8
  • editorLineNumber.activeForeground#2d6d62
  • editorLineNumber.foreground#849aa6
  • editorLink.activeForeground#1f5e54
  • editorSuggestWidget.background#ede8df
  • editorSuggestWidget.border#1f5e54
  • editorSuggestWidget.selectedBackground#d9d4cb
  • editorWhitespace.foreground#c8c2b880
  • editorWidget.background#ede8df
  • editorWidget.border#1f5e54
  • editorWidget.foreground#3a4a54
  • gitDecoration.conflictingResourceForeground#c0a060
  • gitDecoration.deletedResourceForeground#a26769
  • gitDecoration.ignoredResourceForeground#849aa6
  • gitDecoration.modifiedResourceForeground#c0a060
  • gitDecoration.untrackedResourceForeground#b08d57
  • input.background#ede8df
  • input.border#d5cfc5
  • input.foreground#3a4a54
  • input.placeholderForeground#849aa6
  • list.activeSelectionBackground#d9d4cb
  • list.activeSelectionForeground#4a9d98
  • list.focusBackground#d9d4cb
  • list.focusForeground#4a9d98
  • list.highlightForeground#2d6d62
  • list.hoverBackground#eae5dd
  • list.hoverForeground#c09d67
  • list.inactiveSelectionBackground#1f5e54
  • list.inactiveSelectionForeground#c09d67
  • notificationCenter.border#1f5e54
  • notificationCenterHeader.background#e9e4dc
  • notifications.background#ede8df
  • notifications.border#1f5e54
  • notifications.foreground#3a4a54
  • panel.background#f5f2ed
  • panel.border#d5cfc5
  • panelTitle.activeBorder#2d6d62
  • panelTitle.activeForeground#2d6d62
  • panelTitle.inactiveForeground#849aa6
  • scrollbarSlider.activeBackground#1f5e54CC
  • scrollbarSlider.background#1f5e5480
  • scrollbarSlider.hoverBackground#2d6d62AA
  • sideBar.background#f0ede7
  • sideBar.border#d5cfc5
  • sideBar.foreground#3a4a54
  • sideBarSectionHeader.background#e9e4dc
  • sideBarSectionHeader.foreground#2a7d78
  • sideBarTitle.foreground#2d6d62
  • statusBar.background#e6e0d7
  • statusBar.border#d5cfc5
  • statusBar.debuggingBackground#a26769
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#3a4a54
  • statusBar.noFolderBackground#e6e0d7
  • statusBar.noFolderForeground#3a4a54
  • statusBarItem.activeBackground#2d6d62
  • statusBarItem.hoverBackground#1f5e54
  • statusBarItem.prominentBackground#2d6d62
  • statusBarItem.prominentHoverBackground#1f5e54
  • tab.activeBackground#f5f2ed
  • tab.activeBorder#2d6d62
  • tab.activeBorderTop#2d6d62
  • tab.activeForeground#3a4a54
  • tab.border#f5f2ed
  • tab.inactiveBackground#eae5dd
  • tab.inactiveForeground#849aa6
  • tab.unfocusedActiveBorder#1f5e54
  • terminal.ansiBlack#3a4a54
  • terminal.ansiBlue#2a7d78
  • terminal.ansiBrightBlack#4a5a64
  • terminal.ansiBrightBlue#2d6d62
  • terminal.ansiBrightCyan#3a8d82
  • terminal.ansiBrightGreen#c09d67
  • terminal.ansiBrightMagenta#866c89
  • terminal.ansiBrightRed#a26769
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#c0a060
  • terminal.ansiCyan#2d6d62
  • terminal.ansiGreen#b08d57
  • terminal.ansiMagenta#866c89
  • terminal.ansiRed#a26769
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#c0a060
  • terminal.background#f5f2ed
  • terminal.foreground#3a4a54
  • textLink.activeForeground#1f5e54
  • textLink.foreground#2d6d62
  • titleBar.activeBackground#e6e0d7
  • titleBar.activeForeground#3a4a54
  • titleBar.border#c8c2b8
  • titleBar.inactiveBackground#f5f2ed
  • titleBar.inactiveForeground#849aa6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#849aa6italic
comment.block.documentation#849aa6italic
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.conditional, keyword.control.loop, keyword.other#2d6d62bold
storage, storage.type, storage.modifier#1f5e54bold
string.quoted.docstring, comment.block.documentation.python#a07d47italic
string, string.quoted, string.template#b08d57
string.quoted.double punctuation.definition.string, string.quoted.single punctuation.definition.string, string.template punctuation.definition.string#b08d57
constant.character.escape, string constant.character.escape#2a7d78
punctuation.definition.template-expression, meta.template.expression#3a8d82
constant.numeric, constant.language.numeric#c0a060
constant.language.boolean, constant.language.null, constant.language.undefined#2d6d62
constant, constant.other, variable.other.constant#2d6d62
variable, variable.other, variable.other.readwrite, variable.other.object#3a4a54
variable.other.property, variable.other.member, meta.object.member, support.variable.property#4a5a64
variable.language, variable.language.this, variable.language.super#2d6d62bold
entity.name.function, meta.function-call entity.name.function, support.function#2d6d62
meta.function-call, variable.function#1f5e54
meta.method-call entity.name.function, entity.name.method#2d6d62
entity.name.class, entity.name.type.class, support.class#3b7b95bold
entity.name.type, support.type, storage.type.primitive, storage.type.built-in#3b7b95
entity.name.type.interface, entity.other.inherited-class#4a8aa5
entity.name.type.enum#3b7b95
variable.parameter, meta.function.parameters variable, meta.parameters variable#4a5a64italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational, keyword.operator.bitwise#597b72
keyword.operator.assignment#2d6d62
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#4a5a64
punctuation.separator, punctuation.terminator, punctuation.separator.comma, punctuation.separator.period, meta.delimiter#849aa6
entity.name.tag, meta.tag#2d6d62
entity.other.attribute-name, meta.tag entity.other.attribute-name#4a9d98
meta.object-literal.key, meta.object.member, support.type.property-name#4a5a64
entity.name.function.decorator, meta.decorator, punctuation.decorator#866c89
storage.type.annotation, punctuation.definition.annotation#866c89
entity.name.namespace, entity.name.module, support.other.namespace#3b7b95
entity.name.label#2d6d62
string.regexp, constant.character.regexp#a07d47
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#2d6d62
support.type.property-name.css#4a5a64
support.constant.property-value.css, constant.other.color.css#2d6d62
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#4a5a64
markup.heading, entity.name.section.markdown#2d6d62bold
markup.boldbold
markup.italicitalic
markup.underline.link, string.other.link.markdown#2d6d62
markup.inline.raw, markup.fenced_code#b08d57
variable.language.special.self.python, variable.parameter.function.language.special.self.python#2d6d62bold
entity.name.function.decorator.python#866c89
support.function.magic.python#866c89
variable.other.readwrite.alias, meta.import variable.other, meta.export variable.other#3a4a54
entity.name.type.parameter#2a7d78italic
entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.tsx, support.class.component.jsx#3b7b95bold
invalid, invalid.illegal#ffffff