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#E8E2D8
  • activityBar.border#E0D8CC
  • activityBar.foreground#5A7A68
  • activityBar.inactiveForeground#9A9588
  • activityBarBadge.background#D47040
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D47040
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#4A4540
  • breadcrumb.background#F8F4ED
  • breadcrumb.focusForeground#4A4540
  • breadcrumb.foreground#8A8580
  • breadcrumbPicker.background#F0EBE2
  • button.background#5A8A68
  • button.foreground#FFFFFF
  • button.hoverBackground#6A9A78
  • button.secondaryBackground#D0C8BC
  • button.secondaryForeground#4A4540
  • button.secondaryHoverBackground#C0B8AC
  • diffEditor.insertedTextBackground#4A8A5822
  • diffEditor.removedTextBackground#A8585822
  • dropdown.background#FFFFFF
  • dropdown.border#D0C8BC
  • dropdown.foreground#4A4540
  • editor.background#F8F4ED
  • editor.findMatchBackground#E8B86044
  • editor.findMatchBorder#D4A040
  • editor.findMatchHighlightBackground#E8B86033
  • editor.foreground#4A4540
  • editor.inactiveSelectionBackground#A8C8E822
  • editor.lineHighlightBackground#EDE8E0
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#A8C8E855
  • editor.selectionHighlightBackground#A8C8E833
  • editor.wordHighlightBackground#B8D4F033
  • editor.wordHighlightStrongBackground#B8D4F055
  • editorBracketMatch.background#E8B86033
  • editorBracketMatch.border#D4A040
  • editorCursor.background#F8F4ED
  • editorCursor.foreground#D47040
  • editorError.foreground#A85858
  • editorGroupHeader.tabsBackground#F0EBE2
  • editorGroupHeader.tabsBorder#E0D8CC
  • editorHoverWidget.background#F8F4ED
  • editorHoverWidget.border#D0C8BC
  • editorHoverWidget.foreground#4A4540
  • editorIndentGuide.activeBackground#B8A898
  • editorIndentGuide.background#DCD4C8
  • editorInfo.foreground#4878A8
  • editorLineNumber.activeForeground#6A6560
  • editorLineNumber.foreground#A8A098
  • editorSuggestWidget.background#F8F4ED
  • editorSuggestWidget.border#D0C8BC
  • editorSuggestWidget.foreground#4A4540
  • editorSuggestWidget.highlightForeground#B88A28
  • editorSuggestWidget.selectedBackground#E0D8CC
  • editorWarning.foreground#B88A28
  • editorWhitespace.foreground#D0C8BC66
  • editorWidget.background#F0EBE2
  • editorWidget.border#D0C8BC
  • editorWidget.foreground#4A4540
  • gitDecoration.addedResourceForeground#4A8A58
  • gitDecoration.conflictingResourceForeground#8A5888
  • gitDecoration.deletedResourceForeground#A85858
  • gitDecoration.ignoredResourceForeground#A8A098
  • gitDecoration.modifiedResourceForeground#B88A28
  • gitDecoration.untrackedResourceForeground#388888
  • input.background#FFFFFF
  • input.border#D0C8BC
  • input.foreground#4A4540
  • input.placeholderForeground#A8A098
  • inputOption.activeBackground#A8C8E855
  • inputOption.activeForeground#4A4540
  • list.activeSelectionBackground#C8D8E0
  • list.activeSelectionForeground#4A4540
  • list.errorForeground#A85858
  • list.focusBackground#C8D8E0
  • list.highlightForeground#B88A28
  • list.hoverBackground#E8E2D8
  • list.hoverForeground#4A4540
  • list.inactiveSelectionBackground#DCD4C8
  • list.inactiveSelectionForeground#4A4540
  • list.warningForeground#B88A28
  • minimap.background#F0EBE2
  • minimap.findMatchHighlight#E8B86088
  • minimap.selectionHighlight#A8C8E888
  • notificationCenterHeader.background#E8E2D8
  • notifications.background#F0EBE2
  • notifications.border#D0C8BC
  • notifications.foreground#4A4540
  • panel.background#F0EBE2
  • panel.border#E0D8CC
  • panelTitle.activeBorder#5A8A68
  • panelTitle.activeForeground#4A4540
  • panelTitle.inactiveForeground#8A8580
  • quickInput.background#F0EBE2
  • quickInput.foreground#4A4540
  • quickInputList.focusBackground#E0D8CC
  • quickInputList.focusForeground#4A4540
  • scrollbar.shadow#00000011
  • scrollbarSlider.activeBackground#A8988888
  • scrollbarSlider.background#B8A89844
  • scrollbarSlider.hoverBackground#A8988866
  • sideBar.background#F0EBE2
  • sideBar.border#E0D8CC
  • sideBar.foreground#5A5550
  • sideBarSectionHeader.background#E8E2D8
  • sideBarSectionHeader.foreground#5A5550
  • sideBarTitle.foreground#4A4540
  • statusBar.background#E8E2D8
  • statusBar.border#E0D8CC
  • statusBar.debuggingBackground#A85858
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#5A5550
  • statusBar.noFolderBackground#D0C8BC
  • statusBarItem.hoverBackground#DCD4C8
  • statusBarItem.remoteBackground#5A8A68
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#F8F4ED
  • tab.activeBorder#00000000
  • tab.activeBorderTop#5A8A68
  • tab.activeForeground#4A4540
  • tab.border#E0D8CC
  • tab.hoverBackground#EDE8E0
  • tab.inactiveBackground#F0EBE2
  • tab.inactiveForeground#8A8580
  • terminal.ansiBlack#4A4540
  • terminal.ansiBlue#4878A8
  • terminal.ansiBrightBlack#7A7570
  • terminal.ansiBrightBlue#5890C0
  • terminal.ansiBrightCyan#48A0A0
  • terminal.ansiBrightGreen#5AA868
  • terminal.ansiBrightMagenta#A870A0
  • terminal.ansiBrightRed#C87070
  • terminal.ansiBrightWhite#F8F4ED
  • terminal.ansiBrightYellow#D4A838
  • terminal.ansiCyan#388888
  • terminal.ansiGreen#4A8A58
  • terminal.ansiMagenta#8A5888
  • terminal.ansiRed#A85858
  • terminal.ansiWhite#E8E2D8
  • terminal.ansiYellow#B88A28
  • terminal.background#F0EBE2
  • terminal.foreground#4A4540
  • terminalCursor.foreground#D47040
  • titleBar.activeBackground#E8E2D8
  • titleBar.activeForeground#4A4540
  • titleBar.border#E0D8CC
  • titleBar.inactiveBackground#E8E2D8
  • titleBar.inactiveForeground#8A8580
  • tree.indentGuidesStroke#D0C8BC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A09890italic
string, string.quoted#B07828—
constant.character.escape#C88838—
string.template, punctuation.definition.string.template#B07828—
punctuation.definition.template-expression#8A5888—
constant.numeric#C86050—
constant.language#C86050italic
constant.other, variable.other.constant#B07828—
keyword, keyword.control#8A5888—
keyword.operator#388888—
storage, storage.type#8A5888—
storage.modifier#8A5888italic
entity.name.function, meta.function-call, support.function#4A8A58—
variable.parameter, meta.parameter#B88A28italic
entity.name.class, entity.name.type.class, support.class#4878A8—
entity.other.inherited-class#5890C0italic
entity.name.type, support.type, support.type.primitive#388888—
entity.name.type.interface#388888italic
variable, variable.other#4A4540—
variable.other.property, variable.other.object.property, meta.object-literal.key#5A9A68—
variable.language.this, variable.language.self#C86050italic
entity.name.tag#A85858—
entity.other.attribute-name#B07828italic
support.class.component, entity.name.tag.js, entity.name.tag support.class.component#4878A8—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#B07828—
support.type.property-name.css#4A8A58—
support.constant.property-value.css#B88A28—
keyword.other.unit.css#C86050—
entity.other.attribute-name.pseudo-class.css#8A5888—
support.type.property-name.json#4A8A58—
string.quoted.double.json#B07828—
heading.1.markdown, heading.2.markdown, heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown, markup.heading#4878A8bold
markup.bold#B88A28bold
markup.italic#8A5888italic
markup.underline.link#388888—
markup.inline.raw, markup.fenced_code#4A8A58—
markup.quote#A09890italic
punctuation#7A7570—
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments#7A7570—
string.regexp#388888—
meta.decorator, meta.annotation#B07828italic
keyword.control.import, keyword.control.export, keyword.control.from#8A5888—
invalid, invalid.illegal#A85858underline
invalid.deprecated#D47040strikethrough
Ghibli Inspired Theme by Daniel Biedma - VS Code Theme