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#d4d0cc
  • activityBar.background#181512
  • activityBar.dropBorder#d4d0cc
  • activityBar.foreground#d4d0cc
  • activityBar.inactiveForeground#7d7064
  • activityBarBadge.background#528aff
  • activityBarBadge.foreground#ffffff
  • badge.background#f0d7aa20
  • badge.foreground#ffffff
  • button.background#528aff
  • button.foreground#fff
  • button.hoverBackground#7dafff
  • button.secondaryBackground#7d7064
  • button.secondaryForeground#fff
  • button.secondaryHoverBackground#a89f97
  • charts.blue#7dafff
  • charts.foreground#fff
  • charts.green#00c896
  • charts.lines#7d7064
  • charts.orange#fc8d4c
  • charts.purple#7e80e6
  • charts.red#fc5432
  • charts.yellow#fc8d4c
  • checkbox.background#528aff
  • checkbox.border#528aff
  • checkbox.foreground#fff
  • debugConsole.errorForeground#fc5432
  • debugConsole.infoForeground#7dafff
  • debugConsole.sourceForeground#d4d0cc
  • debugConsole.warningForeground#fc8d4c
  • debugConsoleInputIcon.foreground#d4d0cc
  • debugExceptionWidget.background#fc543280
  • debugExceptionWidget.border#fc5432
  • debugToolBar.background#201c18
  • diffEditor.insertedTextBackground#00c89640
  • diffEditor.removedTextBackground#fc543240
  • dropdown.background#443c35
  • dropdown.listBackground#201c18
  • editor.background#28231e
  • editor.findMatchBackground#7e80e6c0
  • editor.findMatchHighlightBackground#7e80e660
  • editor.foreground#fff
  • editor.hoverHighlightBackground#443c3580
  • editor.lineHighlightBackground#28231e
  • editor.rangeHighlightBackground#ffffff0b
  • editor.selectionBackground#7d706480
  • editor.selectionHighlightBackground#7d706430
  • editor.wordHighlightBackground#7d706430
  • editor.wordHighlightStrongBackground#7d706430
  • editorBracketMatch.background#7d706430
  • editorBracketMatch.border#443c3500
  • editorCursor.foreground#ffffff
  • editorError.foreground#fa381e
  • editorGroup.border#201c18
  • editorGroup.dropBackground#7d706480
  • editorGroupHeader.tabsBackground#201c18
  • editorGutter.addedBackground#00c89680
  • editorGutter.deletedBackground#fa381e80
  • editorGutter.modifiedBackground#7dafff80
  • editorHoverWidget.background#443c35
  • editorHoverWidget.border#443c35
  • editorIndentGuide.activeBackground#7d7064
  • editorIndentGuide.background#443c35
  • editorLineNumber.activeForeground#a89f97
  • editorLineNumber.foreground#a89f97
  • editorLink.activeForeground#528aff
  • editorOverviewRuler.addedForeground#00c89680
  • editorOverviewRuler.bracketMatchForeground#D5D8DA80
  • editorOverviewRuler.deletedForeground#fa381e80
  • editorOverviewRuler.errorForeground#fa381eE6
  • editorOverviewRuler.findMatchForeground#7e80e6
  • editorOverviewRuler.modifiedForeground#7dafff80
  • editorOverviewRuler.warningForeground#fc8d4c80
  • editorSuggestWidget.background#28231e
  • editorSuggestWidget.border#7d7064
  • editorWarning.foreground#fc8d4c80
  • editorWhitespace.foreground#443c35
  • editorWidget.background#201c18
  • focusBorder#ffffff00
  • gitDecoration.untrackedResourceForeground#00c896
  • input.background#443c35
  • inputOption.activeBorder#7d7064
  • inputValidation.errorBackground#fc5432
  • inputValidation.errorBorder#fc5432
  • inputValidation.infoBackground#7dafff
  • inputValidation.infoBorder#7dafff
  • inputValidation.warningBackground#fc8d4c
  • inputValidation.warningBorder#fc8d4c
  • list.activeSelectionBackground#443c35
  • list.activeSelectionForeground#ffffff
  • list.deemphasizedForeground#7d7064
  • list.dropBackground#7d7064
  • list.errorForeground#fc5432
  • list.filterMatchBackground#7dafff60
  • list.focusBackground#7d7064
  • list.highlightForeground#d4d0cc
  • list.hoverBackground#28231e
  • list.inactiveSelectionBackground#7d706430
  • list.invalidItemForeground#fc5432
  • list.warningForeground#fc8d4c
  • listFilterWidget.background#7dafff30
  • listFilterWidget.noMatchesOutline#fc543230
  • listFilterWidget.outline#00000000
  • menu.background#201c18
  • menu.foreground#cccccc
  • minimap.errorHighlight#fc5432
  • minimap.findMatchHighlight#7e80e6
  • minimap.selectionHighlight#7d706480
  • minimap.warningHighlight#fc8d4c
  • minimapGutter.addedBackground#00c896
  • minimapGutter.deletedBackground#fc5432
  • minimapGutter.modifiedBackground#7dafff
  • minimapSlider.activeBackground#a89f9730
  • minimapSlider.background#a89f9720
  • minimapSlider.hoverBackground#a89f9730
  • notificationLink.foreground#528aff
  • panel.border#7d7064
  • panelTitle.activeBorder#7d7064
  • panelTitle.activeForeground#d4d0cc
  • panelTitle.inactiveForeground#7d7064
  • peekView.border#7d7064
  • peekViewEditor.background#28231e
  • peekViewEditor.matchHighlightBackground#7d7064
  • peekViewResult.background#201c18
  • peekViewResult.matchHighlightBackground#7d7064
  • peekViewResult.selectionBackground#7d7064
  • peekViewTitle.background#201c18
  • pickerGroup.foreground#7d7064
  • progressBar.background#7d7064
  • scrollbar.shadow#18151200
  • selection.background#a89f97
  • settings.focusedRowBackground#7d706400
  • sideBar.background#201c18
  • sideBarSectionHeader.background#201c18
  • statusBar.background#181512
  • statusBar.debuggingBackground#7d7064
  • statusBar.noFolderBackground#7d7064
  • statusBarItem.remoteBackground#f0d7aa
  • tab.border#201c18
  • tab.inactiveBackground#201c18
  • tab.inactiveForeground#a89f97
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#7dafff
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#7dafff
  • terminal.ansiBrightCyan#8de1eb
  • terminal.ansiBrightGreen#00c896
  • terminal.ansiBrightMagenta#7e80e6
  • terminal.ansiBrightRed#fc5432
  • terminal.ansiBrightWhite#d4d0cc
  • terminal.ansiBrightYellow#fc8d4c
  • terminal.ansiCyan#8de1eb
  • terminal.ansiGreen#00c896
  • terminal.ansiMagenta#7e80e6
  • terminal.ansiRed#fc5432
  • terminal.ansiWhite#d4d0cc
  • terminal.ansiYellow#fc8d4c
  • textLink.activeForeground#528aff
  • textLink.foreground#528aff
  • titleBar.activeBackground#181512
  • widget.shadow#18151200

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#7dafff
comment, punctuation.definition.comment#7d7064
string#f0d7aa
keyword.operator, meta.property-value.css#fc5432
punctuation.definition, punctuation.section.property-list, punctuation.separator#bfd9ff
punctuation.terminator#fff
punctuation.section.embedded#fc8d4c
punctuation.section#bfd9ff
punctuation.definition.keyword#fc5432
meta.template.expression#7dafff
meta.attribute-selector#f0d7aa
constant.numeric#00c896
constant.language#8de1eb
constant.character, constant.other#7dafff
variable#fff
keyword#fc8d4c
storage#fc5432
storage.type#bfd9ffitalic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#bfd9ffunderline
entity.other.inherited-class#bfd9ffitalic underline
entity.name.function#7dafff
variable.parameter, variable.other.object, variable.scss#bfd9ffitalic
entity.name.tag#7dafff
entity.other.attribute-name#bfd9ff
support.function#8de1eb
support.constant#8de1eb
support.type#fffitalic
support.class#7dafffitalic
support.other.variable
invalid#f0d7aa
invalid.deprecated#f0d7aa
string.quoted, punctuation.definition.string#f0d7aa
meta.diff, meta.diff.header#7d7064
markup.deleted#fc5432
markup.inserted#00c896
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#7dafffA0
entity.name.filename.find-in-files#E6DB74
markup.quote#fc5432
markup.list#E6DB74
markup.bold, markup.italic#8de1eb
markup.inline.raw#FD971F
markup.heading#00c896
markup.heading.setext#00c896bold
markup.heading.markdownbold
markup.quote.markdown#7d7064italic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#7dafff
markup.underline.link.markdown,markup.underline.link.image.markdown#E6DB74
markup.italic.markdownitalic
markup.list.unnumbered.markdown, markup.list.numbered.markdown#bfd9ff
punctuation.definition.list.begin.markdown#00c896
token.info-token#7dafff
token.warn-token#FD971F
token.error-token#F44747
token.debug-token#B267E6
variable.language#FD971F
Coucou Theme by jsmith - VS Code Theme