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#575765
  • activityBar.foreground#40B3FF
  • activityBar.inactiveForeground#fff
  • badge.foreground#fff
  • breadcrumb.background#fff
  • breadcrumb.focusForeground#FF5500
  • breadcrumb.foreground#575765
  • button.background#40B3FF
  • debugConsole.errorForeground#ff0000
  • debugConsole.infoForeground#F6FAFD
  • debugConsole.sourceForeground#F6FAFD
  • debugConsole.warningForeground#40B3FF
  • editor.background#F6FAFD
  • editor.findMatchBackground#40B3FF
  • editor.findMatchHighlightBackground#D7D4F0
  • editor.foreground#7B776F
  • editor.hoverHighlightBackground#D7D4F0
  • editor.inactiveSelectionBackground#D7D4F0
  • editor.lineHighlightBackground#D7D4F0
  • editor.selectionBackground#D7D4F0
  • editor.selectionHighlightBackground#D7D4F0
  • editor.wordHighlightBackground#D7D4F0
  • editorGroup.border#FF5500
  • editorGroup.dropBackground#ff5500cc
  • editorGroupHeader.tabsBackground#676778
  • editorHint.foreground#D7D4F0
  • editorHoverWidget.background#F6FAFD
  • editorHoverWidget.border#575765
  • editorHoverWidget.foreground#575765
  • editorIndentGuide.activeBackground#F6FAFD
  • editorIndentGuide.background#F6FAFD
  • editorInfo.foreground#7B776F
  • editorPane.background#7e7e94
  • editorSuggestWidget.background#F6FAFD
  • editorSuggestWidget.selectedBackground#40B3FF
  • editorWidget.background#676778
  • editorWidget.foreground#b3b0c9
  • extensionBadge.remoteBackground#40B3FF
  • extensionButton.prominentBackground#40B3FF
  • focusBorder#676778
  • foreground#999999
  • gitDecoration.addedResourceForeground#D7D4F0
  • gitDecoration.conflictingResourceForeground#FF5500
  • gitDecoration.deletedResourceForeground#FF5500
  • gitDecoration.ignoredResourceForeground#9896a7
  • gitDecoration.modifiedResourceForeground#D7D4F0
  • gitDecoration.stageDeletedResourceForeground#9896a7
  • gitDecoration.stageModifiedResourceForeground#40B3FF
  • gitDecoration.untrackedResourceForeground#D7D4F0
  • icon.foreground#fff
  • input.background#fff
  • input.border#676778
  • input.foreground#7B776F
  • input.placeholderForeground#7B776F
  • list.activeSelectionBackground#575765
  • list.errorForeground#FF5500
  • list.focusBackground#575765
  • list.focusForeground#fff
  • list.hoverBackground#575765
  • list.hoverForeground#fff
  • list.inactiveSelectionBackground#575765
  • list.warningForeground#f36e6e
  • notificationCenter.border#676778
  • notificationCenterHeader.background#676778
  • notificationCenterHeader.foreground#fff
  • notifications.background#fff
  • notifications.border#676778
  • notifications.foreground#676778
  • notificationToast.border#676778
  • panel.background#575765
  • panelSectionHeader.foreground#fff
  • panelTitle.activeBorder#ff0000
  • panelTitle.activeForeground#fff
  • panelTitle.inactiveForeground#D7D4F0
  • peekView.border#FF5500
  • peekViewEditor.background#F6FAFD
  • peekViewEditor.matchHighlightBackground#D7D4F0
  • peekViewResult.background#676778
  • peekViewResult.fileForeground#fff
  • peekViewResult.lineForeground#fff
  • peekViewResult.matchHighlightBackground#676778
  • peekViewResult.selectionForeground#D7D4F0
  • peekViewTitle.background#676778
  • peekViewTitleDescription.foreground#fff
  • peekViewTitleLabel.foreground#fff
  • progressBar.background#FF5500
  • quickInputList.focusBackground#7A7A8B
  • settings.checkboxBackground#575765
  • settings.dropdownBackground#575765
  • settings.headerForeground#575765
  • settings.numberInputBackground#575765
  • settings.textInputBackground#575765
  • sideBar.background#676778
  • sideBar.foreground#fff
  • sideBarSectionHeader.background#575765
  • sideBarTitle.foreground#fff
  • statusBar.background#FF5500
  • statusBar.debuggingBackground#40B3FF
  • statusBar.noFolderBackground#FF5500
  • statusBarItem.activeBackground#40B3Ff
  • tab.activeBorder#FF5500
  • tab.activeForeground#333333
  • tab.hoverBorder#FF5500
  • tab.inactiveBackground#fff
  • tab.inactiveForeground#999999
  • terminal.ansiBrightCyan#40B3FF
  • terminal.ansiBrightMagenta#FF5500
  • terminal.ansiBrightRed#FF5500
  • terminal.foreground#F6FAFD
  • titleBar.activeBackground#575765
  • titleBar.activeForeground#fff
  • welcomePage.background#fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8099B3—
comment.block.preprocessor#8099B3—
comment.documentation, comment.block.documentation#8099B3—
invalid.illegal#660000—
keyword.operator#777777—
keyword, storage#3080B5—
storage.type, support.type#7B776B—
constant.language, support.constant, variable.language#72A25D—
variable, support.variable, variable.parameter#7B776F—
entity.name.function, support.function, meta.function, meta.function-call#C05726—
entity.name.type, entity.other.inherited-class, support.class#C05726—
entity.name.exception#3080B5—
entity.name.section—bold
constant.numeric, constant.character, constant#72A25D—
string#C05726—
constant.character.escape#7B776F—
string.regexp#FF5500—
constant.other.symbol#C05726—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#C05726—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#C05726—
entity.name.tag#C05726—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#3080B5—
constant.character.entity, punctuation.definition.entity#C05726—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#C05726—
meta.property-name, support.type.property-name#7B776F—
meta.property-value, meta.property-value constant.other, support.constant.property-value#C05726—
keyword.other.important—bold
markup.changed#000000—
markup.deleted#000000—
markup.italic—italic
markup.error#660000—
markup.inserted#000000—
meta.link#4B83CD—
markup.output, markup.raw#777777—
markup.prompt#777777—
markup.heading#AA3731—
markup.bold—bold
markup.traceback#660000—
markup.underline—underline
markup.quote#7A3E9D—
markup.list#4B83CD—
markup.bold, markup.italic#448C27—
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343—
meta.diff.header.from-file#434343—
meta.diff.header.to-file#434343—
string.template,punctuation.definition.string.template#FF5500—
text.html#7B776B—
entity.other.attribute-name#3080B5—
comment.block,punctuation.definition.comment#8099B3bold
keyword.control.import#3080B5—
keyword.control.from#3080B5—
meta.brace.round,punctuation.decorator,punctuation.definition.block,meta.brace.square#7B776F—
punctuation.terminator.statement,punctuation.section.embedded,punctuation.definition.binding-pattern,keyword.operator.logical.#7B776F—
support.class#C05726—
storage.type,storage.modifier#3080B5—
keyword.control #3080B5—
meta.jsx.children,source.ignore#7B776F—
meta.object-literal.key,punctuation.separator.dictionary.pair.json,keyword.operator,punctuation.separator.parameter,#7B776F—
support.type.object.module,support.variable.property,keyword.operator.optional,punctuation.separator.dictionary.key-value.#7B776F—
entity.other.inherited-class#C05726—
entity.other.attribute-name.class.css,string.unquoted.attribute-value,punctuation.accessor#C05726—
support.type.property-name,meta.property-value,punctuation.definition.binding-pattern.object,keyword.operator.ternary.#7B776F—
support.constant.property-value,punctuation.separator.array.json#7B776F—
constant.numeric,keyword.other.unit#72A25D—
SV Color Theme by rogeriosantos - VS Code Theme