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.important—bold
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.markdown—bold
markup.italic.markdown, punctuation.definition.italic.markdown—italic
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—