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#FFFFFF
  • activityBar.inactiveForeground#9AA89A
  • activityBarBadge.background#B6FF2E
  • activityBarBadge.foreground#000000
  • badge.background#B6FF2E
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#BDFF43
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#B6FF2E
  • breadcrumb.foreground#383838
  • button.background#648C19
  • button.foreground#FFFFFF
  • button.hoverBackground#7FB220
  • button.secondaryBackground#1D2907
  • button.secondaryForeground#D1D1D1
  • button.secondaryHoverBackground#2F3A1B
  • contrastBorder#5A9A20
  • diffEditor.insertedLineBackground#B6FF2E15
  • diffEditor.insertedTextBackground#B6FF2E28
  • diffEditor.removedLineBackground#FF6B5A15
  • diffEditor.removedTextBackground#FF6B5A28
  • dropdown.background#0F0F0F
  • dropdown.border#242424
  • dropdown.foreground#FFFFFF
  • dropdown.listBackground#0F0F0F
  • editor.background#000000
  • editor.findMatchBackground#B6FF2E60
  • editor.findMatchHighlightBackground#B6FF2E28
  • editor.foreground#FFFFFF
  • editor.inactiveSelectionBackground#B6FF2E20
  • editor.lineHighlightBackground#0D0D0D
  • editor.rangeHighlightBackground#B6FF2E18
  • editor.selectionBackground#B6FF2E50
  • editor.selectionHighlightBackground#B6FF2E28
  • editor.wordHighlightBackground#B6FF2E38
  • editor.wordHighlightStrongBackground#B6FF2E50
  • editorBracketMatch.background#B6FF2E38
  • editorBracketMatch.border#B6FF2E
  • editorCodeLens.foreground#383838
  • editorCursor.background#000000
  • editorCursor.foreground#B6FF2E
  • editorError.foreground#FF6B5A
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#B6FF2E
  • editorGutter.background#000000
  • editorGutter.deletedBackground#FF6B5A
  • editorGutter.modifiedBackground#FFA840
  • editorHint.foreground#B6FF2E
  • editorHoverWidget.background#0F0F0F
  • editorHoverWidget.border#242424
  • editorHoverWidget.foreground#FFFFFF
  • editorIndentGuide.activeBackground1#383838
  • editorIndentGuide.background1#141414
  • editorInfo.foreground#5CD0FF
  • editorLightBulb.foreground#FFD83C
  • editorLineNumber.activeForeground#B6FF2E
  • editorLineNumber.foreground#383838
  • editorOverviewRuler.border#141414
  • editorOverviewRuler.errorForeground#FF6B5A
  • editorOverviewRuler.findMatchForeground#B6FF2E
  • editorOverviewRuler.warningForeground#FFD83C
  • editorRuler.foreground#141414
  • editorSuggestWidget.background#0F0F0F
  • editorSuggestWidget.border#242424
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.highlightForeground#B6FF2E
  • editorSuggestWidget.selectedBackground#1D2907
  • editorWarning.foreground#FFD83C
  • editorWhitespace.foreground#1F1F1F
  • editorWidget.background#0F0F0F
  • editorWidget.border#242424
  • editorWidget.foreground#FFFFFF
  • focusBorder#B6FF2EAA
  • gitDecoration.addedResourceForeground#B6FF2E
  • gitDecoration.conflictingResourceForeground#FFA840
  • gitDecoration.deletedResourceForeground#FF6B5A
  • gitDecoration.ignoredResourceForeground#383838
  • gitDecoration.modifiedResourceForeground#FFA840
  • gitDecoration.untrackedResourceForeground#BDFF43
  • input.background#0F0F0F
  • input.border#242424
  • input.foreground#FFFFFF
  • input.placeholderForeground#383838
  • inputOption.activeBackground#1D2907
  • inputOption.activeBorder#B6FF2E
  • inputOption.activeForeground#FFFFFF
  • inputValidation.errorBackground#FF6B5A15
  • inputValidation.errorBorder#FF6B5A
  • inputValidation.infoBackground#B6FF2E18
  • inputValidation.infoBorder#B6FF2E
  • inputValidation.warningBackground#FFD83C20
  • inputValidation.warningBorder#FFD83C
  • list.activeSelectionBackground#1D2907
  • list.activeSelectionForeground#FFFFFF
  • list.errorForeground#FF6B5A
  • list.focusBackground#1D2907
  • list.focusForeground#FFFFFF
  • list.highlightForeground#B6FF2E
  • list.hoverBackground#0F0F0F80
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#0F0F0F
  • list.inactiveSelectionForeground#D1D1D1
  • list.warningForeground#FFD83C
  • menu.background#0F0F0F
  • menu.foreground#FFFFFF
  • menu.selectionBackground#1D2907
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#242424
  • menubar.selectionBackground#0F0F0F
  • menubar.selectionForeground#FFFFFF
  • notificationLink.foreground#B6FF2E
  • notifications.background#0F0F0F
  • notifications.border#242424
  • notifications.foreground#FFFFFF
  • panel.background#080808
  • panel.border#000000
  • panelTitle.activeBorder#B6FF2E
  • panelTitle.activeForeground#B6FF2E
  • panelTitle.inactiveForeground#9AA89A
  • pickerGroup.border#242424
  • pickerGroup.foreground#383838
  • quickInput.background#0F0F0F
  • quickInput.foreground#FFFFFF
  • quickInputHighlight.foreground#B6FF2E
  • scrollbar.shadow#00000060
  • scrollbarSlider.activeBackground#B6FF2E50
  • scrollbarSlider.background#33333350
  • scrollbarSlider.hoverBackground#52525270
  • settings.checkboxBackground#0F0F0F
  • settings.checkboxBorder#242424
  • settings.dropdownBackground#0F0F0F
  • settings.dropdownBorder#242424
  • settings.headerForeground#B6FF2E
  • settings.modifiedItemIndicator#B6FF2E
  • settings.numberInputBackground#0F0F0F
  • settings.numberInputBorder#242424
  • settings.textInputBackground#0F0F0F
  • settings.textInputBorder#242424
  • sideBar.background#080808
  • sideBar.border#000000
  • sideBar.foreground#D1D1D1
  • sideBarSectionHeader.background#0F0F0F
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#D1D1D1
  • sideBarTitle.foreground#B6FF2E
  • statusBar.background#1A3A0A
  • statusBar.border#122907
  • statusBar.debuggingBackground#FF8A2E
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.activeBackground#122907
  • statusBarItem.errorBackground#FF6B5A
  • statusBarItem.errorForeground#000000
  • statusBarItem.hoverBackground#122907
  • statusBarItem.remoteBackground#B6FF2E
  • statusBarItem.remoteForeground#000000
  • statusBarItem.warningBackground#FFD83C
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#000000
  • tab.activeBorder#B6FF2E
  • tab.activeBorderTop#00000000
  • tab.activeForeground#FFFFFF
  • tab.border#000000
  • tab.hoverBackground#0F0F0F
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#9AA89A
  • tab.unfocusedActiveBackground#080808
  • tab.unfocusedActiveForeground#999999
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#5CD0FF
  • terminal.ansiBrightBlack#474747
  • terminal.ansiBrightBlue#7DD9FF
  • terminal.ansiBrightCyan#63F3CD
  • terminal.ansiBrightGreen#C5FF58
  • terminal.ansiBrightMagenta#DEB9FF
  • terminal.ansiBrightRed#FF897B
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE063
  • terminal.ansiCyan#3CF0C0
  • terminal.ansiGreen#B6FF2E
  • terminal.ansiMagenta#D6A8FF
  • terminal.ansiRed#FF6B5A
  • terminal.ansiWhite#BFBFBF
  • terminal.ansiYellow#FFD83C
  • terminal.background#080808
  • terminal.foreground#FFFFFF
  • terminal.selectionBackground#B6FF2E50
  • terminalCursor.foreground#B6FF2E
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#000000
  • titleBar.inactiveBackground#080808
  • titleBar.inactiveForeground#9AA89A
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#FFFFFF
comment, punctuation.definition.comment, comment.block, comment.line#9CC090italic
comment.block.documentation, comment.line.double-slash.documentation#ABC9A1italic
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#D6A8FFbold
storage.type, storage.modifier#D6A8FFbold
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.name.enum#5CD0FFbold
support.class, support.type, meta.type.annotation, meta.type.parameters, entity.other.inherited-class#5CD0FF
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#5CD0FF
entity.name.function, entity.name.method, entity.name.member#FFA840bold
meta.function-call entity.name.function, meta.method-call entity.name.function, support.function, support.function.builtin#FFA840
variable.parameter#FFCB8Citalic
variable, variable.other, variable.other.readwrite, variable.other.object, variable.other.object.property#FFFFFF
variable.language#D6A8FFitalic
variable.other.property, variable.other.member, support.variable.property#74D7FF
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.interpolated#B6FF2E
constant.character.escape, constant.character.entity#FFD83Cbold
punctuation.definition.template-expression, punctuation.section.embedded#FFA840bold
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#FF9A8A
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.none#FF9A8Abold
constant.other#FFD83C
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#D0DCDC
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, meta.brace, meta.delimiter#ABB4B4
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#3CF0C0
meta.decorator, punctuation.decorator, entity.name.function.decorator, storage.type.annotation#FFD83Citalic
entity.name.type.attribute.cs, support.type.attribute#FFD83C
entity.name.tag, entity.name.tag.xml, entity.name.tag.html, meta.tag.xml entity.name.tag#5CD0FFbold
entity.other.attribute-name, entity.other.attribute-name.xml, entity.other.attribute-name.html#FFD83C
string.quoted.double.html, string.quoted.single.html, string.quoted.double.xml, string.quoted.single.xml#B6FF2E
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, meta.tag punctuation#D0DCDC
string.unquoted.cdata.xml#B6FF2Eitalic
meta.tag.sgml.doctype, meta.tag.preprocessor.xml#9CC090italic
entity.name.tag.namespace.xml#D6A8FF
entity.name.tag.css#5CD0FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D6A8FF
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#FFD83C
support.constant.property-value.css, meta.property-value.css#B6FF2E
keyword.other.unit.css#FF9A8A
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#3CF0C0
support.type.property-name.json#FFD83Cbold
string.quoted.double.json#B6FF2E
constant.numeric.json#FF9A8A
constant.language.json#FF9A8Abold
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#D6A8FFbold
markup.bold, punctuation.definition.bold.markdown#FFA840bold
markup.italic, punctuation.definition.italic.markdown#5CD0FFitalic
markup.inline.raw, markup.fenced_code.block#3CF0C0
markup.underline.link, string.other.link#3CF0C0underline
punctuation.definition.list.begin.markdown#FFA840
markup.quote, punctuation.definition.quote.begin.markdown#9CC090italic
invalid, invalid.illegal#000000
invalid.deprecated#FF9A8Astrikethrough
Lime Grove by Pipe Pipe Code - VS Code Theme