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#1a1a1a
  • activityBar.foreground#7d7d7d
  • activityBarBadge.background#383838
  • badge.background#383838
  • badge.foreground#c1c1c1
  • button.background#333333
  • debugIcon.breakpointCurrentStackframeForeground#6796e6
  • debugIcon.breakpointDisabledForeground#848484
  • debugIcon.breakpointForeground#f44747
  • debugIcon.breakpointStackframeForeground#6796e6
  • debugIcon.breakpointUnverifiedForeground#848484
  • debugIcon.continueForeground#f44747
  • debugIcon.disconnectForeground#f44747
  • debugIcon.pauseForeground#f44747
  • debugIcon.restartForeground#6796e6
  • debugIcon.startForeground#6796e6
  • debugIcon.stepBackForeground#f44747
  • debugIcon.stepIntoForeground#f44747
  • debugIcon.stepOutForeground#f44747
  • debugIcon.stepOverForeground#f44747
  • debugIcon.stopForeground#6796e6
  • editor.background#1f1f1f
  • editor.lineHighlightBorder#303030
  • editorBracketHighlight.foreground1#f0c674
  • editorBracketHighlight.foreground2#b78bc3
  • editorBracketHighlight.foreground3#bec85d
  • editorGroupHeader.tabsBackground#1a1a1a
  • editorGroupHeader.tabsBorder#1a1a1a
  • editorIndentGuide.activeBackground#383838
  • editorIndentGuide.background#2a2a2a
  • editorLineNumber.foreground#727272
  • editorRuler.foreground#2a2a2a
  • editorSuggestWidget.background#1a1a1a
  • focusBorder#444444
  • foreground#888888
  • gitDecoration.ignoredResourceForeground#444444
  • input.background#2a2a2a
  • input.foreground#e0e0e0
  • inputOption.activeBackground#3a3a3a
  • list.activeSelectionBackground#212121
  • list.activeSelectionForeground#f5f5f5
  • list.focusBackground#292929
  • list.focusOutline#212121
  • list.highlightForeground#eaeaea
  • list.hoverBackground#262626
  • list.hoverForeground#9e9e9e
  • list.inactiveSelectionBackground#1a1a1a
  • list.inactiveSelectionForeground#f5f5f5
  • panelTitle.activeBorder#1f1f1f
  • panelTitle.activeForeground#fafafa
  • panelTitle.inactiveForeground#484848
  • peekView.border#444444
  • peekViewEditor.background#242424
  • pickerGroup.border#363636
  • pickerGroup.foreground#eaeaea
  • progressBar.background#fafafa
  • scrollbar.shadow#1f1f1f
  • sideBar.background#1a1a1a
  • sideBarSectionHeader.background#1a1a1a
  • statusBar.background#1a1a1a
  • statusBar.debuggingBackground#1a1a1a
  • statusBar.foreground#7e7e7e
  • statusBar.noFolderBackground#1a1a1a
  • statusBarItem.prominentBackground#fafafa1a
  • statusBarItem.remoteBackground#1a1a1a00
  • statusBarItem.remoteForeground#7e7e7e
  • symbolIcon.classForeground#cd9731
  • symbolIcon.constructorForeground#b267e6
  • symbolIcon.enumeratorForeground#cd9731
  • symbolIcon.enumeratorMemberForeground#6796e6
  • symbolIcon.eventForeground#cd9731
  • symbolIcon.fieldForeground#6796e6
  • symbolIcon.functionForeground#b267e6
  • symbolIcon.interfaceForeground#6796e6
  • symbolIcon.methodForeground#b267e6
  • symbolIcon.variableForeground#6796e6
  • tab.activeBorder#1e1e1e
  • tab.activeForeground#fafafa
  • tab.border#1a1a1a
  • tab.inactiveBackground#1a1a1a
  • tab.inactiveForeground#727272
  • terminal.ansiBrightBlack#5c5c5c
  • textLink.activeForeground#fafafa
  • textLink.foreground#cccccc
  • titleBar.activeBackground#1a1a1a
  • titleBar.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#727272
keyword.operator.class, constant.other, source.php.embedded.line#CED1CF
variable, support.other.variable, string.other.link, string.regexp, entity.name.tag, declaration.tag#CC6666
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, punctuation.section.embedded, keyword.other.unit#DE935F
entity.name.class, entity.other.attribute-name, entity.name.type.class, support.type, support.class#F0C674
string, constant.other.symbol, entity.other.inherited-class, markup.heading#B5BD68
keyword.operator, constant.other.color#8ABEB7
entity.name.function, meta.function-call, support.function, entity.other.attribute-name.pseudo-class, keyword.other.special-method, meta.block-level#81A2BE
keyword, storage, storage.type, entity.name.tag.css#B294BB
invalid#9E9E9E
meta.separator#9E9E9E
invalid.deprecated#9E9E9E
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
comment, variable.language, variable.parameter, entity.other.attribute-name, keyword, markup.underline.link, storage.modifier, storage.type, string.url, variable.language.super, variable.language.this
keyword.operator, keyword.other.type, storage.modifier.import, storage.modifier.package, storage.type.built-in, storage.type.function.arrow, storage.type.generic, storage.type.java, storage.type.primitive
ref.matchtext#FFFFFF
Best Themes Redefined 🚀 by Lakshit Somani - VS Code Theme