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

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#2D5016bold
keyword.operator, punctuation#696969
entity.name.function, meta.function-call, support.function#87CEEB
variable, meta.definition.variable, support.variable#A0522D
entity.name.type, entity.name.class, support.type, support.class#483D8Bbold
support.type.property-name, meta.property-name, meta.object-literal.key#8B4513
entity.name.tag, meta.tag#2D5016
entity.other.attribute-name#87CEEB
keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.as#6B5B95
constant, variable.other.constant#8B4513bold
markup.heading, entity.name.section#2D5016bold
markup.bold#36454Fbold
markup.italic#36454Fitalic
markup.underline.link#87CEEBunderline
markup.inline.raw, markup.raw#A0522D
support.type.property-name.json#8B4513
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#2D5016
support.type.property-name.css#87CEEB
support.constant.property-value.css, constant.numeric.css#FFA07A
invalid, invalid.illegal#FF6B6Bunderline
invalid.deprecated#808080strikethrough

Shiki preview

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

Loading...

Studio Ghibli Theme - Coding Theme