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#6B4800
  • activityBar.border#4A3000
  • activityBar.foreground#F8ECC8
  • activityBar.inactiveForeground#C09860
  • activityBarBadge.background#C89000
  • activityBarBadge.foreground#FDF8EB
  • badge.background#C89000
  • badge.foreground#FDF8EB
  • breadcrumb.activeSelectionForeground#C89000
  • breadcrumb.background#FDF8EB
  • breadcrumb.focusForeground#A07000
  • breadcrumb.foreground#8A7850
  • button.background#C89000
  • button.foreground#FDF8EB
  • button.hoverBackground#A87800
  • button.secondaryBackground#EEE0B0
  • button.secondaryForeground#2D2810
  • button.secondaryHoverBackground#E0D0A0
  • contrastBorder#00000000
  • diffEditor.insertedLineBackground#E8C85018
  • diffEditor.insertedTextBackground#E8C85030
  • diffEditor.removedLineBackground#CC110010
  • diffEditor.removedTextBackground#CC110020
  • dropdown.background#F5EFE0
  • dropdown.border#D8C898
  • dropdown.foreground#2D2810
  • dropdown.listBackground#F5EFE0
  • editor.background#FDF8EB
  • editor.findMatchBackground#D06818AA
  • editor.findMatchHighlightBackground#D0681840
  • editor.foreground#2D2810
  • editor.inactiveSelectionBackground#E8C85040
  • editor.lineHighlightBackground#F5ECDC
  • editor.rangeHighlightBackground#E8C85030
  • editor.selectionBackground#E8C85080
  • editor.selectionHighlightBackground#E8C85050
  • editor.wordHighlightBackground#E8C85060
  • editor.wordHighlightStrongBackground#D8B84060
  • editorBracketMatch.background#E8C85060
  • editorBracketMatch.border#C89000
  • editorCodeLens.foreground#A09060
  • editorCursor.background#FDF8EB
  • editorCursor.foreground#C89000
  • editorError.foreground#CC1100
  • editorGroupHeader.tabsBackground#EDE4CC
  • editorGroupHeader.tabsBorder#D8C898
  • editorGutter.addedBackground#C89000
  • editorGutter.background#F8F2E4
  • editorGutter.deletedBackground#CC1100
  • editorGutter.modifiedBackground#C07020
  • editorHint.foreground#C89000
  • editorHoverWidget.background#F5EFE0
  • editorHoverWidget.border#D8C898
  • editorHoverWidget.foreground#2D2810
  • editorIndentGuide.activeBackground1#C8A870
  • editorIndentGuide.background1#E8DCBE
  • editorInfo.foreground#A07000
  • editorLightBulb.foreground#D06818
  • editorLineNumber.activeForeground#C89000
  • editorLineNumber.foreground#B09870
  • editorOverviewRuler.border#E8DCBE
  • editorOverviewRuler.errorForeground#CC1100
  • editorOverviewRuler.findMatchForeground#D06818
  • editorOverviewRuler.warningForeground#C07020
  • editorRuler.foreground#E8DCBE
  • editorSuggestWidget.background#F5EFE0
  • editorSuggestWidget.border#D8C898
  • editorSuggestWidget.foreground#2D2810
  • editorSuggestWidget.highlightForeground#C89000
  • editorSuggestWidget.selectedBackground#E8C85060
  • editorWarning.foreground#C07020
  • editorWhitespace.foreground#D8CAA8
  • editorWidget.background#F5EFE0
  • editorWidget.border#D8C898
  • editorWidget.foreground#2D2810
  • focusBorder#C8900080
  • gitDecoration.addedResourceForeground#C89000
  • gitDecoration.conflictingResourceForeground#C86010
  • gitDecoration.deletedResourceForeground#CC1100
  • gitDecoration.ignoredResourceForeground#B09870
  • gitDecoration.modifiedResourceForeground#C07020
  • gitDecoration.untrackedResourceForeground#A07000
  • input.background#F5EFE0
  • input.border#D8C898
  • input.foreground#2D2810
  • input.placeholderForeground#B09870
  • inputOption.activeBackground#E8C85060
  • inputOption.activeBorder#C89000
  • inputOption.activeForeground#2D2810
  • inputValidation.errorBackground#FCECEA
  • inputValidation.errorBorder#CC1100
  • inputValidation.infoBackground#FCF8E8
  • inputValidation.infoBorder#C89000
  • inputValidation.warningBackground#FDF4E0
  • inputValidation.warningBorder#C07020
  • list.activeSelectionBackground#201000cc
  • list.activeSelectionForeground#c0a060
  • list.errorForeground#CC1100
  • list.focusBackground#E8C85080
  • list.focusForeground#b09060
  • list.highlightForeground#C89000
  • list.hoverBackground#EEE0C090
  • list.hoverForeground#2D2810
  • list.inactiveSelectionBackground#E8C85050
  • list.inactiveSelectionForeground#b09050
  • list.warningForeground#C07020
  • menu.background#6B4800
  • menu.foreground#F8ECC8
  • menu.selectionBackground#C8900080
  • menu.selectionForeground#FDF8EB
  • menu.separatorBackground#5A4020
  • menubar.selectionBackground#8C6010
  • menubar.selectionForeground#F8F0D8
  • notificationLink.foreground#C89000
  • notifications.background#F5EFE0
  • notifications.border#D8C898
  • notifications.foreground#2D2810
  • panel.background#F5EDD8
  • panel.border#D8C898
  • panelTitle.activeBorder#C89000
  • panelTitle.activeForeground#A07000
  • panelTitle.inactiveForeground#8A7850
  • pickerGroup.border#D8C080
  • pickerGroup.foreground#A09060
  • quickInput.background#F5EFE0
  • quickInput.foreground#2D2810
  • quickInputHighlight.foreground#C89000
  • scrollbar.shadow#00000010
  • scrollbarSlider.activeBackground#C8900060
  • scrollbarSlider.background#B09A7040
  • scrollbarSlider.hoverBackground#8A7A5060
  • settings.checkboxBackground#F5EFE0
  • settings.checkboxBorder#D8C898
  • settings.dropdownBackground#F5EFE0
  • settings.dropdownBorder#D8C898
  • settings.headerForeground#A07000
  • settings.modifiedItemIndicator#C89000
  • settings.numberInputBackground#F5EFE0
  • settings.numberInputBorder#D8C898
  • settings.textInputBackground#F5EFE0
  • settings.textInputBorder#D8C898
  • sideBar.background#F5EDD8
  • sideBar.border#D8C898
  • sideBar.foreground#2D2810
  • sideBarSectionHeader.background#EDE4C8
  • sideBarSectionHeader.border#D8C080
  • sideBarSectionHeader.foreground#2D2810
  • sideBarTitle.foreground#A07000
  • statusBar.background#B07800
  • statusBar.border#906000
  • statusBar.debuggingBackground#D06818
  • statusBar.debuggingForeground#FDF8EB
  • statusBar.foreground#FDF8EB
  • statusBar.noFolderBackground#2D2810
  • statusBar.noFolderForeground#F0D890
  • statusBarItem.activeBackground#805400
  • statusBarItem.errorBackground#CC1100
  • statusBarItem.errorForeground#FDF8EB
  • statusBarItem.hoverBackground#906000
  • statusBarItem.remoteBackground#C89000
  • statusBarItem.remoteForeground#FDF8EB
  • statusBarItem.warningBackground#C07020
  • statusBarItem.warningForeground#FDF8EB
  • tab.activeBackground#FDF8EB
  • tab.activeBorder#C89000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#2D2810
  • tab.border#D8C898
  • tab.hoverBackground#F5EEDC
  • tab.hoverForeground#2D2810
  • tab.inactiveBackground#E8DEC0
  • tab.inactiveForeground#6A5830
  • tab.unfocusedActiveBackground#F0E8D0
  • tab.unfocusedActiveForeground#4A4020
  • terminal.ansiBlack#2D2810
  • terminal.ansiBlue#3D7A0A
  • terminal.ansiBrightBlack#6A5840
  • terminal.ansiBrightBlue#4A7A10
  • terminal.ansiBrightCyan#3AAA70
  • terminal.ansiBrightGreen#7DB020
  • terminal.ansiBrightMagenta#D06818
  • terminal.ansiBrightRed#FF2200
  • terminal.ansiBrightWhite#2D2810
  • terminal.ansiBrightYellow#D08818
  • terminal.ansiCyan#2A9060
  • terminal.ansiGreen#5CA016
  • terminal.ansiMagenta#C86010
  • terminal.ansiRed#CC1100
  • terminal.ansiWhite#7A6840
  • terminal.ansiYellow#C07020
  • terminal.background#FDF8EB
  • terminal.foreground#2D2810
  • terminal.selectionBackground#E8C85080
  • terminalCursor.foreground#C89000
  • titleBar.activeBackground#6B4800
  • titleBar.activeForeground#F8ECC8
  • titleBar.border#4A3000
  • titleBar.inactiveBackground#4A3820
  • titleBar.inactiveForeground#907850
  • widget.shadow#00000018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#2D2810
comment, punctuation.definition.comment, comment.block, comment.line#8A7848italic
comment.block.documentation, comment.line.double-slash.documentation#706030italic
keyword, keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.import, keyword.control.export, keyword.control.return, keyword.control.trycatch, keyword.control.exception, keyword.other.using, keyword.other.import, keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof, keyword.operator.in, keyword.operator.of#7B4FBEbold
storage.type, storage.modifier#7B4FBEbold
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.name.enum#1A6FAFbold
support.class, support.type, meta.type.annotation, meta.type.parameters, entity.other.inherited-class#1A6FAF
keyword.type, support.type.primitive, storage.type.primitive, storage.type.numeric, storage.type.string, storage.type.boolean, storage.type.object, storage.type.void, storage.type.cs#1A6FAF
entity.name.function, entity.name.method, entity.name.member#C05A10bold
meta.function-call entity.name.function, meta.method-call entity.name.function, support.function, support.function.builtin#C05A10
variable.parameter#8B5A30italic
variable, variable.other, variable.other.readwrite, variable.other.object, variable.other.object.property#2D2810
variable.language#7B4FBEitalic
variable.other.property, variable.other.member, support.variable.property#1A5A8A
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.interpolated#3A8A0A
constant.character.escape, constant.character.entity#A06000bold
punctuation.definition.template-expression, punctuation.section.embedded#C05A10bold
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#B5420A
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.none#B5420Abold
constant.other#A06000
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.spread, keyword.operator.optional, keyword.operator.nullish, keyword.operator.arrow#5A6A72
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, meta.brace, meta.delimiter#6A7878
string.regexp, constant.other.character-class.regexp, constant.character.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp, punctuation.definition.group.regexp, punctuation.definition.character-class.regexp#1A7A60
meta.decorator, punctuation.decorator, entity.name.function.decorator, storage.type.annotation#A06000italic
entity.name.type.attribute.cs, support.type.attribute#A06000
entity.name.tag, entity.name.tag.xml, entity.name.tag.html, meta.tag.xml entity.name.tag#1A6FAFbold
entity.other.attribute-name, entity.other.attribute-name.xml, entity.other.attribute-name.html#A06000
string.quoted.double.html, string.quoted.single.html, string.quoted.double.xml, string.quoted.single.xml#3A8A0A
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, meta.tag punctuation#5A6A72
string.unquoted.cdata.xml#3A8A0Aitalic
meta.tag.sgml.doctype, meta.tag.preprocessor.xml#8A7848italic
entity.name.tag.namespace.xml#7B4FBE
entity.name.tag.css#1A6FAF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7B4FBE
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#A06000
support.constant.property-value.css, meta.property-value.css#3A8A0A
keyword.other.unit.css#B5420A
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#1A7A60
support.type.property-name.json#A06000bold
string.quoted.double.json#3A8A0A
constant.numeric.json#B5420A
constant.language.json#B5420Abold
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#7B4FBEbold
markup.bold, punctuation.definition.bold.markdown#C05A10bold
markup.italic, punctuation.definition.italic.markdown#1A6FAFitalic
markup.inline.raw, markup.fenced_code.block#1A7A60
markup.underline.link, string.other.link#1A7A60underline
punctuation.definition.list.begin.markdown#C05A10
markup.quote, punctuation.definition.quote.begin.markdown#8A7848italic
invalid, invalid.illegal#FDF8EB
invalid.deprecated#CC1100strikethrough
Lime Grove by Pipe Pipe Code - VS Code Theme