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#010409
  • activityBar.foreground#c9d1d9
  • activityBar.inactiveForeground#484f58
  • activityBarBadge.background#58a6ff
  • badge.background#58a6ff
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e6edf3
  • breadcrumb.focusForeground#c9d1d9
  • breadcrumb.foreground#8b949e
  • button.background#238636
  • button.foreground#ffffff
  • button.hoverBackground#2ea043
  • button.secondaryBackground#30363d
  • button.secondaryForeground#c9d1d9
  • commandCenter.background#010409
  • commandCenter.border#30363d
  • commandCenter.foreground#8b949e
  • debugConsole.errorForeground#f47067
  • debugConsole.infoForeground#8b949e
  • debugConsole.warningForeground#f69d50
  • debugIcon.breakpointForeground#f47067
  • debugIcon.startForeground#8ddb8c
  • debugToolBar.background#010409
  • descriptionForeground#8b949e
  • diffEditor.insertedLineBackground#23883615
  • diffEditor.insertedTextBackground#23883620
  • diffEditor.removedLineBackground#f4706715
  • diffEditor.removedTextBackground#f4706720
  • dropdown.background#161b22
  • dropdown.border#30363d
  • dropdown.foreground#c9d1d9
  • editor.background#0d1117
  • editor.foreground#e6edf3
  • editor.lineHighlightBackground#161b22
  • editor.selectionBackground#1f3a5f
  • editorBracketMatch.background#1f3a5f40
  • editorBracketMatch.border#58a6ff80
  • editorCursor.foreground#58a6ff
  • editorError.foreground#f47067
  • editorGroup.border#1b1f23
  • editorGroup.emptyBackground#0d1117
  • editorGroupHeader.border#010409
  • editorGroupHeader.noTabsBackground#010409
  • editorGroupHeader.tabsBackground#010409
  • editorGutter.background#0d1117
  • editorIndentGuide.background1#1b1f23
  • editorInfo.foreground#6cb6ff
  • editorLineNumber.activeForeground#8b949e
  • editorLineNumber.foreground#3b4048
  • editorWarning.foreground#f69d50
  • editorWidget.background#161b22
  • editorWidget.border#1b1f23
  • errorForeground#f47067
  • focusBorder#58a6ff
  • foreground#c9d1d9
  • gitDecoration.addedResourceForeground#8ddb8c
  • gitDecoration.conflictingResourceForeground#f69d50
  • gitDecoration.deletedResourceForeground#f47067
  • gitDecoration.ignoredResourceForeground#484f58
  • gitDecoration.modifiedResourceForeground#6cb6ff
  • gitDecoration.untrackedResourceForeground#8ddb8c
  • icon.foreground#8b949e
  • input.background#0d1117
  • input.border#30363d
  • input.foreground#c9d1d9
  • input.placeholderForeground#484f58
  • list.activeSelectionBackground#1f3a5f
  • list.activeSelectionForeground#c9d1d9
  • list.focusBackground#1f3a5f
  • list.highlightForeground#58a6ff
  • list.hoverBackground#161b22
  • list.inactiveSelectionBackground#161b22
  • menu.background#0d1117
  • menu.border#1b1f23
  • menu.foreground#c9d1d9
  • menu.selectionBackground#1f3a5f
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#1b1f23
  • menubar.selectionBackground#1f3a5f
  • menubar.selectionForeground#ffffff
  • minimap.background#0d1117
  • notificationCenterHeader.background#010409
  • notifications.background#0d1117
  • notifications.border#1b1f23
  • notifications.foreground#c9d1d9
  • panel.background#0d1117
  • panel.border#1b1f23
  • panelTitle.activeBorder#58a6ff
  • panelTitle.activeForeground#c9d1d9
  • panelTitle.inactiveForeground#484f58
  • peekView.border#58a6ff
  • peekViewEditor.background#0d1117
  • peekViewResult.background#010409
  • peekViewTitle.background#010409
  • peekViewTitleDescription.foreground#8b949e
  • peekViewTitleLabel.foreground#c9d1d9
  • quickInput.background#0d1117
  • quickInput.foreground#c9d1d9
  • quickInputList.focusBackground#1f3a5f
  • quickInputList.focusForeground#ffffff
  • quickInputTitle.background#010409
  • scrollbarSlider.activeBackground#484f5880
  • scrollbarSlider.background#484f5840
  • scrollbarSlider.hoverBackground#484f5860
  • selection.background#1f3a5f80
  • settings.focusedRowBackground#161b22
  • settings.headerForeground#e6edf3
  • settings.modifiedItemIndicator#58a6ff
  • sideBar.background#010409
  • sideBar.foreground#8b949e
  • sideBarSectionHeader.background#010409
  • sideBarSectionHeader.foreground#c9d1d9
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#010409
  • statusBar.border#1b1f2380
  • statusBar.debuggingBackground#58a6ff
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#8b949e
  • statusBar.noFolderBackground#010409
  • tab.activeBackground#0d1117
  • tab.activeBorderTop#58a6ff
  • tab.activeForeground#c9d1d9
  • tab.border#010409
  • tab.inactiveBackground#010409
  • tab.inactiveForeground#484f58
  • terminal.ansiBlack#0d1117
  • terminal.ansiBlue#6cb6ff
  • terminal.ansiBrightBlack#484f58
  • terminal.ansiBrightBlue#a5d6ff
  • terminal.ansiBrightCyan#a5f0f5
  • terminal.ansiBrightGreen#a8e6a1
  • terminal.ansiBrightMagenta#eacfff
  • terminal.ansiBrightRed#ff7a72
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd470
  • terminal.ansiCyan#76e3ea
  • terminal.ansiGreen#8ddb8c
  • terminal.ansiMagenta#dcbdfb
  • terminal.ansiRed#f47067
  • terminal.ansiWhite#e6edf3
  • terminal.ansiYellow#f69d50
  • terminal.background#0d1117
  • terminal.foreground#c9d1d9
  • textLink.activeForeground#79c0ff
  • textLink.foreground#58a6ff
  • textPreformat.foreground#e6edf3
  • titleBar.activeBackground#010409
  • titleBar.activeForeground#c9d1d9
  • titleBar.inactiveBackground#010409
  • titleBar.inactiveForeground#484f58
  • walkThrough.embeddedEditorBackground#010409
  • welcomePage.background#0d1117
  • widget.shadow#01040980

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7d8590italic
string, string.quoted#a8e6a1
constant.character.escape#6cb6ff
constant.numeric#b4d8fd
constant.language#6cb6ff
keyword, keyword.control, keyword.operator.new#f47067
keyword.operator#f47067
storage.type, storage.modifier#f47067
entity.name.function, support.function#dcbdfb
entity.name.type, entity.name.class, support.class#f69d50
entity.name.type.interface#f69d50
support.type#6cb6ff
variable, variable.other, variable.parameter#e6edf3
variable.other.property, variable.other.object.property#e6edf3
entity.name.tag, punctuation.definition.tag#8ddb8c
entity.other.attribute-name#6cb6ff
meta.decorator, punctuation.decorator, entity.name.function.decorator#dcbdfb
punctuation#b1bac4
meta.property-name, support.type.property-name#6cb6ff
support.constant.property-value, meta.property-value#b4d8fd
entity.other.attribute-name.class, entity.other.attribute-name.id#8ddb8c
keyword.other.unit#b4d8fd
string.regexp#6cb6ff
support.type.property-name.json#6cb6ff
markup.heading, entity.name.section#58a6ffbold
markup.bold#e6edf3bold
markup.italic#e6edf3italic
markup.underline.link#58a6ff
markup.inline.raw, markup.fenced_code#a8e6a1
variable.language.this#f47067italic
entity.name.type.module, entity.name.namespace#f69d50
keyword.control.import, keyword.control.export, keyword.control.from#f47067
string.template, punctuation.definition.template-expression#a8e6a1
meta.template.expression#e6edf3
M2 Theme by MaranT - VS Code Theme