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#daebed
  • activityBar.border#cde0e2
  • activityBar.foreground#0a4a55
  • activityBar.inactiveForeground#427a7e
  • activityBarBadge.background#06858e
  • activityBarBadge.foreground#ffffff
  • badge.background#06858e
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#06858e
  • breadcrumb.focusForeground#0a4a55
  • breadcrumb.foreground#427a7e
  • breadcrumbPicker.background#f2f7f7
  • button.background#06858e
  • button.foreground#ffffff
  • button.hoverBackground#1e9ea6
  • button.secondaryBackground#d9eaea
  • button.secondaryForeground#0a4a55
  • button.secondaryHoverBackground#c9e5e7
  • debugToolBar.background#f2f7f7
  • debugToolBar.border#cde0e2
  • descriptionForeground#427a7e
  • dropdown.background#f2f7f7
  • dropdown.border#cde0e2
  • dropdown.foreground#0a4a55
  • editor.background#e8f0f0
  • editor.findMatchBackground#06858e30
  • editor.findMatchHighlightBackground#06858e20
  • editor.foreground#0a4a55
  • editor.lineHighlightBackground#d9eaea50
  • editor.lineHighlightBorder#d9eaea00
  • editor.selectionBackground#c9e5e780
  • editor.selectionHighlightBackground#d9eaea80
  • editor.wordHighlightBackground#d9eaea80
  • editor.wordHighlightStrongBackground#c9e5e780
  • editorBracketMatch.background#c9e5e750
  • editorBracketMatch.border#06858e
  • editorCursor.foreground#06858e
  • editorError.foreground#d13838
  • editorGroup.border#cde0e2
  • editorGroup.dropBackground#c9e5e730
  • editorGroupHeader.tabsBackground#daebed
  • editorGroupHeader.tabsBorder#cde0e2
  • editorHint.foreground#06858e
  • editorHoverWidget.background#f2f7f7
  • editorHoverWidget.border#cde0e2
  • editorIndentGuide.activeBackground#cde0e2
  • editorIndentGuide.background#cde0e270
  • editorInfo.foreground#06858e
  • editorLineNumber.activeForeground#0a4a55
  • editorLineNumber.foreground#427a7e80
  • editorRuler.foreground#cde0e2
  • editorSuggestWidget.background#f2f7f7
  • editorSuggestWidget.border#cde0e2
  • editorSuggestWidget.foreground#0a4a55
  • editorSuggestWidget.highlightForeground#06858e
  • editorSuggestWidget.selectedBackground#d9eaea
  • editorWarning.foreground#ffaa00
  • editorWidget.background#f2f7f7
  • editorWidget.border#cde0e2
  • editorWidget.resizeBorder#06858e
  • extensionButton.prominentBackground#06858e
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#1e9ea6
  • focusBorder#06858e
  • foreground#0a4a55
  • gitDecoration.addedResourceForeground#27ae60
  • gitDecoration.conflictingResourceForeground#8e44ad
  • gitDecoration.deletedResourceForeground#d13838
  • gitDecoration.ignoredResourceForeground#427a7e80
  • gitDecoration.modifiedResourceForeground#f39c12
  • gitDecoration.submoduleResourceForeground#06858e
  • gitDecoration.untrackedResourceForeground#37b6be
  • input.background#d9eaea
  • input.border#cde0e2
  • input.foreground#0a4a55
  • input.placeholderForeground#427a7e80
  • input.selectionBackground#c9e5e7
  • inputOption.activeBorder#06858e
  • inputValidation.errorBackground#d13838
  • inputValidation.errorBorder#d13838
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#06858e
  • inputValidation.infoBorder#06858e
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#ffaa00
  • inputValidation.warningBorder#ffaa00
  • inputValidation.warningForeground#ffffff
  • list.activeSelectionBackground#c9e5e7
  • list.activeSelectionForeground#0a4a55
  • list.dropBackground#c9e5e750
  • list.focusBackground#c9e5e780
  • list.focusForeground#0a4a55
  • list.highlightForeground#06858e
  • list.hoverBackground#e0eaea
  • list.hoverForeground#0a4a55
  • list.inactiveSelectionBackground#d9eaea
  • list.inactiveSelectionForeground#0a4a55
  • listFilterWidget.background#f2f7f7
  • listFilterWidget.noMatchesOutline#d13838
  • listFilterWidget.outline#06858e
  • menu.background#f2f7f7
  • menu.foreground#0a4a55
  • menu.selectionBackground#d9eaea
  • menu.selectionForeground#0a4a55
  • menu.separatorBackground#cde0e2
  • menubar.selectionBackground#d9eaea
  • menubar.selectionForeground#0a4a55
  • notificationCenter.border#cde0e2
  • notificationCenterHeader.background#daebed
  • notificationCenterHeader.foreground#0a4a55
  • notificationLink.foreground#06858e
  • notifications.background#f2f7f7
  • notifications.border#cde0e2
  • notifications.foreground#0a4a55
  • notificationToast.border#cde0e2
  • panel.background#e8f0f0
  • panel.border#cde0e2
  • panelTitle.activeBorder#06858e
  • panelTitle.activeForeground#0a4a55
  • panelTitle.inactiveForeground#427a7e
  • peekView.border#06858e
  • peekViewEditor.background#e0eaea
  • peekViewEditor.matchHighlightBackground#06858e40
  • peekViewResult.background#daebed
  • peekViewResult.fileForeground#0a4a55
  • peekViewResult.lineForeground#427a7e
  • peekViewResult.matchHighlightBackground#06858e40
  • peekViewResult.selectionBackground#c9e5e7
  • peekViewResult.selectionForeground#0a4a55
  • peekViewTitle.background#c9e5e7
  • peekViewTitleDescription.foreground#427a7e
  • peekViewTitleLabel.foreground#0a4a55
  • problemsErrorIcon.foreground#d13838
  • problemsInfoIcon.foreground#06858e
  • problemsWarningIcon.foreground#ffaa00
  • progressBar.background#06858e
  • selection.background#c9e5e780
  • settings.checkboxBackground#f2f7f7
  • settings.checkboxBorder#cde0e2
  • settings.checkboxForeground#0a4a55
  • settings.dropdownBackground#f2f7f7
  • settings.dropdownBorder#cde0e2
  • settings.dropdownForeground#0a4a55
  • settings.headerForeground#0a4a55
  • settings.modifiedItemIndicator#06858e
  • settings.numberInputBackground#f2f7f7
  • settings.numberInputBorder#cde0e2
  • settings.numberInputForeground#0a4a55
  • settings.textInputBackground#f2f7f7
  • settings.textInputBorder#cde0e2
  • settings.textInputForeground#0a4a55
  • sideBar.background#daebed
  • sideBar.border#cde0e2
  • sideBar.foreground#0a4a55
  • sideBarSectionHeader.background#c9e5e7
  • sideBarSectionHeader.border#cde0e2
  • sideBarSectionHeader.foreground#0a4a55
  • sideBarTitle.foreground#0a4a55
  • statusBar.background#06858e
  • statusBar.border#06858e
  • statusBar.debuggingBackground#37b6be
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#427a7e
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#06858e40
  • statusBarItem.hoverBackground#06858e80
  • statusBarItem.prominentBackground#d13838
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.prominentHoverBackground#d1383880
  • tab.activeBackground#e8f0f0
  • tab.activeBorder#06858e
  • tab.activeBorderTop#00000000
  • tab.activeForeground#0a4a55
  • tab.border#cde0e2
  • tab.hoverBackground#e0eaea
  • tab.hoverForeground#0a4a55
  • tab.inactiveBackground#daebed
  • tab.inactiveForeground#427a7e
  • terminal.ansiBlack#2c3e50
  • terminal.ansiBlue#06858e
  • terminal.ansiBrightBlack#7f8c8d
  • terminal.ansiBrightBlue#1e9ea6
  • terminal.ansiBrightCyan#5dc7ce
  • terminal.ansiBrightGreen#2ecc71
  • terminal.ansiBrightMagenta#9b59b6
  • terminal.ansiBrightRed#e74c3c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f1c40f
  • terminal.ansiCyan#37b6be
  • terminal.ansiGreen#27ae60
  • terminal.ansiMagenta#8e44ad
  • terminal.ansiRed#d13838
  • terminal.ansiWhite#ecf0f1
  • terminal.ansiYellow#f39c12
  • terminal.background#e8f0f0
  • terminal.foreground#0a4a55
  • terminalCursor.background#e8f0f0
  • terminalCursor.foreground#06858e
  • titleBar.activeBackground#daebed
  • titleBar.activeForeground#0a4a55
  • titleBar.border#cde0e2
  • titleBar.inactiveBackground#e0eaea
  • titleBar.inactiveForeground#427a7e
  • walkThrough.embeddedEditorBackground#daebed
  • welcomePage.buttonBackground#d9eaea
  • welcomePage.buttonHoverBackground#c9e5e7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#758a8e
string, punctuation.definition.string#27ae60
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new#06858ebold
entity.name.function, support.function, meta.function-call.generic#1e9ea6
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#37b6bebold
variable, variable.other, variable.parameter, variable.name, support.variable, entity.name.variable#074952
constant, constant.numeric, constant.language, constant.character, constant.other, support.constant#8e44ad
entity.name.tag, punctuation.definition.tag#06858ebold
entity.other.attribute-name#1e9ea6italic
invalid, invalid.illegal#d13838
invalid.deprecated#d13838italic underline
keyword.operator#0891a0
constant.character.escape#5dc7ce
punctuation.definition, punctuation.definition.parameters, punctuation.definition.array, punctuation.section, punctuation.separator, punctuation.terminator#427a7e
variable.other.property, variable.other.object.property, support.type.property-name#116670
support.type.property-name.json#1e9ea6
support.type.property-name.css#1e9ea6
entity.other.attribute-name#37b6beitalic
markup.heading, entity.name.section.markdown#06858ebold
markup.bold#0a4a55bold
markup.italic#0a4a55italic
markup.underline.link, string.other.link#1e9ea6
markup.list#0a4a55
meta.method-call, meta.function-call entity.name.function, support.function.console#2bb2bb
support.function.builtin, support.function.magic, support.function.builtin.python#1e9ea6italic
entity.name.function.constructor, support.class.builtin#37b6bebold
variable.parameter, meta.parameters variable, variable.parameter.function, meta.function.parameters variable#b8860bitalic
meta.object-literal.key, variable.other.property, variable.other.object.property#116670
variable.language, variable.language.this, variable.language.self, variable.language.super, variable.parameter.function.language.special.self.python#8e44aditalic
variable.other.constant, variable.other.enummember, constant.other.caps#8e44ad
entity.name.type.parameter, meta.type.parameters, support.type.primitive, meta.type.annotation#45cad2italic
entity.name.type.interface, support.type.interface#3dc4ccbold
entity.name.type.enum, support.type.enum#3ab8c0bold
meta.decorator, punctuation.decorator, storage.type.annotation, meta.function.decorator.python, entity.name.function.decorator.python#d68000italic
meta.template.expression, punctuation.definition.template-expression, meta.embedded#06858e
string.template punctuation.definition.string, punctuation.definition.string.template#1e9ea6
string.regexp, keyword.operator.quantifier.regexp, constant.character.escape.backslash.regexp, keyword.control.anchor.regexp#1e9ea6
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#8e44adbold
string.quoted.module, meta.import string#27ae60
comment.block.documentation, comment.line.documentation, string.quoted.docstring.multi.python#6a8a8ditalic
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc, variable.other.jsdoc#1e9ea6italic
entity.name.type.instance.jsdoc#45cad2italic
entity.name.tag.tsx, support.class.component.tsx, support.class.component.jsx, entity.name.tag.js.jsx#37b6bebold
entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#1e9ea6italic
storage.type.interface.ts, storage.type.type.ts, storage.type.class.ts#06858ebold
variable.language.this.ts, variable.language.this.tsx#8e44aditalic
string.quoted.single.python.f-string, string.quoted.double.python.f-string, meta.fstring.python#27ae60
meta.interpolation.python, meta.embedded.python#06858e
support.function.magic.python#1e9ea6italic
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss#d68000
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss#1e9ea6
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#8e44aditalic
keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.percentage.css#e07b39
variable.css, variable.argument.css#1e9ea6
markup.inline.raw.markdown, markup.fenced_code.block.markdown#27ae60
fenced_code.block.language, markup.fenced_code.block.markdown fenced_code.block.language#1e9ea6
markup.quote.markdown, punctuation.definition.quote.begin.markdown#6a8a8ditalic
entity.name.namespace, entity.name.type.module, entity.name.type.namespace#1e9ea6
entity.name.label#d68000bold
entity.name.function.preprocessor, meta.preprocessor.macro, entity.name.other.preprocessor.macro#e07b39
storage.modifier.access, storage.modifier.visibility#8e44aditalic
constant.numeric.hex, constant.numeric.octal, constant.numeric.binary, constant.numeric.float#e07b39
support.type.property-name.json, string.json support.type.property-name.json#1e9ea6
source.json meta.structure.dictionary.json support.type.property-name.json#1e9ea6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1a7a85
entity.name.tag.yaml#1e9ea6
keyword.other.sql#8e44adbold
markup.inserted, meta.diff.header.to-file#27ae60
markup.deleted, meta.diff.header.from-file#d13838
markup.changed#d68000