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.background#101010
  • activityBar.foreground#909090
  • activityBarBadge.background#3f3f46
  • badge.background#3f3f46
  • badge.foreground#d8d8d8
  • button.background#3f3f46
  • debugIcon.breakpointCurrentStackframeForeground#54aa46
  • debugIcon.breakpointDisabledForeground#909090
  • debugIcon.breakpointForeground#e54c4c
  • debugIcon.breakpointStackframeForeground#54aa46
  • debugIcon.breakpointUnverifiedForeground#909090
  • debugIcon.continueForeground#e54c4c
  • debugIcon.disconnectForeground#e54c4c
  • debugIcon.pauseForeground#e54c4c
  • debugIcon.restartForeground#54aa46
  • debugIcon.startForeground#54aa46
  • debugIcon.stepBackForeground#e54c4c
  • debugIcon.stepIntoForeground#e54c4c
  • debugIcon.stepOutForeground#e54c4c
  • debugIcon.stepOverForeground#e54c4c
  • debugIcon.stopForeground#54aa46
  • diffEditor.insertedTextBackground#3a632a4b
  • diffEditor.removedTextBackground#88063852
  • editor.background#080808
  • editor.foreground#d8d8d8
  • editor.lineHighlightBackground#1e2424
  • editor.lineHighlightBorder#27272a
  • editor.selectionBackground#3c4848
  • editorBracketMatch.background#1e2424
  • editorBracketMatch.border#1e2424
  • editorCursor.foreground#f8f8f8
  • editorGroupHeader.tabsBackground#101010
  • editorGroupHeader.tabsBorder#101010
  • editorIndentGuide.activeBackground#909090
  • editorIndentGuide.background#3c4848
  • editorLineNumber.activeForeground#909090
  • editorLineNumber.foreground#3c4848
  • editorSuggestWidget.background#141818
  • editorWhitespace.foreground#3c4848
  • focusBorder#52525b00
  • foreground#d8d8d8
  • input.background#27272a
  • input.foreground#e4e4e7
  • inputOption.activeBackground#3a3a3a
  • list.activeSelectionBackground#3c4848
  • list.activeSelectionForeground#f8f8f8
  • list.focusBackground#3c4848
  • list.highlightForeground#d8d8d8
  • list.hoverBackground#3c4848
  • list.hoverForeground#d8d8d8
  • list.inactiveSelectionBackground#3c4848
  • list.inactiveSelectionForeground#f8f8f8
  • panelTitle.activeBorder#101010
  • panelTitle.activeForeground#d8d8d8
  • panelTitle.inactiveForeground#909090
  • peekView.border#3f3f46
  • peekViewEditor.background#242424
  • pickerGroup.border#363636
  • pickerGroup.foreground#d8d8d8
  • progressBar.background#f8f8f8
  • scrollbar.shadow#101010
  • sideBar.background#101010
  • sideBar.foreground#909090
  • sideBarSectionHeader.background#181818
  • statusBar.background#101010
  • statusBar.debuggingBackground#101010
  • statusBar.foreground#909090
  • statusBar.noFolderBackground#101010
  • statusBarItem.prominentBackground#fafafa1a
  • statusBarItem.remoteBackground#1a1a1a00
  • statusBarItem.remoteForeground#909090
  • tab.activeBorder#101010
  • tab.activeForeground#f8f8f8
  • tab.border#101010
  • tab.inactiveBackground#101010
  • tab.inactiveForeground#909090
  • terminal.ansiBrightBlack#5c5c5c
  • textLink.activeForeground#f8f8f8
  • textLink.foreground#d8d8d8
  • titleBar.activeBackground#101010
  • titleBar.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.quoted.docstring.multi#909090italic
constant, constant.language, constant.character, constant.other#6080ff
keyword, storage, storage.type#ff0e6b
entity.name.function, support.function, meta.function-call#40c4aa
variable.other.property, meta.property-name#48fb9f
string, markup.inline#8bbb81
constant.numeric, number#c080ff
storage.type, entity.name.type, support.class, entity.other.inherited-class#ff9020
entity.name.class#a0ff20
markup.error#e54c4c
markup.warning#f2be59
markup.inserted#54aa46
support.class.component.jsx, support.class.component.tsx, entity.name.tag.jsx, entity.name.tag.tsx#a0ff20
entity.name.tag.html.jsx, entity.name.tag.html.tsx, punctuation.definition.tag.jsx, punctuation.definition.tag.tsx#ff9020
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#48fb9f
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#f8f8f8
entity.name.type.ts, entity.name.type.tsx, support.type.primitive.ts, support.type.primitive.tsx#ff9020
entity.name.type.interface.ts, entity.name.type.interface.tsx#40c4aa
punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts, punctuation.definition.typeparameters.begin.tsx, punctuation.definition.typeparameters.end.tsx#c080ff
string.template, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#8bbb81
meta.template.expression, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#f8f8f8
storage.type.function.arrow#ff0e6b
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#ff0e6b
variable.other.readwrite.alias, meta.import string.quoted#8bbb81
meta.method.declaration entity.name.function, meta.object-literal.key#40c4aa
meta.object-binding-pattern-variable variable.other.readwrite, meta.array-binding-pattern-variable variable.other.readwrite#48fb9f
keyword.operator.spread#ff0e6b
meta.function-call entity.name.function#40c4aa
punctuation.decorator, meta.decorator#c080ff
source.css.styled, meta.template.expression.css#8bbb81
vsc-eezzy-nvim Themes by ASHISH JHA - VS Code Theme