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#8fb4ec2a
  • activityBar.activeBorder#F4A24C
  • activityBar.background#101732
  • activityBar.foreground#01ff01
  • activityBar.inactiveForeground#13a5b6
  • activityBarBadge.background#F26F77
  • activityBarBadge.foreground#ffffff
  • debugToolBar.background#171b3f
  • debugToolBar.border#ffffff42
  • dropdown.background#101732
  • dropdown.border#ffffff59
  • dropdown.foreground#ffffff
  • editor.background#10173281
  • editor.lineHighlightBackground#184053c5
  • editor.lineHighlightBorder#ffffff11
  • editor.selectionHighlightBorder#24e41286
  • editorBracketMatch.background#ffffff56
  • editorCursor.foreground#ffffff
  • editorGroup.emptyBackground#101732ab
  • editorGroupHeader.tabsBackground#101732
  • editorIndentGuide.activeBackground#fc630bfa
  • editorIndentGuide.background#00ffffad
  • editorLineNumber.activeForeground#ffffff
  • editorMarkerNavigation.background#8F93A205
  • editorSuggestWidget.background#101732
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#8F93A2
  • editorSuggestWidget.highlightForeground#80CBC4
  • editorWidget.background#101732
  • editorWidget.resizeBorder#80CBC4
  • focusBorder#ffffff99
  • gitDecoration.addedResourceForeground#fc4384
  • gitDecoration.conflictingResourceForeground#ff62b1
  • gitDecoration.ignoredResourceForeground#31cfff
  • gitDecoration.modifiedResourceForeground#d2a0fc
  • gitDecoration.untrackedResourceForeground#4bf53c
  • icon.foreground#48ec71
  • input.background#10173279
  • input.border#ffffff85
  • input.foreground#ffffff
  • input.placeholderForeground#93a1a1de
  • inputOption.activeBorder#ffffff
  • inputValidation.errorBackground#101732
  • inputValidation.errorBorder#F26F77
  • inputValidation.errorForeground#ff0000
  • inputValidation.infoBackground#052730
  • inputValidation.infoBorder#363b5f
  • inputValidation.warningBackground#5d5938
  • inputValidation.warningBorder#9d8a5e
  • list.activeSelectionBackground#ffffff1c
  • list.errorForeground#F26F77
  • list.hoverBackground#ffffff1e
  • list.hoverForeground#ffffff
  • panel.background#101732
  • panel.border#535370
  • panelTitle.activeBorder#f26f77
  • panelTitle.activeForeground#ffffff
  • peekViewEditor.background#101732
  • peekViewEditor.matchHighlightBackground#13a5b6
  • peekViewEditorGutter.background#101732
  • peekViewResult.background#101732
  • peekViewTitle.background#101732
  • sideBar.background#090b31d2
  • sideBarSectionHeader.background#ffffff1e
  • sideBarSectionHeader.foreground#10bccf
  • sideBarTitle.foreground#F4A24C
  • statusBar.background#101732
  • statusBar.foreground#fff
  • statusBar.noFolderBackground#101732
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.hoverBackground#21c75869
  • tab.activeBorder#F26F77
  • tab.activeForeground#ffffff
  • tab.border#1fcdfd00
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#101732
  • tab.inactiveForeground#93A1A1
  • tab.lastPinnedBorder#2aa19700
  • terminal.ansiBrightWhite#fdf6e3
  • terminal.ansiCyan#13a5b6
  • terminal.ansiGreen#A6D050
  • terminal.ansiMagenta#F26F77
  • terminal.ansiYellow#F4A24C
  • textLink.foreground#f83f96
  • titleBar.activeBackground#101732
  • titleBar.activeForeground#ffffffb4
  • titleBar.inactiveBackground#101732

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#ffffff75italic underline
meta.property-name.css, meta.property-list.css, source.css#ff2ba7
string, string.template#84eb6f
constant.numeric#cc60e7
punctuation.bracket.round.java#b6a613
constant.character, constant.other#29ff5e
meta.method.body.java#ffffff
variable.language#F34A3A
keyword, keyword.operator.logical, keyword.operator.constructor#f4a24c
keyword.other.unit.px.css#c4e728
keyword.operator#ff0000
storage#F26F77
storage.type#1dd670
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#A6D050
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block#00ccff
variable.other, variable.other.property, variable.other.block#ffffff
entity.other.inherited-class#ffbf00
storage.modifier.import, storage.modifier.package#ffffff
entity.name.function, support.function#fa01a7
variable.parameter, entity.name.variable.parameter, parameter.variable#00eeffitalic
entity.name.function-call#abb2bf
function.support.builtin, function.support.core#ffbf00
entity.name.tag, entity.name.tag.class.js#F26F77
punctuation.definition.tag.begin.html, meta.tag.structure.body.start.html, punctuation.definition.tag.end.html, meta.tag.structure.html.start.html#9b9292
text.html.derivative#e6e1e1
entity.name.tag.class, entity.name.tag.id#04ff26
entity.other.attribute-name#13a5b6
support.constant#ffffff
support.type, support.variable#ac4e4e
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#A6D050
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass#e732abitalic
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#17c01f
variable.css, variable.scss, variable.less, variable.sass#e9ec0c
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#b5d99c
unit.css, unit.scss, unit.less, unit.sass#c678dd
function.css, function.scss, function.less, function.sass#04e6ff
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
support.type.property-name.json#4a84da
string.detected-link#61afef
meta.diff, meta.diff.header#75715E
markup.deleted#e65f5c
markup.inserted#ffbf00
markup.changed#b5d99c
constant.numeric.line-number.find-in-files - match#04e6ffA0
entity.name.filename.find-in-files#b5d99c
entity.other.attribute-name.class.css#c811ff
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdownitalic
markup.underline.link.markdown#61afef
markup.quote.markdown#ffbf00
markup.raw.inline.markdown, markup.raw.block.markdown#04e6ff
bhupenderhere-theme by bhupenderhere - VS Code Theme