Skip to main content
CodingTheme

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#EBBD5B
  • activityBar.activeFocusBorder#EBBD5B
  • activityBar.background#1a1a1a
  • activityBar.border#1a1a1a
  • activityBar.foreground#cbccc6
  • activityBar.inactiveForeground#444444
  • activityBarBadge.background#d04949
  • activityBarBadge.foreground#cbccc6
  • badge.background#d04949
  • badge.foreground#fff
  • breadcrumb.activeSelectionForeground#cbccc6
  • breadcrumb.focusForeground#cbccc6
  • breadcrumb.foreground#666
  • breadcrumbPicker.background#333
  • button.background#EBBD5B
  • button.foreground#1a1a1a
  • button.hoverBackground#EBBD5B
  • button.secondaryBackground#666
  • button.secondaryForeground#1a1a1a
  • button.secondaryHoverBackground#EBBD5B
  • debugExceptionWidget.background#333
  • debugExceptionWidget.border#2a2a2a
  • debugToolBar.background#333
  • diffEditor.insertedTextBackground#bae67e26
  • diffEditor.removedTextBackground#f29e7426
  • dropdown.background#333
  • dropdown.border#373e4c
  • dropdown.foreground#707a8c
  • editor.background#1a1a1a
  • editor.findMatchBackground#ebbd5b6b
  • editor.findMatchBorder#ebbd5b6b
  • editor.findMatchHighlightBackground#ebbd5b2e
  • editor.findRangeHighlightBackground#ebbd5b6b
  • editor.foreground#cbccc6
  • editor.inactiveSelectionBackground#333
  • editor.lineHighlightBackground#333333
  • editor.rangeHighlightBackground#2a2a2a
  • editor.selectionBackground#333
  • editor.selectionHighlightBackground#262f3e
  • editor.wordHighlightBackground#ebbd5b31
  • editor.wordHighlightStrongBackground#EBBD5B33
  • editorBracketMatch.background#707a8c4d
  • editorBracketMatch.border#707a8c99
  • editorCodeLens.foreground#697c89
  • editorCursor.foreground#cbccc6
  • editorError.foreground#ff3333
  • editorGroup.border#666
  • editorGroup.emptyBackground#1a1a1a
  • editorGroupHeader.border#2a2a2a
  • editorGroupHeader.noTabsBackground#1a1a1a
  • editorGroupHeader.tabsBackground#1a1a1a
  • editorGroupHeader.tabsBorder#2a2a2a
  • editorGutter.addedBackground#a6cc7099
  • editorGutter.deletedBackground#f2798399
  • editorGutter.modifiedBackground#77a8d999
  • editorHoverWidget.background#333
  • editorHoverWidget.border#1a1a1a
  • editorHoverWidget.foreground#cbccc6
  • editorIndentGuide.activeBackground#666
  • editorIndentGuide.background#2a2a2a
  • editorLineNumber.activeForeground#aaaaaa
  • editorLineNumber.foreground#444444
  • editorLink.activeForeground#daae50
  • editorMarkerNavigation.background#333
  • editorOverviewRuler.addedForeground#a6cc7099
  • editorOverviewRuler.border#2a2a2a
  • editorOverviewRuler.deletedForeground#f2798399
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#77a8d999
  • editorOverviewRuler.warningForeground#EBBD5B
  • editorRuler.foreground#707a8c4d
  • editorSuggestWidget.background#2a2a2a
  • editorSuggestWidget.border#1a1a1a
  • editorSuggestWidget.foreground#cbccc6
  • editorSuggestWidget.highlightForeground#fff
  • editorSuggestWidget.selectedBackground#444
  • editorWarning.foreground#EBBD5B
  • editorWhitespace.foreground#666
  • editorWidget.background#333
  • editorWidget.foreground#cbccc6
  • extensionButton.prominentBackground#EBBD5B
  • extensionButton.prominentForeground#1a1a1a
  • extensionButton.prominentHoverBackground#fac761
  • focusBorder#333
  • foreground#d3d4d5
  • gitDecoration.conflictingResourceForeground#FF6AC1
  • gitDecoration.deletedResourceForeground#f2777a
  • gitDecoration.ignoredResourceForeground#666
  • gitDecoration.modifiedResourceForeground#9c9
  • gitDecoration.submoduleResourceForeground#c9c
  • gitDecoration.untrackedResourceForeground#6cc
  • input.background#444
  • input.border#444
  • input.foreground#cbccc6
  • input.placeholderForeground#666666
  • inputOption.activeBackground#616161
  • inputOption.activeBorder#ccc
  • inputOption.activeForeground#fff
  • inputValidation.errorBackground#d04949
  • inputValidation.errorBorder#d04949
  • inputValidation.infoBackground#6699CC
  • inputValidation.warningBackground#f99157
  • list.activeSelectionBackground#1a1a1a
  • list.activeSelectionForeground#cbccc6
  • list.focusBackground#2a2a2a
  • list.focusForeground#EBBD5B
  • list.highlightForeground#EBBD5B
  • list.hoverBackground#1a1a1a
  • list.hoverForeground#fff
  • list.inactiveSelectionBackground#1a1a1a
  • list.inactiveSelectionForeground#cbccc6
  • list.invalidItemForeground#586070
  • notificationCenter.border#444
  • notificationCenterHeader.background#1a1a1a
  • notificationCenterHeader.foreground#cbccc6
  • notifications.background#2a2a2a
  • notifications.border#1a1a1a
  • notifications.foreground#cbccc6
  • notificationsErrorIcon.foreground#f2777a
  • notificationsInfoIcon.foreground#6699CC
  • notificationsWarningIcon.foreground#ebbd5b
  • notificationToast.border#2a2a2a
  • panel.background#1a1a1a
  • panel.border#1a1a1a
  • panelTitle.activeBorder#fff
  • panelTitle.activeForeground#cbccc6
  • panelTitle.inactiveForeground#707379
  • peekView.border#2a2a2a
  • peekViewEditor.background#1a1a1a
  • peekViewEditor.matchHighlightBackground#EBBD5B33
  • peekViewEditor.matchHighlightBorder#EBBD5B33
  • peekViewResult.background#333
  • peekViewResult.fileForeground#707a8c
  • peekViewResult.matchHighlightBackground#EBBD5B33
  • peekViewTitle.background#333
  • peekViewTitleDescription.foreground#707a8c
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#2a2a2a
  • pickerGroup.foreground#484f5e
  • progressBar.background#EBBD5B
  • scrollbar.shadow#29292b
  • scrollbarSlider.activeBackground#666
  • scrollbarSlider.background#1a1a1a
  • scrollbarSlider.hoverBackground#666
  • settings.headerForeground#cbccc6
  • settings.modifiedItemIndicator#77a8d9
  • sideBar.background#2a2a2a
  • sideBar.border#2a2a2a
  • sideBar.foreground#cbccc6
  • sideBarSectionHeader.background#444
  • sideBarSectionHeader.foreground#cbccc6
  • sideBarTitle.foreground#cbccc6
  • statusBar.background#1a1a1a
  • statusBar.border#1a1a1a
  • statusBar.debuggingBackground#f99157
  • statusBar.debuggingForeground#1a1a1a
  • statusBar.foreground#8e9196
  • statusBar.noFolderBackground#333
  • statusBarItem.activeBackground#000
  • statusBarItem.hoverBackground#1a1a1a
  • statusBarItem.prominentBackground#2a2a2a
  • statusBarItem.prominentHoverBackground#1a1a1a
  • statusBarItem.remoteBackground#f99157
  • tab.activeBackground#1a1a1a
  • tab.activeBorderTop#EBBD5B
  • tab.activeForeground#cbccc6
  • tab.border#1a1a1a
  • tab.hoverBackground#1a1a1a
  • tab.inactiveBackground#2a2a2a
  • tab.unfocusedActiveBorderTop#1a1a1a
  • tab.unfocusedInactiveForeground#707a8c
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#7289DA
  • terminal.ansiBrightBlack#111111
  • terminal.ansiBrightBlue#95e6cb
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#bae67e
  • terminal.ansiBrightMagenta#d4bfff
  • terminal.ansiBrightRed#f28779
  • terminal.ansiBrightWhite#5f96d7
  • terminal.ansiBrightYellow#e5c331
  • terminal.ansiCyan#95e6cb
  • terminal.ansiGreen#EBBD5B
  • terminal.ansiMagenta#cfbafa
  • terminal.ansiRed#d04949
  • terminal.ansiWhite#cbccc6
  • terminal.ansiYellow#e5a430
  • terminal.background#2a2a2a
  • terminal.foreground#cbccc6
  • textBlockQuote.background#333
  • textLink.activeForeground#EBBD5B
  • textLink.foreground#EBBD5B
  • textPreformat.foreground#d3d4d5
  • titleBar.activeBackground#1a1a1a
  • titleBar.activeForeground#cbccc6
  • titleBar.border#2a2a2a
  • titleBar.inactiveBackground#1a1a1a
  • titleBar.inactiveForeground#707a8c
  • walkThrough.embeddedEditorBackground#333
  • welcomePage.background#1a1a1a
  • welcomePage.buttonBackground#2a2a2a
  • welcomePage.buttonHoverBackground#444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter.function#cbccc6
meta.function.block.start.handlebars support.constant.handlebars, meta.function.block.end.handlebars support.constant.handlebars, text.html.handlebars meta.function.inline.other.handlebars variable.parameter.handlebars, text.html.handlebars meta.function.inline.other.handlebars support.constant.handlebars#66cccc
entity.other.attribute-name.handlebars variable.parameter.handlebars#bf616a
comment, punctuation.definition.comment#666
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#cbccc6
none#cbccc6
keyword.operator#cbccc6
keyword#cc99cc
variable#f2777a
entity.name.function, meta.require, support.function.any-method#6699cc
support.class, entity.name.class, entity.name.type.class#EBBD5B
meta.class#f2f0ec
keyword.other.special-method#6699cc
storage#cc99cc
support.function#66cccc
string, constant.other.symbol, entity.other.inherited-class#EBBD5B
constant.numeric#66cccc
none#f99157
none#f99157
constant#66cccc
entity.name.tag#F2777A
entity.other.attribute-name#99cc99
entity.other.attribute-name.id#6699cc
none#f99157
markup.heading punctuation.definition.heading, entity.name.section#6699CC
keyword.other.unit#666666
markup.bold, punctuation.definition.bold#EBBD5Bbold
markup.italic, punctuation.definition.italic#cc99ccitalic
markup.raw.inline#99cc99
string.other.link#f2777a
meta.link#f99157
markup.list#f2777a
markup.quote#f99157
meta.separator#cbccc6
markup.inserted, markup.inserted.git_gutter#99CC99
markup.deleted, markup.deleted.git_gutter#f2777a
markup.changed, markup.changed.git_gutter#cc99cc
markup.ignored, markup.ignored.git_gutter#515151
markup.untracked, markup.untracked.git_gutter#333
constant.other.color#66cccc
string.regexp#66cccc
constant.character.escape#66cccc
variable.interpolation#f99157
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
meta.paragraph.markdown#CBCCC6
meta.attribute.style.html, meta.attribute.charset.html#99cc99
entity.name.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#F2777A
punctuation.definition.tag.begin.js, punctuation.definition.tag.js#aaaaaa
constant.language.import-export-all.js#66cccc
meta.objectliteral.js#CBCCC6
comment.block.css#666
meta.function.url.css#69c
punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css#66CCCC
keyword.control.at-rule.media.css#FF6AC1
entity.other.attribute-name.class.css#EBBD5B
entity.other.attribute-name.id.css#f99157
keyword.other.important.css#c9c
keyword.operator.combinator.css#f2777a
entity.other.attribute-name.pseudo-element.css#99CC99
support.type.property-name.css#cbccc6
support.constant.property-value.css#66CCCC
entity.other.attribute-name.pseudo-class.css#9c9
entity.name.tag.css#F2777A
entity.name.tag.reference.scss#9c9
string.quoted.double.scss#69cunderline
punctuation.definition.string.begin.scss, punctuation.definition.string.end.scss#6cc
punctuation.definition.variable.php, variable.other.global.safer.php#F2777A
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#c9c
support.type.property-name.json#cbccc6
constant.language.json, constant.numeric.json#66cccc
string.quoted.double.json, string.quoted.double.json.comments#9c9
meta.directive.vue#9c9

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Newton Next (Official) by Marco Bertolini - VS Code Theme