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.activeBorder#FF6347
  • activityBar.background#0A0A0C
  • activityBar.border#00000000
  • activityBarBadge.background#FF6347
  • breadcrumb.background#0A0A0C
  • button.background#FF6347
  • debugConsole.errorForeground#FF6347
  • debugConsole.infoForeground#FF6347
  • debugConsole.sourceForeground#7A7A7A
  • debugConsole.warningForeground#FFD700
  • debugConsoleInputIcon.foreground#FF6347
  • debugExceptionWidget.background#111216
  • debugExceptionWidget.border#17181D
  • debugIcon.breakpointDisabledForeground#45454A
  • debugIcon.breakpointForeground#FF6347
  • dropdown.background#111216
  • dropdown.border#17181D
  • editor.background#0A0A0C
  • editor.focusedStackFrameHighlightBackground#FF634766
  • editor.foreground#EEFFFF
  • editor.stackFrameHighlightBackground#FF634733
  • editorGroup.border#00000000
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#0A0A0C
  • editorGroupHeader.tabsBorder#00000000
  • editorHoverWidget.background#111216
  • editorHoverWidget.border#17181D
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#45454A
  • editorInlayHint.parameterForeground#7A7A7A
  • editorInlayHint.typeForeground#6DC4A8
  • editorSuggestWidget.background#111216
  • editorSuggestWidget.border#17181D
  • editorSuggestWidget.selectedBackground#17181D
  • editorWidget.background#111216
  • editorWidget.border#00000000
  • focusBorder#00000000
  • input.background#111216
  • input.border#17181D
  • list.activeSelectionBackground#17181D
  • list.activeSelectionForeground#FF6347
  • list.focusBackground#17181D
  • list.focusOutline#00000000
  • list.highlightForeground#FF6347
  • list.hoverBackground#111216
  • list.inactiveSelectionBackground#111216
  • menu.background#0A0A0C
  • menu.foreground#EEFFFF
  • menubar.selectionBackground#FF634733
  • menubar.selectionForeground#EEFFFF
  • panel.background#0A0A0C
  • panel.border#00000000
  • peekViewEditor.background#0A0A0C
  • peekViewResult.background#111216
  • peekViewTitle.background#111216
  • progressBar.background#FF6347
  • quickInput.background#111216
  • quickInput.foreground#EEFFFF
  • scrollbarSlider.activeBackground#FF6347
  • scrollbarSlider.background#FF634766
  • scrollbarSlider.hoverBackground#FF6347AA
  • selection.background#FF634740
  • sideBar.background#0A0A0C
  • sideBar.border#00000000
  • sideBarSectionHeader.background#0A0A0C
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#EEFFFF
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#0A0A0C
  • statusBar.border#00000000
  • statusBar.debuggingBackground#FF6347
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#EEFFFF
  • statusBar.noFolderBackground#0A0A0C
  • statusBarItem.hoverBackground#FF634733
  • tab.activeBackground#0A0A0C
  • tab.activeBorder#00000000
  • tab.border#00000000
  • tab.inactiveBackground#0A0A0C
  • tab.unfocusedActiveBorder#00000000
  • terminal.ansiBlack#0A0A0C
  • terminal.ansiBlue#5B8DB8
  • terminal.ansiBrightBlack#4A4A52
  • terminal.ansiBrightBlue#7AAED6
  • terminal.ansiBrightCyan#7AC4BC
  • terminal.ansiBrightGreen#89C99A
  • terminal.ansiBrightMagenta#FFA07A
  • terminal.ansiBrightRed#FF6347
  • terminal.ansiBrightWhite#EEFFFF
  • terminal.ansiBrightYellow#FFD700
  • terminal.ansiCyan#5BA8A0
  • terminal.ansiGreen#6EAD7E
  • terminal.ansiMagenta#FF6347
  • terminal.ansiRed#FF4500
  • terminal.ansiWhite#A8B8C4
  • terminal.ansiYellow#FFA030
  • terminal.background#0A0A0C
  • terminal.foreground#EEFFFF
  • terminal.selectionBackground#FF634730
  • terminalCursor.foreground#FF6347
  • textLink.foreground#FF6347
  • titleBar.activeBackground#0A0A0C
  • titleBar.activeForeground#EEFFFF
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0A0A0C
  • titleBar.inactiveForeground#EEFFFF99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6560italic
variable, variable.other, variable.other.readwrite, variable.language, support.other.variable, meta.block variable.other#D4CFC6
string constant.other.placeholder#C47D9E
variable.parameter#C4A882italic
constant.language, constant.character, constant.escape, constant.other.symbol, constant.other.key#FF7F50bold
support.constant#FF7F50
entity.name.tag, meta.tag.sgml#6DC4A8bold
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#78746E
keyword, keyword.control, keyword.other.template, keyword.other.substitution#FF6347bold
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic#A0503A
storage.type, storage.modifier, punctuation.separator.inheritance.php#FF6347bold
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, entity.name.method.js, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.module.js#C47D9Ebold
string, string.other.link#89C99A
punctuation.definition.string#6EAD7E
string.regexp, punctuation.definition.string.regexp#89C99A
constant.numeric, keyword.other.unit#6DC4A8bold
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types#6DC4A8bold
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, entity.other.attribute-name.class, entity.other.attribute-name.id#6DC4A8
punctuation, meta.delimiter, meta.brace, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.terminator.statement#78746E
invalid, invalid.illegal#FF4500bold
markup.heading, markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#FF6347bold
markup.bold#FF7F50bold
markup.italic#FFA07Aitalic
markup.inline.raw, markup.raw.block#C4A882
markup.underline.link, string.other.link#C47D9E
support.type.property-name.json#6DC4A8
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#6DC4A8
support.constant.property-value.css, support.constant.property-value.scss#C4A882
meta.decorator, punctuation.decorator, entity.name.function.decorator#C47D9Eitalic
janartau by ozek - VS Code Theme