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#181824
  • activityBar.border#0E0E16
  • activityBar.foreground#B5D89A
  • activityBar.inactiveForeground#54546A
  • activityBarBadge.background#B5D89A
  • activityBarBadge.foreground#1E1E2A
  • badge.background#B5D89A
  • badge.foreground#1E1E2A
  • breadcrumb.activeSelectionForeground#BCDCA4
  • breadcrumb.background#1E1E2A
  • breadcrumb.focusForeground#B5D89A
  • breadcrumb.foreground#505059
  • button.background#647755
  • button.foreground#D4D2E0
  • button.hoverBackground#7F976C
  • button.secondaryBackground#363C3C
  • button.secondaryForeground#B3B2BF
  • button.secondaryHoverBackground#464C4C
  • contrastBorder#00000000
  • diffEditor.insertedLineBackground#B5D89A15
  • diffEditor.insertedTextBackground#B5D89A28
  • diffEditor.removedLineBackground#E89A9A15
  • diffEditor.removedTextBackground#E89A9A28
  • dropdown.background#2C2C37
  • dropdown.border#3E3E48
  • dropdown.foreground#D4D2E0
  • dropdown.listBackground#2C2C37
  • editor.background#1E1E2A
  • editor.findMatchBackground#B5D89A60
  • editor.findMatchHighlightBackground#B5D89A28
  • editor.foreground#D4D2E0
  • editor.inactiveSelectionBackground#7A7AA020
  • editor.lineHighlightBackground#292935
  • editor.rangeHighlightBackground#7A7AA018
  • editor.selectionBackground#7A7AA050
  • editor.selectionHighlightBackground#7A7AA028
  • editor.wordHighlightBackground#7A7AA038
  • editor.wordHighlightStrongBackground#7A7AA050
  • editorBracketMatch.background#7A7AA038
  • editorBracketMatch.border#B5D89A
  • editorCodeLens.foreground#505059
  • editorCursor.background#1E1E2A
  • editorCursor.foreground#B5D89A
  • editorError.foreground#E89A9A
  • editorGroupHeader.tabsBackground#181824
  • editorGroupHeader.tabsBorder#0E0E16
  • editorGutter.addedBackground#B5D89A
  • editorGutter.background#191922
  • editorGutter.deletedBackground#E89A9A
  • editorGutter.modifiedBackground#E8B88A
  • editorHint.foreground#B5D89A
  • editorHoverWidget.background#2C2C37
  • editorHoverWidget.border#3E3E48
  • editorHoverWidget.foreground#D4D2E0
  • editorIndentGuide.activeBackground1#505059
  • editorIndentGuide.background1#30303B
  • editorInfo.foreground#9AC8E8
  • editorLightBulb.foreground#E8D49A
  • editorLineNumber.activeForeground#B5D89A
  • editorLineNumber.foreground#505059
  • editorOverviewRuler.border#30303B
  • editorOverviewRuler.errorForeground#E89A9A
  • editorOverviewRuler.findMatchForeground#B5D89A
  • editorOverviewRuler.warningForeground#E8D49A
  • editorRuler.foreground#30303B
  • editorSuggestWidget.background#2C2C37
  • editorSuggestWidget.border#3E3E48
  • editorSuggestWidget.foreground#D4D2E0
  • editorSuggestWidget.highlightForeground#B5D89A
  • editorSuggestWidget.selectedBackground#363C3C
  • editorWarning.foreground#E8D49A
  • editorWhitespace.foreground#393944
  • editorWidget.background#2C2C37
  • editorWidget.border#3E3E48
  • editorWidget.foreground#D4D2E0
  • focusBorder#B5D89A60
  • gitDecoration.addedResourceForeground#B5D89A
  • gitDecoration.conflictingResourceForeground#E8B88A
  • gitDecoration.deletedResourceForeground#E89A9A
  • gitDecoration.ignoredResourceForeground#505059
  • gitDecoration.modifiedResourceForeground#E8B88A
  • gitDecoration.untrackedResourceForeground#BCDCA4
  • input.background#2C2C37
  • input.border#3E3E48
  • input.foreground#D4D2E0
  • input.placeholderForeground#505059
  • inputOption.activeBackground#363C3C
  • inputOption.activeBorder#B5D89A
  • inputOption.activeForeground#D4D2E0
  • inputValidation.errorBackground#E89A9A15
  • inputValidation.errorBorder#E89A9A
  • inputValidation.infoBackground#B5D89A18
  • inputValidation.infoBorder#B5D89A
  • inputValidation.warningBackground#E8D49A20
  • inputValidation.warningBorder#E8D49A
  • list.activeSelectionBackground#363C3C
  • list.activeSelectionForeground#D4D2E0
  • list.errorForeground#E89A9A
  • list.focusBackground#363C3C
  • list.focusForeground#D4D2E0
  • list.highlightForeground#B5D89A
  • list.hoverBackground#2C2C3780
  • list.hoverForeground#D4D2E0
  • list.inactiveSelectionBackground#2C2C37
  • list.inactiveSelectionForeground#B3B2BF
  • list.warningForeground#E8D49A
  • menu.background#2C2C36
  • menu.foreground#D4D2E0
  • menu.selectionBackground#363C3C
  • menu.selectionForeground#D4D2E0
  • menu.separatorBackground#3E3E48
  • menubar.selectionBackground#2C2C37
  • menubar.selectionForeground#D4D2E0
  • notificationLink.foreground#B5D89A
  • notifications.background#2C2C37
  • notifications.border#3E3E48
  • notifications.foreground#D4D2E0
  • panel.background#252530
  • panel.border#0E0E16
  • panelTitle.activeBorder#B5D89A
  • panelTitle.activeForeground#B5D89A
  • panelTitle.inactiveForeground#54546A
  • pickerGroup.border#3E3E48
  • pickerGroup.foreground#505059
  • quickInput.background#2C2C37
  • quickInput.foreground#D4D2E0
  • quickInputHighlight.foreground#B5D89A
  • scrollbar.shadow#00000060
  • scrollbarSlider.activeBackground#B5D89A50
  • scrollbarSlider.background#4B4B5550
  • scrollbarSlider.hoverBackground#66666E70
  • settings.checkboxBackground#2C2C37
  • settings.checkboxBorder#3E3E48
  • settings.dropdownBackground#2C2C37
  • settings.dropdownBorder#3E3E48
  • settings.headerForeground#B5D89A
  • settings.modifiedItemIndicator#B5D89A
  • settings.numberInputBackground#2C2C37
  • settings.numberInputBorder#3E3E48
  • settings.textInputBackground#2C2C37
  • settings.textInputBorder#3E3E48
  • sideBar.background#252530
  • sideBar.border#0E0E16
  • sideBar.foreground#B3B2BF
  • sideBarSectionHeader.background#2C2C36
  • sideBarSectionHeader.border#0E0E16
  • sideBarSectionHeader.foreground#B3B2BF
  • sideBarTitle.foreground#B5D89A
  • statusBar.background#2A2A3A
  • statusBar.border#1D1D29
  • statusBar.debuggingBackground#E8B88A
  • statusBar.debuggingForeground#1E1E2A
  • statusBar.foreground#B5D89A
  • statusBar.noFolderBackground#181824
  • statusBar.noFolderForeground#B5D89A
  • statusBarItem.activeBackground#1D1D29
  • statusBarItem.errorBackground#E89A9A
  • statusBarItem.errorForeground#1E1E2A
  • statusBarItem.hoverBackground#1D1D29
  • statusBarItem.remoteBackground#B5D89A
  • statusBarItem.remoteForeground#1E1E2A
  • statusBarItem.warningBackground#E8D49A
  • statusBarItem.warningForeground#1E1E2A
  • tab.activeBackground#1E1E2A
  • tab.activeBorder#B5D89A
  • tab.activeBorderTop#00000000
  • tab.activeForeground#D4D2E0
  • tab.border#0E0E16
  • tab.hoverBackground#2C2C36
  • tab.hoverForeground#D4D2E0
  • tab.inactiveBackground#181824
  • tab.inactiveForeground#54546A
  • tab.unfocusedActiveBackground#252530
  • tab.unfocusedActiveForeground#8B8A97
  • terminal.ansiBlack#34343F
  • terminal.ansiBlue#9AC8E8
  • terminal.ansiBrightBlack#5D5D66
  • terminal.ansiBrightBlue#AED3ED
  • terminal.ansiBrightCyan#A5E0CD
  • terminal.ansiBrightGreen#C4E0AE
  • terminal.ansiBrightMagenta#D4B9ED
  • terminal.ansiBrightRed#EDAEAE
  • terminal.ansiBrightWhite#D4D2E0
  • terminal.ansiBrightYellow#EDDDAE
  • terminal.ansiCyan#8ED8C0
  • terminal.ansiGreen#B5D89A
  • terminal.ansiMagenta#C9A8E8
  • terminal.ansiRed#E89A9A
  • terminal.ansiWhite#A6A5B2
  • terminal.ansiYellow#E8D49A
  • terminal.background#252530
  • terminal.foreground#D4D2E0
  • terminal.selectionBackground#7A7AA050
  • terminalCursor.foreground#B5D89A
  • titleBar.activeBackground#181824
  • titleBar.activeForeground#B5D89A
  • titleBar.border#0E0E16
  • titleBar.inactiveBackground#252530
  • titleBar.inactiveForeground#54546A
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#D4D2E0
comment, punctuation.definition.comment, comment.block, comment.line#6A6A88italic
comment.block.documentation, comment.line.double-slash.documentation#80809Aitalic
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#C9A8E8bold
storage.type, storage.modifier#C9A8E8bold
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.name.enum#9AC8E8bold
support.class, support.type, meta.type.annotation, meta.type.parameters, entity.other.inherited-class#9AC8E8
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#9AC8E8
entity.name.function, entity.name.method, entity.name.member#E8B88Abold
meta.function-call entity.name.function, meta.method-call entity.name.function, support.function, support.function.builtin#E8B88A
variable.parameter#E0C2ACitalic
variable, variable.other, variable.other.readwrite, variable.other.object, variable.other.object.property#D4D2E0
variable.language#C9A8E8italic
variable.other.property, variable.other.member, support.variable.property#A9D0EB
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.interpolated#B5D89A
constant.character.escape, constant.character.entity#E8D49Abold
punctuation.definition.template-expression, punctuation.section.embedded#E8B88Abold
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#E89A9A
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.none#E89A9Abold
constant.other#E8D49A
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#9A9AB8
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, meta.brace, meta.delimiter#84849E
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#8ED8C0
meta.decorator, punctuation.decorator, entity.name.function.decorator, storage.type.annotation#E8D49Aitalic
entity.name.type.attribute.cs, support.type.attribute#E8D49A
entity.name.tag, entity.name.tag.xml, entity.name.tag.html, meta.tag.xml entity.name.tag#9AC8E8bold
entity.other.attribute-name, entity.other.attribute-name.xml, entity.other.attribute-name.html#E8D49A
string.quoted.double.html, string.quoted.single.html, string.quoted.double.xml, string.quoted.single.xml#B5D89A
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, meta.tag punctuation#9A9AB8
string.unquoted.cdata.xml#B5D89Aitalic
meta.tag.sgml.doctype, meta.tag.preprocessor.xml#6A6A88italic
entity.name.tag.namespace.xml#C9A8E8
entity.name.tag.css#9AC8E8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C9A8E8
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#E8D49A
support.constant.property-value.css, meta.property-value.css#B5D89A
keyword.other.unit.css#E89A9A
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#8ED8C0
support.type.property-name.json#E8D49Abold
string.quoted.double.json#B5D89A
constant.numeric.json#E89A9A
constant.language.json#E89A9Abold
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#C9A8E8bold
markup.bold, punctuation.definition.bold.markdown#E8B88Abold
markup.italic, punctuation.definition.italic.markdown#9AC8E8italic
markup.inline.raw, markup.fenced_code.block#8ED8C0
markup.underline.link, string.other.link#8ED8C0underline
punctuation.definition.list.begin.markdown#E8B88A
markup.quote, punctuation.definition.quote.begin.markdown#6A6A88italic
invalid, invalid.illegal#1E1E2A
invalid.deprecated#E89A9Astrikethrough
Lime Grove by Pipe Pipe Code - VS Code Theme