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#0a1a20
  • activityBar.border#164955
  • activityBar.foreground#4de8e8
  • activityBar.inactiveForeground#36a5a5
  • activityBarBadge.background#4de8e8
  • activityBarBadge.foreground#0a1a20
  • badge.background#4de8e8
  • badge.foreground#0a1a20
  • breadcrumb.activeSelectionForeground#4de8e8
  • breadcrumb.focusForeground#4de8e8
  • breadcrumb.foreground#36a5a5
  • breadcrumbPicker.background#0c2025
  • button.background#4de8e8
  • button.foreground#0a1a20
  • button.hoverBackground#36a5a5
  • button.secondaryBackground#164955
  • button.secondaryForeground#4de8e8
  • button.secondaryHoverBackground#0f3039
  • debugToolBar.background#0c2025
  • debugToolBar.border#164955
  • descriptionForeground#36a5a5
  • dropdown.background#0c2025
  • dropdown.border#164955
  • dropdown.foreground#4de8e8
  • editor.background#0a1a20
  • editor.findMatchBackground#4de8e830
  • editor.findMatchHighlightBackground#4de8e820
  • editor.foreground#4de8e8
  • editor.lineHighlightBackground#0f303950
  • editor.lineHighlightBorder#0f303900
  • editor.selectionBackground#164955
  • editor.selectionHighlightBackground#16495580
  • editor.wordHighlightBackground#16495580
  • editor.wordHighlightStrongBackground#16495580
  • editorBracketMatch.background#16495550
  • editorBracketMatch.border#4de8e8
  • editorCursor.foreground#4de8e8
  • editorError.foreground#e83c3c
  • editorGroup.border#164955
  • editorGroup.dropBackground#16495530
  • editorGroupHeader.tabsBackground#0a1a20
  • editorGroupHeader.tabsBorder#164955
  • editorHint.foreground#36a5a5
  • editorHoverWidget.background#0c2025
  • editorHoverWidget.border#164955
  • editorIndentGuide.activeBackground#164955
  • editorIndentGuide.background#16495570
  • editorInfo.foreground#4de8e8
  • editorLineNumber.activeForeground#4de8e8
  • editorLineNumber.foreground#36a5a580
  • editorRuler.foreground#164955
  • editorSuggestWidget.background#0c2025
  • editorSuggestWidget.border#164955
  • editorSuggestWidget.foreground#4de8e8
  • editorSuggestWidget.highlightForeground#4de8e8
  • editorSuggestWidget.selectedBackground#164955
  • editorWarning.foreground#ffda44
  • editorWidget.background#0c2025
  • editorWidget.border#164955
  • editorWidget.resizeBorder#4de8e8
  • extensionButton.prominentBackground#4de8e8
  • extensionButton.prominentForeground#0a1a20
  • extensionButton.prominentHoverBackground#36a5a5
  • focusBorder#4de8e8
  • foreground#4de8e8
  • gitDecoration.addedResourceForeground#39e75f
  • gitDecoration.conflictingResourceForeground#c792ea
  • gitDecoration.deletedResourceForeground#e83c3c
  • gitDecoration.ignoredResourceForeground#36a5a580
  • gitDecoration.modifiedResourceForeground#ffda44
  • gitDecoration.submoduleResourceForeground#4de8e8
  • gitDecoration.untrackedResourceForeground#36a5a5
  • input.background#164955
  • input.border#164955
  • input.foreground#4de8e8
  • input.placeholderForeground#36a5a580
  • input.selectionBackground#0f3039
  • inputOption.activeBorder#4de8e8
  • inputValidation.errorBackground#e83c3c
  • inputValidation.errorBorder#e83c3c
  • inputValidation.errorForeground#f2f2f2
  • inputValidation.infoBackground#4de8e8
  • inputValidation.infoBorder#4de8e8
  • inputValidation.infoForeground#0a1a20
  • inputValidation.warningBackground#ffda44
  • inputValidation.warningBorder#ffda44
  • inputValidation.warningForeground#0a1a20
  • list.activeSelectionBackground#164955
  • list.activeSelectionForeground#4de8e8
  • list.dropBackground#16495550
  • list.focusBackground#16495580
  • list.focusForeground#4de8e8
  • list.highlightForeground#4de8e8
  • list.hoverBackground#0f3039
  • list.hoverForeground#4de8e8
  • list.inactiveSelectionBackground#0f3039
  • list.inactiveSelectionForeground#4de8e8
  • listFilterWidget.background#0c2025
  • listFilterWidget.noMatchesOutline#e83c3c
  • listFilterWidget.outline#4de8e8
  • menu.background#0c2025
  • menu.foreground#4de8e8
  • menu.selectionBackground#164955
  • menu.selectionForeground#4de8e8
  • menu.separatorBackground#164955
  • menubar.selectionBackground#164955
  • menubar.selectionForeground#4de8e8
  • notificationCenter.border#164955
  • notificationCenterHeader.background#0a1a20
  • notificationCenterHeader.foreground#4de8e8
  • notificationLink.foreground#4de8e8
  • notifications.background#0c2025
  • notifications.border#164955
  • notifications.foreground#4de8e8
  • notificationToast.border#164955
  • panel.background#0a1a20
  • panel.border#164955
  • panelTitle.activeBorder#4de8e8
  • panelTitle.activeForeground#4de8e8
  • panelTitle.inactiveForeground#36a5a5
  • peekView.border#4de8e8
  • peekViewEditor.background#0f3039
  • peekViewEditor.matchHighlightBackground#4de8e840
  • peekViewResult.background#0a1a20
  • peekViewResult.fileForeground#4de8e8
  • peekViewResult.lineForeground#36a5a5
  • peekViewResult.matchHighlightBackground#4de8e840
  • peekViewResult.selectionBackground#164955
  • peekViewResult.selectionForeground#4de8e8
  • peekViewTitle.background#164955
  • peekViewTitleDescription.foreground#36a5a5
  • peekViewTitleLabel.foreground#4de8e8
  • problemsErrorIcon.foreground#e83c3c
  • problemsInfoIcon.foreground#4de8e8
  • problemsWarningIcon.foreground#ffda44
  • progressBar.background#4de8e8
  • selection.background#164955
  • settings.checkboxBackground#0c2025
  • settings.checkboxBorder#164955
  • settings.checkboxForeground#4de8e8
  • settings.dropdownBackground#0c2025
  • settings.dropdownBorder#164955
  • settings.dropdownForeground#4de8e8
  • settings.headerForeground#4de8e8
  • settings.modifiedItemIndicator#4de8e8
  • settings.numberInputBackground#0c2025
  • settings.numberInputBorder#164955
  • settings.numberInputForeground#4de8e8
  • settings.textInputBackground#0c2025
  • settings.textInputBorder#164955
  • settings.textInputForeground#4de8e8
  • sideBar.background#0a1a20
  • sideBar.border#164955
  • sideBar.foreground#4de8e8
  • sideBarSectionHeader.background#164955
  • sideBarSectionHeader.border#164955
  • sideBarSectionHeader.foreground#4de8e8
  • sideBarTitle.foreground#4de8e8
  • statusBar.background#164955
  • statusBar.border#164955
  • statusBar.debuggingBackground#36a5a5
  • statusBar.debuggingForeground#0a1a20
  • statusBar.foreground#4de8e8
  • statusBar.noFolderBackground#0f3039
  • statusBar.noFolderForeground#4de8e8
  • statusBarItem.activeBackground#16495540
  • statusBarItem.hoverBackground#16495580
  • statusBarItem.prominentBackground#e83c3c
  • statusBarItem.prominentForeground#f2f2f2
  • statusBarItem.prominentHoverBackground#e83c3c80
  • tab.activeBackground#0a1a20
  • tab.activeBorder#4de8e8
  • tab.activeBorderTop#00000000
  • tab.activeForeground#4de8e8
  • tab.border#164955
  • tab.hoverBackground#0f3039
  • tab.hoverForeground#4de8e8
  • tab.inactiveBackground#0a1a20
  • tab.inactiveForeground#36a5a5
  • terminal.ansiBlack#0c2025
  • terminal.ansiBlue#4de8e8
  • terminal.ansiBrightBlack#0f3039
  • terminal.ansiBrightBlue#70ecec
  • terminal.ansiBrightCyan#45c6c6
  • terminal.ansiBrightGreen#4aff73
  • terminal.ansiBrightMagenta#d5a6f7
  • terminal.ansiBrightRed#f54545
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe066
  • terminal.ansiCyan#36a5a5
  • terminal.ansiGreen#39e75f
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#e83c3c
  • terminal.ansiWhite#d4f1f1
  • terminal.ansiYellow#ffda44
  • terminal.background#0a1a20
  • terminal.foreground#4de8e8
  • terminalCursor.background#0a1a20
  • terminalCursor.foreground#4de8e8
  • titleBar.activeBackground#0a1a20
  • titleBar.activeForeground#4de8e8
  • titleBar.border#164955
  • titleBar.inactiveBackground#0a1a20
  • titleBar.inactiveForeground#36a5a5
  • walkThrough.embeddedEditorBackground#0a1a20
  • welcomePage.buttonBackground#164955
  • welcomePage.buttonHoverBackground#0f3039

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#566b73
string, punctuation.definition.string#39e75f
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new#4de8e8bold
entity.name.function, support.function, meta.function-call.generic#70ecec
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.name.type.class, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#36a5a5bold
variable, variable.other, variable.parameter, variable.name, support.variable, entity.name.variable#52e5e5
constant, constant.numeric, constant.language, constant.character, constant.other, support.constant#c792ea
entity.name.tag, punctuation.definition.tag#4de8e8bold
entity.other.attribute-name#70ececitalic
invalid, invalid.illegal#e83c3c
invalid.deprecated#e83c3citalic underline
keyword.operator#89ddff
constant.character.escape#45c6c6
punctuation.definition, punctuation.definition.parameters, punctuation.definition.array, punctuation.section, punctuation.separator, punctuation.terminator#36a5a5
variable.other.property, variable.other.object.property, support.type.property-name#36c5c5
support.type.property-name.json#70ecec
support.type.property-name.css#70ecec
entity.other.attribute-name#36a5a5italic
markup.heading, entity.name.section.markdown#4de8e8bold
markup.bold#4de8e8bold
markup.italic#4de8e8italic
markup.underline.link, string.other.link#70ecec
markup.list#4de8e8
meta.method-call, meta.function-call entity.name.function, support.function.console#5dd5ec
support.function.builtin, support.function.magic, support.function.builtin.python#70ececitalic
entity.name.function.constructor, support.class.builtin#36a5a5bold
variable.parameter, meta.parameters variable, variable.parameter.function, meta.function.parameters variable#e0af68italic
meta.object-literal.key, variable.other.property, variable.other.object.property#36c5c5
variable.language, variable.language.this, variable.language.self, variable.language.super, variable.parameter.function.language.special.self.python#c792eaitalic
variable.other.constant, variable.other.enummember, constant.other.caps#c792ea
entity.name.type.parameter, meta.type.parameters, support.type.primitive, meta.type.annotation#52bebeitalic
entity.name.type.interface, support.type.interface#4ab5b5bold
entity.name.type.enum, support.type.enum#45a8a8bold
meta.decorator, punctuation.decorator, storage.type.annotation, meta.function.decorator.python, entity.name.function.decorator.python#ffda44italic
meta.template.expression, punctuation.definition.template-expression, meta.embedded#4de8e8
string.template punctuation.definition.string, punctuation.definition.string.template#45c6c6
string.regexp, keyword.operator.quantifier.regexp, constant.character.escape.backslash.regexp, keyword.control.anchor.regexp#45c6c6
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#c792eabold
string.quoted.module, meta.import string#39e75f
comment.block.documentation, comment.line.documentation, string.quoted.docstring.multi.python#7f9fa3italic
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc, variable.other.jsdoc#70ececitalic
entity.name.type.instance.jsdoc#52bebeitalic
entity.name.tag.tsx, support.class.component.tsx, support.class.component.jsx, entity.name.tag.js.jsx#36a5a5bold
entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#70ececitalic
storage.type.interface.ts, storage.type.type.ts, storage.type.class.ts#4de8e8bold
variable.language.this.ts, variable.language.this.tsx#c792eaitalic
string.quoted.single.python.f-string, string.quoted.double.python.f-string, meta.fstring.python#39e75f
meta.interpolation.python, meta.embedded.python#4de8e8
support.function.magic.python#70ececitalic
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss#ffda44
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss#70ecec
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#c792eaitalic
keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.percentage.css#f5a868
variable.css, variable.argument.css#70ecec
markup.inline.raw.markdown, markup.fenced_code.block.markdown#39e75f
fenced_code.block.language, markup.fenced_code.block.markdown fenced_code.block.language#70ecec
markup.quote.markdown, punctuation.definition.quote.begin.markdown#7f9fa3italic
entity.name.namespace, entity.name.type.module, entity.name.type.namespace#70ecec
entity.name.label#ffda44bold
entity.name.function.preprocessor, meta.preprocessor.macro, entity.name.other.preprocessor.macro#f5a868
storage.modifier.access, storage.modifier.visibility#c792eaitalic
constant.numeric.hex, constant.numeric.octal, constant.numeric.binary, constant.numeric.float#f5a868
support.type.property-name.json, string.json support.type.property-name.json#70ecec
source.json meta.structure.dictionary.json support.type.property-name.json#70ecec
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#36c5c5
entity.name.tag.yaml#70ecec
keyword.other.sql#c792eabold
markup.inserted, meta.diff.header.to-file#39e75f
markup.deleted, meta.diff.header.from-file#e83c3c
markup.changed#ffda44