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.italic—bold 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