Skip to main content
Coding Theme

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.activeBackground#18202b
  • activityBar.background#18202b
  • activityBar.foreground#c6c1bd
  • activityBar.inactiveForeground#b16d13
  • activityBarBadge.background#171c23
  • activityBarBadge.foreground#eeeeee
  • editor.background#18202b
  • editor.foreground#f1c66a
  • editor.selectionBackground#313844
  • editorBracketHighlight.foreground1#cac5bb
  • editorBracketHighlight.foreground2#cac5bb
  • editorBracketHighlight.foreground3#cac5bb
  • editorBracketHighlight.foreground4#cac5bb
  • editorBracketHighlight.foreground5#cac5bb
  • editorBracketHighlight.foreground6#cac5bb
  • editorGroup.border#582209
  • editorGroupHeader.tabsBackground#383e47
  • editorGutter.addedBackground#bff7e6
  • editorGutter.background#18202b
  • editorGutter.deletedBackground#973e45
  • editorGutter.modifiedBackground#e68e1a
  • editorHoverWidget.background#111924
  • editorHoverWidget.border#d1c4ab
  • editorHoverWidget.foreground#e68e1a
  • editorHoverWidget.highlightForeground#e68e1a
  • editorHoverWidget.statusBarBackground#111924
  • editorLineNumber.activeForeground#eeeeee
  • editorLineNumber.foreground#727881
  • editorWhitespace.foreground#4b4b4d71
  • gitDecoration.addedResourceForeground#bff7e6
  • gitDecoration.deletedResourceForeground#973e45
  • gitDecoration.modifiedResourceForeground#e68e1a
  • gitDecoration.untrackedResourceForeground#bff7e6
  • icon.foreground#e68e1a
  • list.activeSelectionBackground#2d3541
  • list.activeSelectionForeground#eeeeee
  • list.hoverBackground#18202b
  • list.hoverForeground#eeeeee
  • list.inactiveSelectionBackground#18202b
  • list.inactiveSelectionForeground#eeeeee
  • menu.background#2d3541
  • menu.foreground#eeebe8
  • menu.selectionBackground#c4822d
  • menu.selectionForeground#000000
  • minimap.background#18202b
  • minimap.errorHighlight#973e4599
  • minimap.findMatchHighlight#bff7e699
  • minimap.selectionHighlight#c4822d99
  • minimap.warningHighlight#e68e1a99
  • peekView.border#c4822d
  • peekViewEditor.background#1f2738
  • peekViewEditor.matchHighlightBackground#c4822d33
  • peekViewEditorGutter.background#1f2738
  • peekViewResult.background#1f2738
  • peekViewResult.fileForeground#e68e1a
  • peekViewResult.lineForeground#d1c4ab
  • peekViewResult.matchHighlightBackground#c4822d33
  • peekViewTitle.background#2d3541
  • peekViewTitleLabel.foreground#e68e1a
  • pickerGroup.border#582209
  • pickerGroup.foreground#cac5bb
  • quickInput.background#1f2738
  • quickInput.foreground#c6c1bd
  • quickInputList.focusBackground#3a4659
  • quickInputList.focusForeground#ffffff
  • quickInputTitle.background#3a4659
  • scrollbarSlider.activeBackground#58687e80
  • scrollbarSlider.background#3f4c5e80
  • scrollbarSlider.hoverBackground#4c5b7080
  • sideBar.background#111924
  • sideBar.border#582209
  • sideBar.foreground#d1c4ab
  • sideBarSectionHeader.foreground#d1c4ab
  • sideBarTitle.foreground#c6c1bd
  • statusBar.background#383e47
  • statusBar.border#582209
  • statusBar.debuggingBackground#973e45
  • statusBar.foreground#c6c1bd
  • statusBar.noFolderBackground#383e47
  • statusBarItem.hoverBackground#383e47
  • tab.activeBackground#12161d
  • tab.activeForeground#eeeeee
  • tab.border#582209
  • tab.inactiveBackground#242931
  • tab.inactiveForeground#727881
  • terminal.ansiBrightBlack#727881
  • terminal.ansiBrightBlue#1f7de9
  • terminal.background#1c2531
  • terminal.foreground#c6c1bd
  • terminalCursor.background#c6c1bd
  • terminalCursor.foreground#c6c1bd
  • textLink.foreground#d6b065
  • titleBar.activeBackground#171c23
  • titleBar.activeForeground#e68e1a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#727881italic
variable, string constant.other.placeholder#92acc2
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#e28871
keyword, storage.type, storage.modifier#cac5bb
entity.name.type.class, entity.name.type.class.js, entity.name.type.class.ts, entity.name.type.class.php, entity.other.inherited-class#44c493
text.html.basic, punctuation.definition.tag.html, entity.name.tag.html#e68e1a
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#e68e1a
string.quoted.double.html, string.quoted.single.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#92acc2
entity.other.attribute-name.html, punctuation.separator.key-value.html#f1c66a
text.html.derivative, meta.tag.inline.any.html, meta.tag.block.any.html#eeeeee
text.html.markdown, punctuation.definition.list.begin.markdown#d1c4ab
entity.other.attribute-name.class.css#92acc2
entity.other.attribute-name.id.css#92acc2
entity.name.tag.wildcard.css, meta.selector.css#92acc2
support.constant.property-value.css, support.constant.font-name.css, support.constant.color.w3c-standard-color-name.css, constant.numeric.css, constant.other.color.rgb-value.css, constant.other.color.hex.css, constant.other.color.hsl.css#e28871
string.quoted.double.css, string.quoted.single.css, meta.property-value.css string.quoted, support.function.url.css, meta.function.url.css#808f9b
meta.structure.dictionary.json string.quoted.double.json, meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.dictionary.json meta.structure.dictionary.value.json constant.language.json, meta.structure.dictionary.json meta.structure.dictionary.value.json constant.numeric.json#92acc2
markup.heading.markdown, punctuation.definition.heading.markdown, entity.name.section.markdown#808f9bbold
text.plain, text#ff6600
text.log, source.log#c6c1bd
entity.name.function.target.makefile, meta.scope.prerequisites.makefile#e28871
meta.scope.prerequisites.makefile, string.interpolated.makefile#f1c66a
comment.block.documentation, comment.block.documentation keyword.other.documentation, comment.line.documentation#7a7e80
comment.block.documentation punctuation.definition.keyword.doxygen, comment.block.documentation keyword.other.documentation.doxygen, comment.block.documentation entity.name.tag.doxygen, comment.block.documentation storage.type.class.doxygen#788283bold
IT-R Color Theme Dark Orange by IT-R - VS Code Theme