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#F5A760
  • activityBar.activeFocusBorder#FFE09B
  • activityBar.background#1A2420
  • activityBar.border#1A2420
  • activityBar.foreground#E0DAD2
  • activityBarBadge.background#E66363
  • activityBarBadge.foreground#1F2925
  • badge.background#F5A760
  • badge.foreground#1F2925
  • button.background#F5A760
  • button.foreground#1F2925
  • button.hoverBackground#F8BD83
  • debugExceptionWidget.background#27312C
  • debugExceptionWidget.border#1F2925
  • debugToolBar.background#27312C
  • diffEditor.insertedTextBackground#B0C98826
  • diffEditor.removedTextBackground#E69A9A26
  • dropdown.background#27312C
  • dropdown.border#475C56
  • dropdown.foreground#D6D1C4
  • editor.background#222D28
  • editor.findMatchBackground#FFE09B0D
  • editor.findMatchBorder#FFE09B
  • editor.findMatchHighlightBackground#FFE09B0D
  • editor.findMatchHighlightBorder#FFE09B59
  • editor.findRangeHighlightBackground#33403B
  • editor.findRangeHighlightBorder#222D2800
  • editor.foreground#D6D1C4
  • editor.inactiveSelectionBackground#33403B
  • editor.lineHighlightBackground#1F2925
  • editor.rangeHighlightBackground#1F2925
  • editor.selectionBackground#4D5D57
  • editor.selectionHighlightBackground#33403B
  • editor.selectionHighlightBorder#3E4E48
  • editor.wordHighlightBackground#33403B
  • editor.wordHighlightStrongBackground#FFE09B33
  • editorBracketMatch.background#859A924D
  • editorBracketMatch.border#859A9299
  • editorCodeLens.foreground#74817D
  • editorCursor.foreground#E66363
  • editorError.foreground#E66363
  • editorGroup.border#1F2925
  • editorGroup.emptyBackground#27312C
  • editorGroupHeader.noTabsBackground#222D28
  • editorGroupHeader.tabsBackground#222D28
  • editorGroupHeader.tabsBorder#27312C
  • editorGutter.addedBackground#B0C98899
  • editorGutter.deletedBackground#E69A9A99
  • editorGutter.modifiedBackground#8CB2C199
  • editorHoverWidget.background#27312C
  • editorHoverWidget.border#151F1B
  • editorHoverWidget.foreground#D6D1C4
  • editorIndentGuide.activeBackground1#859A92B3
  • editorIndentGuide.background1#859A924D
  • editorLineNumber.activeForeground#859A92CC
  • editorLineNumber.foreground#859A9266
  • editorLink.activeForeground#FFE09B
  • editorMarkerNavigation.background#27312C
  • editorOverviewRuler.addedForeground#B0C98899
  • editorOverviewRuler.border#27312C
  • editorOverviewRuler.deletedForeground#E69A9A99
  • editorOverviewRuler.errorForeground#E66363
  • editorOverviewRuler.modifiedForeground#8CB2C199
  • editorOverviewRuler.warningForeground#FFE09B
  • editorRuler.foreground#859A924D
  • editorSuggestWidget.background#27312C
  • editorSuggestWidget.border#151F1B
  • editorSuggestWidget.foreground#D6D1C4
  • editorSuggestWidget.highlightForeground#FFE09B
  • editorSuggestWidget.selectedBackground#1F2925
  • editorWarning.foreground#FFE09B
  • editorWhitespace.foreground#859A9266
  • editorWidget.background#27312C
  • editorWidget.foreground#D6D1C4
  • extensionButton.prominentBackground#FFE09B
  • extensionButton.prominentForeground#1F2925
  • extensionButton.prominentHoverBackground#F8BD83
  • focusBorder#6A7B76
  • foreground#D6D1C4
  • gitDecoration.conflictingResourceForeground#E09B93
  • gitDecoration.deletedResourceForeground#E69A9AB3
  • gitDecoration.ignoredResourceForeground#5C6C66
  • gitDecoration.modifiedResourceForeground#B0C988
  • gitDecoration.submoduleResourceForeground#C5B3D6B3
  • gitDecoration.untrackedResourceForeground#E68D9A
  • input.background#27312C
  • input.border#475C56
  • input.foreground#D6D1C4
  • input.placeholderForeground#859A92
  • inputOption.activeBorder#FFE09B
  • inputValidation.errorBackground#1F2925
  • inputValidation.errorBorder#E66363
  • inputValidation.infoBackground#1F2925
  • inputValidation.infoBorder#A3D1C8
  • inputValidation.warningBackground#1F2925
  • inputValidation.warningBorder#F5C77C
  • list.activeSelectionBackground#1F2925
  • list.activeSelectionForeground#F5A760
  • list.focusBackground#1F2925
  • list.focusForeground#FFE09B
  • list.highlightForeground#FFE09B
  • list.hoverBackground#4D5D5766
  • list.hoverForeground#FFE09B
  • list.inactiveSelectionBackground#4D5D5766
  • list.inactiveSelectionForeground#F5A760
  • list.invalidItemForeground#859A92
  • panel.background#1E2723
  • panel.border#151F1B
  • panelTitle.activeBorder#FFE09B
  • panelTitle.activeForeground#D6D1C4
  • panelTitle.inactiveForeground#859A92
  • peekView.border#1F2925
  • peekViewEditor.background#27312C
  • peekViewEditor.matchHighlightBackground#FFE09B33
  • peekViewResult.background#27312C
  • peekViewResult.fileForeground#859A92
  • peekViewResult.matchHighlightBackground#FFE09B33
  • peekViewTitle.background#27312C
  • peekViewTitleDescription.foreground#859A92
  • peekViewTitleLabel.foreground#859A92
  • pickerGroup.border#1F2925
  • pickerGroup.foreground#5C6C66
  • progressBar.background#FFE09B
  • quickInput.list.focusBackground#1F2925
  • scrollbar.shadow#1A2420
  • scrollbarSlider.activeBackground#859A92B3
  • scrollbarSlider.background#859A9266
  • scrollbarSlider.hoverBackground#859A9299
  • selection.background#586963
  • settings.headerForeground#D6D1C4
  • settings.modifiedItemIndicator#8CB2C1
  • sideBar.background#1F2925
  • sideBar.border#1F2925
  • sideBar.foreground#E0DAD2
  • sideBarSectionHeader.background#1F2925
  • sideBarSectionHeader.foreground#859A92
  • sideBarTitle.foreground#859A92
  • statusBar.background#222D28
  • statusBar.border#1F2925
  • statusBar.debuggingBackground#E69A9A
  • statusBar.debuggingForeground#1F2925
  • statusBar.foreground#859A92
  • statusBar.noFolderBackground#27312C
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#1F2925
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#F5A760
  • tab.activeBackground#27312C
  • tab.activeBorderTop#FFE09B
  • tab.activeForeground#D6D1C4
  • tab.border#27312C00
  • tab.hoverBackground#4D5D5766
  • tab.inactiveBackground#222D28
  • tab.inactiveForeground#859A92
  • tab.unfocusedActiveBorderTop#859A92
  • tab.unfocusedActiveForeground#859A92
  • tab.unfocusedInactiveForeground#859A92
  • terminal.ansiBlack#1F2925
  • terminal.ansiBlue#A3D1C8
  • terminal.ansiBrightBlack#888888
  • terminal.ansiBrightBlue#A3D1C8
  • terminal.ansiBrightCyan#A3D1C8
  • terminal.ansiBrightGreen#B0C988
  • terminal.ansiBrightMagenta#C5B3D6
  • terminal.ansiBrightRed#E6A29A
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F5D79E
  • terminal.ansiCyan#A3D1C8
  • terminal.ansiGreen#B0C988
  • terminal.ansiMagenta#C5B3D6
  • terminal.ansiRed#E09B93
  • terminal.ansiWhite#D6D1C4
  • terminal.ansiYellow#F5C77C
  • terminal.background#1E2723
  • terminal.foreground#D6D1C4
  • terminalCursor.foreground#E66363
  • textBlockQuote.background#27312C
  • textLink.activeForeground#FFE09B
  • textLink.foreground#FFE09B
  • textPreformat.foreground#D6D1C4
  • titleBar.activeBackground#222D28
  • titleBar.activeForeground#D6D1C4
  • titleBar.border#1F2925
  • titleBar.inactiveBackground#222D28
  • titleBar.inactiveForeground#859A92
  • walkThrough.embeddedEditorBackground#27312C
  • widget.shadow#0F1A17

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#74817Ditalic
string, constant.other.symbol#B0C988
string.regexp, constant.character, constant.other#A3D1C8
constant.numeric#A0D7C9
constant.numeric.css#E66363
constant.language#E69A9A
constant.language.boolean#C5B3D6
variable#A3D1C8
variable.other.constant#C5B3D6
variable.member#E09B93
variable.language#F5A760italic
variable.language.this#E09B93italic
support.variable#F5A760
storage#F5A760
storage.type#F5A760italic
storage.modifier.async#E66363italic
storage.type.class#E66363italic
keyword#E69A9A
keyword.control.flow#E66363
keyword.control.loop#E66363
keyword.control.conditional#E66363
keyword.control.trycatch#E66363
keyword.operator#FF7575
keyword.operator.new#E66363
punctuation.separator, punctuation.terminator#D6D1C4B3
punctuation.section#D6D1C4
punctuation.accessor#E69A9A
source.java storage.type, source.haskell storage.type, source.c storage.type#A3D1C8
entity.other.inherited-class#F5A760
storage.type.function#F5A760
storage.type.function.arrow#E66363
source.java storage.type.primitive#A3D1C8
variable.parameter, meta.parameter#C5B3D6italic
variable.function, variable.annotation, meta.function-call.generic, support.function.go#FFE09B
support.function, support.macro#F5C77C
support.function.console#F5C77C
entity.name.import, entity.name.package#B0C988
entity.name#E09B93
entity.name.function#FFE09B
entity.name.class#F5A760
entity.name.tag, meta.tag.sgml#FC6F9F
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#E0DAD2
text.html.derivative#D6D1C4
entity.other.attribute-name#FFE09Bitalic
support.constant#E09B93italic
support.type, support.class, source.go storage.type#E09B93
support.class.promise#F5A760
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#D6D1C4
invalid#E66363
meta.diff, meta.diff.header#D6B8D6
source.ruby variable.other.readwrite#F5C77C
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#A3D1C8
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#74817D
support.type.property-name#B0C988
entity.other.attribute-name.class.css#B0C988
entity.other.attribute-name.id.css#FFE09B
support.type.property-name.css#D6D1C4
constant.numeric.line-number.find-in-files - match#74817D
constant.numeric.line-number.match#F5A760
entity.name.filename.find-in-files#B0C988
message.error#E66363
markup.heading, markup.heading entity.name#B0C988bold
markup.underline.link, string.other.link#A3D1C8
markup.italic#E09B93italic
markup.bold#E09B93bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#74817Dbold
markup.quote#A3D1C8italic
markup.list punctuation.definition.list.begin#F5C77C
markup.inserted#B0C988
markup.changed#8CB2C1
markup.deleted#E69A9A
markup.strike#FFECC8
markup.table#74D7E6
text.html.markdown markup.inline.raw#E69A9A
text.html.markdown meta.dummy.line-break#74817D
punctuation.definition.markdown#74817D
string.json support.type.property-name.json#E69A9A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F5BD60
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F5C77C
constant.language.json#C5B3D6
constant.numeric.json#E66363
string.unquoted, constant.other.object.key#F5BD60
meta.brace.curly, meta.brace.round, meta.brace.square#E0DAD2
punctuation.quasi.element.begin, punctuation.quasi.element.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#F5A760
meta.object-literal.key#F5A760
entity.name.type#F5A760
entity.name.type.class#E66363
support.type.primitive#F5A760
text.gitignore#F5C77Citalic