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#2D5016
  • activityBar.border#2D5016
  • activityBar.foreground#F5F5F5
  • activityBar.inactiveForeground#F5F5F580
  • activityBarBadge.background#FF6B6B
  • activityBarBadge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#F5F5F5
  • breadcrumb.focusForeground#F5F5F5
  • breadcrumb.foreground#A9A9A980
  • button.background#4A7C59
  • button.foreground#FFFFFF
  • button.hoverBackground#8FBC8F
  • diffEditor.insertedTextBackground#8FBC8F20
  • diffEditor.removedTextBackground#FF6B6B20
  • dropdown.background#1C1C3E
  • dropdown.border#2F4F4F
  • dropdown.foreground#F5F5F5
  • editor.background#191970
  • editor.foreground#F5F5F5
  • editor.lineHighlightBackground#00008B20
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#87CEEB40
  • editor.selectionHighlightBackground#B6E5F830
  • editorBracketHighlight.foreground1#8FBC8F
  • editorBracketHighlight.foreground2#87CEEB
  • editorBracketHighlight.foreground3#FFB6C1
  • editorBracketHighlight.foreground4#FFA07A
  • editorBracketHighlight.foreground5#6B5B95
  • editorBracketHighlight.foreground6#B0E0E6
  • editorBracketMatch.background#87CEEB40
  • editorBracketMatch.border#87CEEB
  • editorCursor.foreground#87CEEB
  • editorError.foreground#FF6B6B
  • editorGutter.addedBackground#8FBC8F
  • editorGutter.deletedBackground#FF6B6B
  • editorGutter.modifiedBackground#FFA07A
  • editorInfo.foreground#87CEEB
  • editorOverviewRuler.errorForeground#FF6B6B
  • editorOverviewRuler.infoForeground#87CEEB
  • editorOverviewRuler.warningForeground#FFA07A
  • editorWarning.foreground#FFA07A
  • editorWhitespace.foreground#F5F5F540
  • editorWidget.background#252550
  • editorWidget.border#2F4F4F
  • extensionButton.prominentBackground#4A7C59
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#8FBC8F
  • gitDecoration.addedResourceForeground#8FBC8F
  • gitDecoration.conflictingResourceForeground#FFB6C1
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.ignoredResourceForeground#69696980
  • gitDecoration.modifiedResourceForeground#FFA07A
  • gitDecoration.untrackedResourceForeground#B0E0E6
  • input.background#252550
  • input.border#2F4F4F
  • input.foreground#F5F5F5
  • input.placeholderForeground#A9A9A980
  • inputOption.activeBorder#87CEEB
  • list.activeSelectionBackground#87CEEB40
  • list.activeSelectionForeground#F5F5F5
  • list.highlightForeground#87CEEB
  • list.hoverBackground#87CEEB20
  • list.inactiveSelectionBackground#483D8B30
  • notification.background#252550
  • notification.buttonBackground#4A7C59
  • notification.buttonForeground#FFFFFF
  • notification.errorBackground#FF6B6B
  • notification.foreground#F5F5F5
  • notification.infoBackground#87CEEB
  • notification.warningBackground#FFA07A
  • pickerGroup.border#2F4F4F
  • pickerGroup.foreground#87CEEB
  • progressBar.background#87CEEB
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#F5F5F560
  • scrollbarSlider.background#F5F5F520
  • scrollbarSlider.hoverBackground#F5F5F540
  • sideBar.background#1C1C3E
  • sideBar.border#2F4F4F
  • sideBar.foreground#F5F5F5
  • sideBarSectionHeader.background#252550
  • sideBarSectionHeader.foreground#8FBC8F
  • sideBarTitle.foreground#8FBC8F
  • statusBar.background#483D8B
  • statusBar.debuggingBackground#FF6B6B
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#F5F5F5
  • statusBar.noFolderBackground#6B5B95
  • tab.activeBackground#191970
  • tab.activeForeground#F5F5F5
  • tab.border#2F4F4F
  • tab.inactiveBackground#1C1C3E
  • tab.inactiveForeground#F5F5F580
  • terminal.ansiBlack#36454F
  • terminal.ansiBlue#87CEEB
  • terminal.ansiBrightBlack#696969
  • terminal.ansiBrightBlue#B6E5F8
  • terminal.ansiBrightCyan#8FBC8F
  • terminal.ansiBrightGreen#4A7C59
  • terminal.ansiBrightMagenta#483D8B
  • terminal.ansiBrightRed#FFB6C1
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#D2691E
  • terminal.ansiCyan#B0E0E6
  • terminal.ansiGreen#8FBC8F
  • terminal.ansiMagenta#6B5B95
  • terminal.ansiRed#FF6B6B
  • terminal.ansiWhite#F5F5F5
  • terminal.ansiYellow#FFA07A
  • terminal.background#191970
  • terminal.foreground#F5F5F5
  • titleBar.activeBackground#191970
  • titleBar.activeForeground#F5F5F5
  • titleBar.inactiveBackground#1C1C3E
  • titleBar.inactiveForeground#F5F5F580
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8FBC8Fitalic
string, string.quoted, string.template#FFA07A—
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined#FFB6C1—
keyword, storage.type, storage.modifier#8FBC8Fbold
keyword.operator, punctuation#A9A9A9—
entity.name.function, meta.function-call, support.function#87CEEB—
variable, meta.definition.variable, support.variable#D2691E—
entity.name.type, entity.name.class, support.type, support.class#6B5B95bold
support.type.property-name, meta.property-name, meta.object-literal.key#B0E0E6—
entity.name.tag, meta.tag#8FBC8F—
entity.other.attribute-name#87CEEB—
keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.as#FFB6C1—
constant, variable.other.constant#FFA07Abold
markup.heading, entity.name.section#87CEEBbold
markup.bold#F5F5F5bold
markup.italic#F5F5F5italic
markup.underline.link#87CEEBunderline
markup.inline.raw, markup.raw#D2691E—
support.type.property-name.json#B0E0E6—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8FBC8F—
support.type.property-name.css#87CEEB—
support.constant.property-value.css, constant.numeric.css#FFA07A—
invalid, invalid.illegal#FF6B6Bunderline
invalid.deprecated#696969strikethrough