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.activeBorder#D1A574
  • activityBar.background#211B17
  • activityBar.border#4A3B2E
  • activityBar.foreground#E4D7C2
  • activityBar.inactiveForeground#8F806F
  • activityBarBadge.background#D1A574
  • activityBarBadge.foreground#211B17
  • badge.background#D1A574
  • badge.foreground#211B17
  • breadcrumb.activeSelectionForeground#D1A574
  • breadcrumb.focusForeground#E4D7C2
  • breadcrumb.foreground#8F806F
  • breadcrumbPicker.background#30271F
  • button.background#D1A574
  • button.border#D1A57400
  • button.foreground#211B17
  • button.hoverBackground#E0B98C
  • button.secondaryBackground#4A3B2E
  • button.secondaryForeground#E4D7C2
  • button.secondaryHoverBackground#5A4635
  • checkbox.background#30271F
  • checkbox.border#5A4635
  • checkbox.foreground#E4D7C2
  • debugIcon.breakpointForeground#E28C7E
  • debugToolBar.background#30271F
  • debugToolBar.border#4A3B2E
  • descriptionForeground#B3A18B
  • diffEditor.insertedLineBackground#8FA0701A
  • diffEditor.insertedTextBackground#8FA07026
  • diffEditor.removedLineBackground#C985781A
  • diffEditor.removedTextBackground#C9857826
  • disabledForeground#8F806F
  • dropdown.background#30271F
  • dropdown.border#5A4635
  • dropdown.foreground#E4D7C2
  • dropdown.listBackground#30271F
  • editor.background#261F1A
  • editor.findMatchBackground#E2A65A59
  • editor.findMatchHighlightBackground#5A463580
  • editor.foreground#E4D7C2
  • editor.hoverHighlightBackground#4A3B2E80
  • editor.inactiveSelectionBackground#5A463559
  • editor.lineHighlightBackground#30271F99
  • editor.lineHighlightBorder#30271F00
  • editor.rangeHighlightBackground#382E2459
  • editor.selectionBackground#5A4635B3
  • editor.selectionHighlightBackground#5A463566
  • editor.wordHighlightBackground#4A3B2E80
  • editor.wordHighlightStrongBackground#4A3B2EB3
  • editorBracketHighlight.foreground1#D1A574
  • editorBracketHighlight.foreground2#A8B58A
  • editorBracketHighlight.foreground3#E2A65A
  • editorBracketHighlight.foreground4#E0A96D
  • editorBracketHighlight.foreground5#C4A0B5
  • editorBracketHighlight.foreground6#93BFB2
  • editorBracketMatch.background#5A463580
  • editorBracketMatch.border#D1A574
  • editorCodeLens.foreground#8F806F
  • editorCursor.foreground#D1A574
  • editorError.foreground#E28C7E
  • editorGroup.border#4A3B2E
  • editorGroupHeader.noTabsBackground#261F1A
  • editorGroupHeader.tabsBackground#211B17
  • editorGroupHeader.tabsBorder#4A3B2E
  • editorGutter.addedBackground#8FA070
  • editorGutter.background#261F1A
  • editorGutter.deletedBackground#C98578
  • editorGutter.modifiedBackground#C7A76E
  • editorHint.foreground#D1A574
  • editorHoverWidget.background#30271F
  • editorHoverWidget.border#4A3B2E
  • editorIndentGuide.activeBackground1#5A4635
  • editorIndentGuide.background1#382E24
  • editorInfo.foreground#8FA3B8
  • editorLineNumber.activeForeground#D1A574
  • editorLineNumber.foreground#6B5A48
  • editorLink.activeForeground#D1A574
  • editorOverviewRuler.addedForeground#8FA07099
  • editorOverviewRuler.border#4A3B2E00
  • editorOverviewRuler.deletedForeground#C9857899
  • editorOverviewRuler.errorForeground#E28C7E
  • editorOverviewRuler.findMatchForeground#E2A65A80
  • editorOverviewRuler.infoForeground#8FA3B8
  • editorOverviewRuler.modifiedForeground#C7A76E99
  • editorOverviewRuler.warningForeground#E2A65A
  • editorRuler.foreground#382E24
  • editorSuggestWidget.background#30271F
  • editorSuggestWidget.border#4A3B2E
  • editorSuggestWidget.foreground#E4D7C2
  • editorSuggestWidget.highlightForeground#D1A574
  • editorSuggestWidget.selectedBackground#4A3B2E
  • editorSuggestWidget.selectedForeground#F0E6D6
  • editorWarning.foreground#E2A65A
  • editorWhitespace.foreground#4A3B2E
  • editorWidget.background#30271F
  • editorWidget.border#4A3B2E
  • editorWidget.foreground#E4D7C2
  • errorForeground#E28C7E
  • focusBorder#D1A574
  • foreground#E4D7C2
  • gitDecoration.addedResourceForeground#A8B58A
  • gitDecoration.conflictingResourceForeground#E2A65A
  • gitDecoration.deletedResourceForeground#E28C7E
  • gitDecoration.ignoredResourceForeground#8F806F
  • gitDecoration.modifiedResourceForeground#D8B07A
  • gitDecoration.stageDeletedResourceForeground#E28C7E
  • gitDecoration.stageModifiedResourceForeground#D8B07A
  • gitDecoration.untrackedResourceForeground#93BFB2
  • icon.foreground#B3A18B
  • input.background#30271F
  • input.border#5A4635
  • input.foreground#E4D7C2
  • input.placeholderForeground#8F806F
  • inputOption.activeBackground#5A463580
  • inputOption.activeBorder#D1A574
  • inputOption.activeForeground#F0E6D6
  • inputValidation.errorBackground#3E2723
  • inputValidation.errorBorder#E28C7E
  • inputValidation.errorForeground#F0D5CF
  • inputValidation.infoBackground#28313C
  • inputValidation.infoBorder#8FA3B8
  • inputValidation.infoForeground#D6E0EA
  • inputValidation.warningBackground#3E3223
  • inputValidation.warningBorder#E2A65A
  • inputValidation.warningForeground#F0E3CB
  • keybindingLabel.background#4A3B2E80
  • keybindingLabel.border#5A4635
  • keybindingLabel.bottomBorder#4A3B2E
  • keybindingLabel.foreground#E4D7C2
  • list.activeSelectionBackground#4A3B2E
  • list.activeSelectionForeground#F0E6D6
  • list.errorForeground#E28C7E
  • list.focusBackground#4A3B2E
  • list.focusForeground#F0E6D6
  • list.highlightForeground#D1A574
  • list.hoverBackground#382E2499
  • list.hoverForeground#E4D7C2
  • list.inactiveSelectionBackground#382E24
  • list.inactiveSelectionForeground#E4D7C2
  • list.warningForeground#E2A65A
  • menu.background#30271F
  • menu.border#4A3B2E
  • menu.foreground#E4D7C2
  • menu.selectionBackground#4A3B2E
  • menu.selectionForeground#F0E6D6
  • menu.separatorBackground#4A3B2E
  • menubar.selectionBackground#4A3B2E99
  • menubar.selectionForeground#F0E6D6
  • minimap.background#261F1A
  • minimap.findMatchHighlight#E2A65A
  • minimap.selectionHighlight#5A4635
  • minimapGutter.addedBackground#8FA070
  • minimapGutter.deletedBackground#C98578
  • minimapGutter.modifiedBackground#C7A76E
  • notificationCenter.border#4A3B2E
  • notificationCenterHeader.background#382E24
  • notificationCenterHeader.foreground#F0E6D6
  • notificationLink.foreground#D1A574
  • notifications.background#30271F
  • notifications.border#4A3B2E
  • notifications.foreground#E4D7C2
  • notificationsErrorIcon.foreground#E28C7E
  • notificationsInfoIcon.foreground#8FA3B8
  • notificationsWarningIcon.foreground#E2A65A
  • notificationToast.border#4A3B2E
  • panel.background#382E24
  • panel.border#4A3B2E
  • panelTitle.activeBorder#D1A574
  • panelTitle.activeForeground#F0E6D6
  • panelTitle.inactiveForeground#8F806F
  • peekView.border#D1A574
  • peekViewEditor.background#2B221C
  • peekViewEditor.matchHighlightBackground#5A463599
  • peekViewResult.background#30271F
  • peekViewResult.matchHighlightBackground#5A463599
  • peekViewResult.selectionBackground#4A3B2E
  • peekViewTitle.background#382E24
  • peekViewTitleDescription.foreground#B3A18B
  • peekViewTitleLabel.foreground#F0E6D6
  • pickerGroup.border#4A3B2E
  • pickerGroup.foreground#D1A574
  • problemsErrorIcon.foreground#E28C7E
  • problemsInfoIcon.foreground#8FA3B8
  • problemsWarningIcon.foreground#E2A65A
  • progressBar.background#D1A574
  • quickInput.background#30271F
  • quickInput.foreground#E4D7C2
  • quickInputList.focusBackground#4A3B2E
  • quickInputList.focusForeground#F0E6D6
  • quickInputTitle.background#382E24
  • sash.hoverBorder#D1A574
  • scrollbar.shadow#00000059
  • scrollbarSlider.activeBackground#D1A57466
  • scrollbarSlider.background#5A463566
  • scrollbarSlider.hoverBackground#5A463599
  • selection.background#5A463599
  • settings.focusedRowBackground#30271F80
  • settings.headerForeground#F0E6D6
  • settings.modifiedItemIndicator#D1A574
  • sideBar.background#30271F
  • sideBar.border#4A3B2E
  • sideBar.foreground#DACDB8
  • sideBarSectionHeader.background#382E24
  • sideBarSectionHeader.border#4A3B2E00
  • sideBarSectionHeader.foreground#E4D7C2
  • sideBarTitle.foreground#F0E6D6
  • statusBar.background#211B17
  • statusBar.border#4A3B2E
  • statusBar.debuggingBackground#E2A65A
  • statusBar.debuggingForeground#211B17
  • statusBar.foreground#C9BBA3
  • statusBar.noFolderBackground#382E24
  • statusBar.noFolderForeground#E4D7C2
  • statusBarItem.activeBackground#4A3B2EB3
  • statusBarItem.hoverBackground#4A3B2E80
  • statusBarItem.remoteBackground#D1A574
  • statusBarItem.remoteForeground#211B17
  • tab.activeBackground#261F1A
  • tab.activeBorderTop#D1A574
  • tab.activeForeground#F0E6D6
  • tab.border#4A3B2E
  • tab.hoverBackground#2B221C
  • tab.inactiveBackground#211B17
  • tab.inactiveForeground#8F806F
  • tab.lastPinnedBorder#5A4635
  • terminal.ansiBlack#4A3B2E
  • terminal.ansiBlue#8FA3B8
  • terminal.ansiBrightBlack#8F806F
  • terminal.ansiBrightBlue#A8BCD1
  • terminal.ansiBrightCyan#ABD4C8
  • terminal.ansiBrightGreen#BFCC9F
  • terminal.ansiBrightMagenta#D8B8CB
  • terminal.ansiBrightRed#F0A99C
  • terminal.ansiBrightWhite#F5EDDF
  • terminal.ansiBrightYellow#F0BC72
  • terminal.ansiCyan#93BFB2
  • terminal.ansiGreen#A8B58A
  • terminal.ansiMagenta#C4A0B5
  • terminal.ansiRed#E28C7E
  • terminal.ansiWhite#E4D7C2
  • terminal.ansiYellow#E2A65A
  • terminal.background#211B17
  • terminal.border#4A3B2E
  • terminal.foreground#E4D7C2
  • terminal.selectionBackground#5A463599
  • terminalCursor.foreground#D1A574
  • textBlockQuote.background#30271F
  • textBlockQuote.border#5A4635
  • textCodeBlock.background#30271F
  • textLink.activeForeground#E0B98C
  • textLink.foreground#D1A574
  • textPreformat.foreground#D8B07A
  • titleBar.activeBackground#211B17
  • titleBar.activeForeground#E4D7C2
  • titleBar.border#4A3B2E
  • titleBar.inactiveBackground#211B17
  • titleBar.inactiveForeground#8F806F
  • toolbar.activeBackground#4A3B2E
  • toolbar.hoverBackground#4A3B2E80
  • tree.indentGuidesStroke#4A3B2E
  • walkThrough.embeddedEditorBackground#30271F
  • welcomePage.background#261F1A
  • welcomePage.progress.foreground#D1A574
  • welcomePage.tileBackground#30271F
  • welcomePage.tileHoverBackground#382E24
  • widget.border#4A3B2E
  • widget.shadow#00000059

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#8F806Fitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical.python, storage, storage.type, storage.modifier, variable.language, constant.language, keyword.other.important#E0A96D
keyword.control.flow, keyword.control.return, keyword.control.import, keyword.control.export, keyword.control.from#E0A96Ditalic
keyword.operator, punctuation.separator.key-value, punctuation.accessor#B3A18B
entity.name.function, support.function, meta.function-call.generic, meta.require, variable.function, entity.name.method#D8B07A
variable.parameter, meta.function.parameters variable#CBBBA0italic
string, string.quoted, string.template, punctuation.definition.string, markup.inline.raw.string#A8B58A
string.regexp, constant.character.escape, punctuation.definition.template-expression, punctuation.section.embedded#E2A65A
constant.numeric, constant.other, constant.character, variable.other.constant, support.constant#E2A65A
constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan, constant.language.python#E2A65Aitalic
entity.name.type, entity.name.class, entity.other.inherited-class, support.class, support.type, entity.name.type.interface, entity.name.type.alias, entity.name.namespace, meta.type.annotation entity.name.type#D1A574
support.type.primitive, support.type.builtin, keyword.type#D1A574italic
meta.decorator, punctuation.decorator, entity.name.function.decorator, meta.annotation#E2A65Aitalic
variable, variable.other.readwrite, meta.definition.variable, support.variable#E4D7C2
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#CBBBA0
variable.language.this, variable.language.self, variable.language.super, variable.parameter.function.language.special.self.python#E0A96Ditalic
entity.name.tag, punctuation.definition.tag, support.class.component#E0A96D
support.class.component.jsx, support.class.component.tsx, entity.name.tag.custom#D1A574
entity.other.attribute-name, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#D8B07Aitalic
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#E0A96D
support.type.property-name.css, support.type.vendored.property-name.css#D8B07A
support.constant.property-value.css, keyword.other.unit.css, constant.numeric.css#E2A65A
support.type.property-name.json, meta.structure.dictionary.key.python string#E0A96D
meta.structure.dictionary.value string.quoted.json, string.quoted.double.json#A8B58A
markup.heading, markup.heading entity.name, punctuation.definition.heading.markdown#E0A96Dbold
markup.bold, punctuation.definition.bold#D1A574bold
markup.italic, punctuation.definition.italic#D8B07Aitalic
markup.underline.link, string.other.link, constant.other.reference.link.markdown#93BFB2
string.other.link.title.markdown, string.other.link.description.markdown#D1A574
markup.inline.raw, markup.fenced_code.block, markup.raw.block#E2A65A
markup.quote#B3A18Bitalic
punctuation.definition.list.begin.markdown, markup.list.numbered.markdown punctuation.definition.list#D8B07A
support.function.builtin.python, support.function.magic.python, support.variable.magic.python#D8B07Aitalic
punctuation, meta.brace, punctuation.definition.parameters, punctuation.definition.block#B3A18B
invalid, invalid.illegal#E28C7E
markup.inserted, meta.diff.header.to-file#A8B58A
markup.deleted, meta.diff.header.from-file#E28C7E
markup.changed#E2A65A
Cozy Latte Theme by lilin - VS Code Theme