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#000000
  • activityBar.border#000000
  • activityBar.foreground#90D060
  • activityBar.inactiveForeground#2A4A2A
  • activityBarBadge.background#A0E020
  • activityBarBadge.foreground#000000
  • badge.background#A0E020
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#AAE336
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#A0E020
  • breadcrumb.foreground#383838
  • button.background#587B12
  • button.foreground#DCF0D0
  • button.hoverBackground#709D16
  • button.secondaryBackground#1A2405
  • button.secondaryForeground#B4C5AB
  • button.secondaryHoverBackground#2C3619
  • contrastBorder#00000000
  • diffEditor.insertedLineBackground#A0E02015
  • diffEditor.insertedTextBackground#A0E02028
  • diffEditor.removedLineBackground#F0887815
  • diffEditor.removedTextBackground#F0887828
  • dropdown.background#0F0F0F
  • dropdown.border#242424
  • dropdown.foreground#DCF0D0
  • dropdown.listBackground#0F0F0F
  • editor.background#000000
  • editor.findMatchBackground#A0E02060
  • editor.findMatchHighlightBackground#A0E02028
  • editor.foreground#DCF0D0
  • editor.inactiveSelectionBackground#50A03020
  • editor.lineHighlightBackground#0D0D0D
  • editor.rangeHighlightBackground#50A03018
  • editor.selectionBackground#50A03050
  • editor.selectionHighlightBackground#50A03028
  • editor.wordHighlightBackground#50A03038
  • editor.wordHighlightStrongBackground#50A03050
  • editorBracketMatch.background#50A03038
  • editorBracketMatch.border#A0E020
  • editorCodeLens.foreground#383838
  • editorCursor.background#000000
  • editorCursor.foreground#A0E020
  • editorError.foreground#F08878
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#A0E020
  • editorGutter.background#000000
  • editorGutter.deletedBackground#F08878
  • editorGutter.modifiedBackground#F09040
  • editorHint.foreground#A0E020
  • editorHoverWidget.background#0F0F0F
  • editorHoverWidget.border#242424
  • editorHoverWidget.foreground#DCF0D0
  • editorIndentGuide.activeBackground1#383838
  • editorIndentGuide.background1#141414
  • editorInfo.foreground#50C0F0
  • editorLightBulb.foreground#E0B040
  • editorLineNumber.activeForeground#A0E020
  • editorLineNumber.foreground#383838
  • editorOverviewRuler.border#141414
  • editorOverviewRuler.errorForeground#F08878
  • editorOverviewRuler.findMatchForeground#A0E020
  • editorOverviewRuler.warningForeground#E0B040
  • editorRuler.foreground#141414
  • editorSuggestWidget.background#0F0F0F
  • editorSuggestWidget.border#242424
  • editorSuggestWidget.foreground#DCF0D0
  • editorSuggestWidget.highlightForeground#A0E020
  • editorSuggestWidget.selectedBackground#1A2405
  • editorWarning.foreground#E0B040
  • editorWhitespace.foreground#1F1F1F
  • editorWidget.background#0F0F0F
  • editorWidget.border#242424
  • editorWidget.foreground#DCF0D0
  • focusBorder#A0E02060
  • gitDecoration.addedResourceForeground#A0E020
  • gitDecoration.conflictingResourceForeground#F09040
  • gitDecoration.deletedResourceForeground#F08878
  • gitDecoration.ignoredResourceForeground#383838
  • gitDecoration.modifiedResourceForeground#F09040
  • gitDecoration.untrackedResourceForeground#AAE336
  • input.background#0F0F0F
  • input.border#242424
  • input.foreground#DCF0D0
  • input.placeholderForeground#383838
  • inputOption.activeBackground#1A2405
  • inputOption.activeBorder#A0E020
  • inputOption.activeForeground#DCF0D0
  • inputValidation.errorBackground#F0887815
  • inputValidation.errorBorder#F08878
  • inputValidation.infoBackground#A0E02018
  • inputValidation.infoBorder#A0E020
  • inputValidation.warningBackground#E0B04020
  • inputValidation.warningBorder#E0B040
  • list.activeSelectionBackground#1A2405
  • list.activeSelectionForeground#DCF0D0
  • list.errorForeground#F08878
  • list.focusBackground#1A2405
  • list.focusForeground#DCF0D0
  • list.highlightForeground#A0E020
  • list.hoverBackground#0F0F0F80
  • list.hoverForeground#DCF0D0
  • list.inactiveSelectionBackground#0F0F0F
  • list.inactiveSelectionForeground#B4C5AB
  • list.warningForeground#E0B040
  • menu.background#0F0F0F
  • menu.foreground#DCF0D0
  • menu.selectionBackground#1A2405
  • menu.selectionForeground#DCF0D0
  • menu.separatorBackground#242424
  • menubar.selectionBackground#0F0F0F
  • menubar.selectionForeground#DCF0D0
  • notificationLink.foreground#A0E020
  • notifications.background#0F0F0F
  • notifications.border#242424
  • notifications.foreground#DCF0D0
  • panel.background#080808
  • panel.border#000000
  • panelTitle.activeBorder#A0E020
  • panelTitle.activeForeground#A0E020
  • panelTitle.inactiveForeground#2A4A2A
  • pickerGroup.border#242424
  • pickerGroup.foreground#383838
  • quickInput.background#0F0F0F
  • quickInput.foreground#DCF0D0
  • quickInputHighlight.foreground#A0E020
  • scrollbar.shadow#00000060
  • scrollbarSlider.activeBackground#A0E02050
  • scrollbarSlider.background#33333350
  • scrollbarSlider.hoverBackground#52525270
  • settings.checkboxBackground#0F0F0F
  • settings.checkboxBorder#242424
  • settings.dropdownBackground#0F0F0F
  • settings.dropdownBorder#242424
  • settings.headerForeground#A0E020
  • settings.modifiedItemIndicator#A0E020
  • settings.numberInputBackground#0F0F0F
  • settings.numberInputBorder#242424
  • settings.textInputBackground#0F0F0F
  • settings.textInputBorder#242424
  • sideBar.background#080808
  • sideBar.border#000000
  • sideBar.foreground#B4C5AB
  • sideBarSectionHeader.background#0F0F0F
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#B4C5AB
  • sideBarTitle.foreground#A0E020
  • statusBar.background#0C2A0C
  • statusBar.border#081D08
  • statusBar.debuggingBackground#F09040
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#90D060
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#90D060
  • statusBarItem.activeBackground#081D08
  • statusBarItem.errorBackground#F08878
  • statusBarItem.errorForeground#000000
  • statusBarItem.hoverBackground#081D08
  • statusBarItem.remoteBackground#A0E020
  • statusBarItem.remoteForeground#000000
  • statusBarItem.warningBackground#E0B040
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#000000
  • tab.activeBorder#A0E020
  • tab.activeBorderTop#00000000
  • tab.activeForeground#DCF0D0
  • tab.border#000000
  • tab.hoverBackground#0F0F0F
  • tab.hoverForeground#DCF0D0
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#2A4A2A
  • tab.unfocusedActiveBackground#080808
  • tab.unfocusedActiveForeground#84907D
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#50C0F0
  • terminal.ansiBrightBlack#474747
  • terminal.ansiBrightBlue#73CDF3
  • terminal.ansiBrightCyan#59EDB3
  • terminal.ansiBrightGreen#B3E64D
  • terminal.ansiBrightMagenta#C099FF
  • terminal.ansiBrightRed#F3A093
  • terminal.ansiBrightWhite#DCF0D0
  • terminal.ansiBrightYellow#E6C066
  • terminal.ansiCyan#30E8A0
  • terminal.ansiGreen#A0E020
  • terminal.ansiMagenta#B080FF
  • terminal.ansiRed#F08878
  • terminal.ansiWhite#A5B49C
  • terminal.ansiYellow#E0B040
  • terminal.background#080808
  • terminal.foreground#DCF0D0
  • terminal.selectionBackground#50A03050
  • terminalCursor.foreground#A0E020
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#90D060
  • titleBar.border#000000
  • titleBar.inactiveBackground#080808
  • titleBar.inactiveForeground#2A4A2A
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#DCF0D0
comment, punctuation.definition.comment, comment.block, comment.line#4A7050italic
comment.block.documentation, comment.line.double-slash.documentation#65856Aitalic
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#B080FFbold
storage.type, storage.modifier#B080FFbold
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.name.enum#50C0F0bold
support.class, support.type, meta.type.annotation, meta.type.parameters, entity.other.inherited-class#50C0F0
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#50C0F0
entity.name.function, entity.name.method, entity.name.member#F09040bold
meta.function-call entity.name.function, meta.method-call entity.name.function, support.function, support.function.builtin#F09040
variable.parameter#E8B67Aitalic
variable, variable.other, variable.other.readwrite, variable.other.object, variable.other.object.property#DCF0D0
variable.language#B080FFitalic
variable.other.property, variable.other.member, support.variable.property#6AC9F2
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.interpolated#A0E020
constant.character.escape, constant.character.entity#E0B040bold
punctuation.definition.template-expression, punctuation.section.embedded#F09040bold
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#F08878
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.none#F08878bold
constant.other#E0B040
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#8AA8B0
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, meta.brace, meta.delimiter#718A90
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#30E8A0
meta.decorator, punctuation.decorator, entity.name.function.decorator, storage.type.annotation#E0B040italic
entity.name.type.attribute.cs, support.type.attribute#E0B040
entity.name.tag, entity.name.tag.xml, entity.name.tag.html, meta.tag.xml entity.name.tag#50C0F0bold
entity.other.attribute-name, entity.other.attribute-name.xml, entity.other.attribute-name.html#E0B040
string.quoted.double.html, string.quoted.single.html, string.quoted.double.xml, string.quoted.single.xml#A0E020
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, meta.tag punctuation#8AA8B0
string.unquoted.cdata.xml#A0E020italic
meta.tag.sgml.doctype, meta.tag.preprocessor.xml#4A7050italic
entity.name.tag.namespace.xml#B080FF
entity.name.tag.css#50C0F0
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#B080FF
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#E0B040
support.constant.property-value.css, meta.property-value.css#A0E020
keyword.other.unit.css#F08878
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#30E8A0
support.type.property-name.json#E0B040bold
string.quoted.double.json#A0E020
constant.numeric.json#F08878
constant.language.json#F08878bold
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#B080FFbold
markup.bold, punctuation.definition.bold.markdown#F09040bold
markup.italic, punctuation.definition.italic.markdown#50C0F0italic
markup.inline.raw, markup.fenced_code.block#30E8A0
markup.underline.link, string.other.link#30E8A0underline
punctuation.definition.list.begin.markdown#F09040
markup.quote, punctuation.definition.quote.begin.markdown#4A7050italic
invalid, invalid.illegal#000000
invalid.deprecated#F08878strikethrough
Lime Grove by Pipe Pipe Code - VS Code Theme