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.activeBorder#163f54
  • activityBar.background#EAE1D7
  • activityBar.foreground#0D2F42
  • activityBar.inactiveForeground#335260
  • activityBarBadge.background#163f54
  • activityBarBadge.foreground#F7F3EE
  • badge.background#163f54
  • badge.foreground#F7F3EE
  • breadcrumb.activeSelectionForeground#163f54
  • breadcrumb.focusForeground#0D2F42
  • breadcrumb.foreground#335260
  • breadcrumbPicker.background#EAE1D7
  • button.background#163f54
  • button.foreground#F7F3EE
  • button.hoverBackground#335260
  • descriptionForeground#335260
  • diffEditor.insertedTextBackground#177c5520
  • diffEditor.removedTextBackground#A8373220
  • dropdown.background#EAE1D7
  • dropdown.border#BD8C68
  • dropdown.foreground#0D2F42
  • editor.background#F7F3EE
  • editor.findMatchBackground#6A4A0060
  • editor.findMatchHighlightBackground#6A4A0030
  • editor.foreground#0D2F42
  • editor.hoverHighlightBackground#7A9B9E30
  • editor.inactiveSelectionBackground#CFAD8E40
  • editor.lineHighlightBackground#DBC9B680
  • editor.lineHighlightBorder#DBC9B600
  • editor.selectionBackground#CFAD8E80
  • editor.selectionHighlightBackground#CFAD8E50
  • editor.wordHighlightBackground#7A9B9E30
  • editor.wordHighlightStrongBackground#7A9B9E50
  • editorBracketMatch.background#7A9B9E30
  • editorBracketMatch.border#163f54
  • editorCursor.background#F7F3EE
  • editorCursor.foreground#163f54
  • editorError.foreground#A83732
  • editorGroup.border#DBC9B6
  • editorGroupHeader.noTabsBackground#F7F3EE
  • editorGroupHeader.tabsBackground#EAE1D7
  • editorGutter.addedBackground#177c55
  • editorGutter.background#F7F3EE
  • editorGutter.deletedBackground#A83732
  • editorGutter.modifiedBackground#6A4A00
  • editorHint.foreground#76716B
  • editorIndentGuide.activeBackground1#BD8C68
  • editorIndentGuide.background1#DBC9B6
  • editorInfo.foreground#0082B1
  • editorLineNumber.activeForeground#163f54
  • editorLineNumber.foreground#BD8C68
  • editorRuler.foreground#DBC9B6
  • editorWarning.foreground#6A4A00
  • editorWhitespace.foreground#CFAD8E
  • errorForeground#A83732
  • focusBorder#163f54
  • foreground#0D2F42
  • gitDecoration.conflictingResourceForeground#CA6435
  • gitDecoration.deletedResourceForeground#A83732
  • gitDecoration.ignoredResourceForeground#BD8C68
  • gitDecoration.modifiedResourceForeground#6A4A00
  • gitDecoration.untrackedResourceForeground#177c55
  • input.background#EAE1D7
  • input.border#BD8C68
  • input.foreground#0D2F42
  • input.placeholderForeground#835A49
  • inputOption.activeBorder#163f54
  • list.activeSelectionBackground#BD8C6880
  • list.activeSelectionForeground#0D2F42
  • list.focusBackground#BD8C6880
  • list.highlightForeground#163f54
  • list.hoverBackground#DBC9B680
  • list.inactiveSelectionBackground#CFAD8E60
  • list.inactiveSelectionForeground#0D2F42
  • menu.background#EAE1D7
  • menu.foreground#0D2F42
  • menu.selectionBackground#BD8C6880
  • menu.selectionForeground#0D2F42
  • menu.separatorBackground#DBC9B6
  • notificationCenter.border#BD8C68
  • notificationLink.foreground#163f54
  • notifications.background#EAE1D7
  • notifications.foreground#0D2F42
  • panel.background#F7F3EE
  • panel.border#DBC9B6
  • panelTitle.activeBorder#163f54
  • panelTitle.activeForeground#0D2F42
  • panelTitle.inactiveForeground#335260
  • peekView.border#163f54
  • peekViewEditor.background#EAE1D7
  • peekViewResult.background#EAE1D7
  • peekViewTitle.background#DBC9B6
  • progressBar.background#163f54
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#BD8C68
  • scrollbarSlider.background#BD8C6850
  • scrollbarSlider.hoverBackground#BD8C6880
  • selection.background#BD8C6850
  • sideBar.background#EAE1D7
  • sideBar.border#DBC9B6
  • sideBar.foreground#0D2F42
  • sideBarSectionHeader.background#DBC9B6
  • sideBarSectionHeader.foreground#0D2F42
  • sideBarTitle.foreground#0D2F42
  • statusBar.background#DBC9B6
  • statusBar.border#CFAD8E
  • statusBar.debuggingBackground#A83732
  • statusBar.debuggingForeground#F7F3EE
  • statusBar.foreground#0D2F42
  • statusBar.noFolderBackground#DBC9B6
  • statusBarItem.hoverBackground#CFAD8E80
  • statusBarItem.prominentBackground#163f54
  • statusBarItem.prominentHoverBackground#335260
  • tab.activeBackground#F7F3EE
  • tab.activeBorderTop#163f54
  • tab.activeForeground#0D2F42
  • tab.border#DBC9B6
  • tab.hoverBackground#DBC9B6
  • tab.inactiveBackground#EAE1D7
  • tab.inactiveForeground#335260
  • terminal.ansiBlack#0D2F42
  • terminal.ansiBlue#0082B1
  • terminal.ansiBrightBlack#335260
  • terminal.ansiBrightBlue#6893AE
  • terminal.ansiBrightCyan#6A8C8F
  • terminal.ansiBrightGreen#678B6A
  • terminal.ansiBrightMagenta#6064A3
  • terminal.ansiBrightRed#C56860
  • terminal.ansiBrightWhite#A89F8D
  • terminal.ansiBrightYellow#C49A3E
  • terminal.ansiCyan#163f54
  • terminal.ansiGreen#177c55
  • terminal.ansiMagenta#253E82
  • terminal.ansiRed#A83732
  • terminal.ansiWhite#835A49
  • terminal.ansiYellow#6A4A00
  • terminal.background#F7F3EE
  • terminal.foreground#0D2F42
  • titleBar.activeBackground#EAE1D7
  • titleBar.activeForeground#0D2F42
  • titleBar.inactiveBackground#F7F3EE
  • titleBar.inactiveForeground#335260
  • widget.shadow#0D2F4220

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#76716Bitalic
string, string.quoted, punctuation.definition.string#177c55
constant.character.escape, string.regexp#552823
constant.numeric, constant.language.boolean, constant.language#6A4A00
constant, variable.other.constant, support.constant#CA6435
keyword, keyword.control, storage, storage.type, storage.modifier#A83732
keyword.operator, punctuation.separator, punctuation.terminator#76716B
entity.name.function, support.function, meta.function-call, variable.function#0082B1
variable.parameter#552823
entity.name.type, entity.name.class, entity.name.namespace, support.type, support.class#253E82
variable, variable.other#0D2F42
variable.other.property, variable.other.member, meta.object-literal.key, support.type.property-name#552823
entity.name.tag, meta.tag#A83732
entity.other.attribute-name#6A4A00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css#A83732
support.type.property-name.css#0082B1
support.constant.property-value.css, constant.other.color.rgb-value#177c55
markup.heading, entity.name.section#253E82bold
punctuation.definition.heading.markdown#BD8C68
markup.bold#A83732bold
punctuation.definition.bold.markdown#BD8C68
markup.italic#6A4A00italic
punctuation.definition.italic.markdown#BD8C68
punctuation.definition.list.begin.markdown, markup.list#163f54
markup.underline.link, string.other.link#163f54
markup.quote#76716Bitalic
markup.inline.raw, markup.raw.inline#552823
markup.inserted#177c55
markup.deleted#A83732
invalid, invalid.illegal, invalid.deprecated#A83732italic