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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Studio Ghibli Theme - Coding Theme