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#0e0f0e
  • activityBar.border#0e0f0e
  • activityBar.foreground#dfb064
  • activityBarBadge.background#dfb064
  • activityBarBadge.foreground#0e0f0e
  • badge.background#dfb064
  • badge.foreground#0e0f0e
  • button.background#dfb064
  • button.foreground#0e0f0e
  • button.hoverBackground#dfb064BB
  • debugExceptionWidget.background#0e0f0e
  • debugExceptionWidget.border#343D4A
  • debugToolBar.background#0e0f0e
  • diffEditor.insertedTextBackground#95E6CB44
  • diffEditor.removedTextBackground#F0717844
  • dropdown.background#141414
  • dropdown.listBackground#141414
  • editor.background#141414
  • editor.findMatchBackground#dfb06433
  • editor.findMatchHighlightBackground#dfb06433
  • editor.findRangeHighlightBackground#dfb06433
  • editor.foreground#bbd0d3
  • editor.lineHighlightBackground#242B38
  • editor.rangeHighlightBackground#242B38
  • editor.selectionBackground#242B38
  • editor.wordHighlightBackground#dfb06433
  • editor.wordHighlightStrongBackground#dfb06433
  • editorBracketMatch.border#3D4752
  • editorCursor.foreground#dfb064
  • editorError.foreground#d75f5f
  • editorGroup.border#343D4A
  • editorGroupHeader.noTabsBackground#141414
  • editorGroupHeader.tabsBackground#0e0f0e
  • editorGroupHeader.tabsBorder#141414
  • editorGutter.addedBackground#5e9577
  • editorGutter.deletedBackground#d75f5f
  • editorGutter.modifiedBackground#71abb7
  • editorHoverWidget.background#0e0f0e
  • editorHoverWidget.border#343D4A
  • editorLineNumber.foreground#3D4752
  • editorLink.activeForeground#dfb064
  • editorMarkerNavigation.background#0e0f0e
  • editorOverviewRuler.border#343D4A
  • editorOverviewRuler.errorForeground#d75f5f
  • editorOverviewRuler.warningForeground#dfb064
  • editorRuler.foreground#343D4A
  • editorSuggestWidget.background#0e0f0e
  • editorSuggestWidget.border#343D4A
  • editorSuggestWidget.highlightForeground#dfb064
  • editorSuggestWidget.selectedBackground#303540
  • editorWarning.foreground#dfb064
  • editorWhitespace.foreground#3D4752
  • editorWidget.background#0e0f0e
  • extensionButton.prominentBackground#dfb064AA
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#dfb064BB
  • focusBorder#7386998A
  • foreground#738699
  • gitDecoration.ignoredResourceForeground#73869977
  • input.background#0e0f0e
  • input.border#7386994C
  • input.foreground#D9D7CE
  • input.placeholderForeground#7386998A
  • inputOption.activeBorder#7386998A
  • inputValidation.errorBackground#141414
  • inputValidation.errorBorder#d75f5f
  • inputValidation.infoBackground#141414
  • inputValidation.infoBorder#71abb7
  • inputValidation.warningBackground#141414
  • inputValidation.warningBorder#998f6c
  • list.activeSelectionBackground#343D4A
  • list.activeSelectionForeground#D9D7CE
  • list.dropBackground#dfb06455
  • list.focusBackground#303540
  • list.focusForeground#D9D7CE
  • list.highlightForeground#dfb064
  • list.hoverBackground#303540
  • list.hoverForeground#D9D7CE
  • list.inactiveSelectionBackground#303540
  • list.inactiveSelectionForeground#D9D7CE
  • notificationCenter.border#dfb064
  • notificationCenterHeader.background#0e0f0e
  • notificationCenterHeader.foreground#dfb064
  • notificationLink.foreground#dfb064
  • notifications.background#0e0f0e
  • notifications.border#dfb064
  • notifications.foreground#bbd0d3
  • notificationToast.border#dfb064
  • panel.background#0e0f0e
  • panel.border#11141AB3
  • panelTitle.activeBorder#0e0f0e
  • panelTitle.activeForeground#dfb064
  • panelTitle.inactiveForeground#66737F
  • peekView.border#343D4A
  • peekViewEditor.background#0e0f0e
  • peekViewEditor.matchHighlightBackground#dfb06433
  • peekViewResult.background#0e0f0e
  • peekViewResult.fileForeground#738699
  • peekViewResult.matchHighlightBackground#dfb06433
  • peekViewTitle.background#0e0f0e
  • peekViewTitleDescription.foreground#738699
  • peekViewTitleLabel.foreground#738699
  • pickerGroup.border#343D4A
  • pickerGroup.foreground#dfb064
  • progressBar.background#dfb064
  • scrollbar.shadow#11141A11
  • scrollbarSlider.activeBackground#FFFFFF22
  • scrollbarSlider.background#FFFFFF11
  • scrollbarSlider.hoverBackground#FFFFFF22
  • selection.background#343F4CFD
  • sideBar.background#0e0f0e
  • sideBar.border#11141AB3
  • sideBar.foreground#738699DD
  • sideBarSectionHeader.background#0e0f0e
  • sideBarSectionHeader.foreground#dfb064
  • sideBarTitle.foreground#dfb06499
  • statusBar.background#0e0f0e
  • statusBar.border#0e0f0e
  • statusBar.debuggingBackground#0e0f0e
  • statusBar.debuggingForeground#738699
  • statusBar.foreground#738699
  • statusBar.noFolderBackground#0e0f0e
  • statusBarItem.activeBackground#343D4A
  • statusBarItem.hoverBackground#303540
  • statusBarItem.prominentBackground#343D4A
  • statusBarItem.prominentHoverBackground#303540
  • tab.activeBackground#141414
  • tab.activeBorderTop#dfb064
  • tab.activeForeground#dfb064
  • tab.border#0e0f0e
  • tab.inactiveBackground#0e0f0e
  • tab.inactiveForeground#516170
  • tab.unfocusedActiveForeground#D9D7CEAA
  • tab.unfocusedInactiveForeground#738699
  • terminal.ansiBlack#0e0f0e
  • terminal.ansiBlue#71abb7
  • terminal.ansiBrightBlack#879089
  • terminal.ansiBrightBlue#498693
  • terminal.ansiBrightCyan#4a7074
  • terminal.ansiBrightGreen#dfb064
  • terminal.ansiBrightMagenta#5e9577
  • terminal.ansiBrightRed#934b4b
  • terminal.ansiBrightWhite#c1cfc5
  • terminal.ansiBrightYellow#998f6c
  • terminal.ansiCyan#527d81
  • terminal.ansiGreen#dfb064
  • terminal.ansiMagenta#5e9577
  • terminal.ansiRed#d75f5f
  • terminal.ansiWhite#c1cfc5
  • terminal.ansiYellow#ffe2a9
  • terminal.background#0e0f0e
  • terminal.border#343D4A
  • terminal.foreground#D9D7CE
  • textBlockQuote.background#0e0f0e
  • textLink.activeForeground#dfb064
  • textLink.foreground#dfb064
  • textPreformat.foreground#D9D7CE
  • titleBar.activeBackground#0e0f0e
  • titleBar.activeForeground#738699
  • titleBar.border#0e0f0e
  • titleBar.inactiveBackground#0e0f0e
  • titleBar.inactiveForeground#516170
  • walkThrough.embeddedEditorBackground#0e0f0e
  • widget.shadow#11141AB3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a5755
comment.block.preprocessor#ffe2a9
comment.documentation, comment.block.documentation#998f6citalic
keyword.other.phpdoc#d75f5f
keyword.operator, punctuation.separator.pointer-access.c, punctuation.separator.pointer-access.cpp#ffe2a9
storage, storage.type, keyword, keyword.control, keyword.operator.logical.python, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.typeof, keyword.operator.expression.instanceof, keyword.operator.new#4a7074bold
support.type#dfb064
constant.language, constant.numeric, constant.character, support.constant#d75f5f
variable#bbd0d3
variable.language, support.variable#71abb7italic
entity.name.function#dfb064
variable.parameter.function#71abb7
meta.function-call.generic.python, support.function#dfb064
meta.object-literal.key#71abb7
variable.parameter.function-call.python#71abb7
punctuation.definition.decorator.python, entity.name.function.decorator.python#d75f5fbold
punctuation.definition.directive.c, punctuation.definition.directive.cpp#d75f5fbold
meta.return-type, support.class, entity.other.inherited-class, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#dfb064bold
string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, constant.character.format.placeholder.other.python#ffe2a9
string.regexp#5e9577
support.type.property-name.json#71abb7
entity.name.tag, entity.name.tag.yaml#71abb7
meta.tag#71abb7
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#dfb064
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#888888
entity.name.tag.html, entity.name.tag.js, support.class.component.js#dfb064
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#998f6c
constant.character.entity, punctuation.definition.entity#d75f5f
meta.jsx.children.js.jsx#ddddc1
meta.selector, meta.selector entity, meta.selector entity punctuation, punctuation.definition.entity.css, entity.name.tag.css#dfb064
meta.property-name, support.type.property-name#ddddc1
meta.property-value constant.other, support.constant.property-value, punctuation.definition.constant.css#d75f5f
keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css#d75f5f
keyword.other.importantbold
punctuation.definition.block.tag.jsdoc, punctuation.definition.inline.tag.jsdoc, storage.type.class.jsdoc#d75f5f
punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, entity.name.type.instance.jsdoc#998f6c
constant.keyword.clojure#ffe2a9
markup.heading.markdown, punctuation.definition.heading.markdown#d75f5f
meta.link.inline.markdown, markup.underline.link.markdown, punctuation.definition.metadata.markdown, markup.underline.link.image.markdown, markup.underline.link.markdown, punctuation.definition.link.markdown, meta.link.email.lt-gt.markdown#71abb7
punctuation.definition.list.begin.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, string.other.link.description.markdown, string.other.link.title.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, punctuation.definition.constant.markdown#dfb064
punctuation.definition.quote.begin.markdown#5e9577
punctuation.definition.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.raw.block.markdown, markup.inline.raw.string.markdown#ffe2a9
markup.bold.markdown, punctuation.definition.bold.markdownbold
markup.italic.markdown, punctuation.definition.italic.markdownitalic
punctuation.definition.arguments.begin.math.tex, punctuation.definition.arguments.end.math.tex, punctuation.math.end.bracket.curly, punctuation.math.begin.bracket.curly#8197BF
punctuation.definition.function.tex, punctuation.definition.function.math.tex, punctuation.definition.function.latex, keyword.control.preamble.latex#fad07a
punctuation.definition.math.begin.markdown, punctuation.definition.math.end.markdown#99ad6a
punctuation.definition.constant.math.tex#d75f5f
Desert Wanderer by Faris Hasim - VS Code Theme