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.border#30363d
  • activityBar.foreground#e6edf3
  • activityBar.inactiveForeground#484f58
  • activityBarBadge.background#1f6feb
  • activityBarBadge.foreground#ffffff
  • badge.background#1f6feb
  • badge.foreground#ffffff
  • button.background#1f6feb
  • button.foreground#ffffff
  • button.hoverBackground#388bfd
  • descriptionForeground#8b949e
  • dropdown.background#161b22
  • dropdown.border#30363d
  • dropdown.foreground#e6edf3
  • editor.background#0d1117
  • editor.foreground#e6edf3
  • editor.inactiveSelectionBackground#1f6feb33
  • editor.lineHighlightBackground#161b2280
  • editor.selectionBackground#1f6feb55
  • editor.wordHighlightBackground#1f6feb33
  • editorCursor.foreground#58a6ff
  • editorGroupHeader.tabsBackground#161b22
  • editorGutter.background#0d1117
  • editorIndentGuide.activeBackground#30363d
  • editorIndentGuide.background#21262d
  • editorLineNumber.activeForeground#e6edf3
  • editorLineNumber.foreground#484f58
  • editorWhitespace.foreground#484f58
  • errorForeground#ff7b72
  • focusBorder#1f6feb
  • gitDecoration.addedResourceForeground#3fb950
  • gitDecoration.conflictingResourceForeground#ffa198
  • gitDecoration.deletedResourceForeground#ff7b72
  • gitDecoration.ignoredResourceForeground#484f58
  • gitDecoration.modifiedResourceForeground#d29922
  • gitDecoration.untrackedResourceForeground#56d364
  • icon.foreground#8b949e
  • input.background#0d1117
  • input.border#30363d
  • input.foreground#e6edf3
  • input.placeholderForeground#484f58
  • inputOption.activeBorder#58a6ff
  • list.activeSelectionBackground#21262d
  • list.activeSelectionForeground#e6edf3
  • list.focusBackground#21262d
  • list.highlightForeground#58a6ff
  • list.hoverBackground#1c2128
  • list.inactiveSelectionBackground#161b22
  • menu.background#161b22
  • menu.border#30363d
  • menu.foreground#e6edf3
  • menu.selectionBackground#21262d
  • menu.selectionForeground#e6edf3
  • menubar.selectionBackground#21262d
  • notificationCenterHeader.background#010409
  • notifications.background#161b22
  • notifications.border#30363d
  • notifications.foreground#e6edf3
  • panel.background#0d1117
  • panel.border#30363d
  • panelTitle.activeBorder#58a6ff
  • panelTitle.activeForeground#e6edf3
  • panelTitle.inactiveForeground#8b949e
  • progressBar.background#1f6feb
  • quickInput.background#161b22
  • quickInput.foreground#e6edf3
  • quickInputHighlightForeground#58a6ff
  • quickInputList.focusBackground#21262d
  • scrollbar.shadow#010409
  • scrollbarSlider.activeBackground#58a6ff70
  • scrollbarSlider.background#484f5840
  • scrollbarSlider.hoverBackground#484f5870
  • selection.background#1f6feb55
  • settings.headerForeground#e6edf3
  • settings.modifiedItemIndicator#1f6feb
  • sideBar.background#161b22
  • sideBar.border#30363d
  • sideBar.foreground#e6edf3
  • sideBarSectionHeader.background#0d1117
  • sideBarSectionHeader.border#30363d
  • sideBarSectionHeader.foreground#8b949e
  • sideBarTitle.foreground#58a6ff
  • statusBar.background#010409
  • statusBar.border#30363d
  • statusBar.debuggingBackground#1f6feb
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#e6edf3
  • statusBar.noFolderBackground#21262d
  • statusBarItem.hoverBackground#21262d
  • statusBarItem.remoteBackground#1f6feb
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#0d1117
  • tab.activeBorder#58a6ff
  • tab.activeForeground#e6edf3
  • tab.border#30363d
  • tab.hoverBackground#1c2128
  • tab.inactiveBackground#161b22
  • tab.inactiveForeground#8b949e
  • terminal.ansiBlack#484f58
  • terminal.ansiBlue#58a6ff
  • terminal.ansiBrightBlack#6e7681
  • terminal.ansiBrightBlue#79c0ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#56d364
  • terminal.ansiBrightMagenta#d2a8ff
  • terminal.ansiBrightRed#ffa198
  • terminal.ansiBrightWhite#f0f6fc
  • terminal.ansiBrightYellow#e3b341
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#3fb950
  • terminal.ansiMagenta#bc8cff
  • terminal.ansiRed#ff7b72
  • terminal.ansiWhite#b1bac4
  • terminal.ansiYellow#d29922
  • terminal.background#0d1117
  • terminal.foreground#e6edf3
  • terminal.selectionBackground#1f6feb55
  • titleBar.activeBackground#010409
  • titleBar.activeForeground#e6edf3
  • titleBar.border#30363d
  • titleBar.inactiveBackground#010409
  • titleBar.inactiveForeground#8b949e
  • tree.indentGuidesStroke#21262d
  • widget.shadow#010409

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8b949eitalic
keyword, storage.type, storage.modifier#ff7b72
keyword.control, keyword.operator.new#ff7b72bold
string, string.quoted#a5d6ff
constant.character.escape#79c0ff
constant.numeric#79c0ff
constant.language, constant.other#79c0ff
entity.name.function, meta.function-call entity.name.function, support.function#d2a8ff
entity.name.class, entity.name.type, support.class, support.type#ffa657
meta.decorator, entity.name.decorator#ffa657italic
variable.parameter#ffa657italic
variable, variable.other#e6edf3
variable.language.this, variable.language.self#ff7b72italic
variable.other.property, support.variable.property#e6edf3
keyword.operator#ff7b72
entity.name.tag#7ee787
entity.other.attribute-name#79c0ff
support.type.property-name.css#79c0ff
support.constant.property-value.css#a5d6ff
punctuation#e6edf3
entity.name.namespace, entity.name.module#ffa657
markup.heading#58a6ffbold
markup.bold#e6edf3bold
markup.italic#e6edf3italic
markup.inline.raw#a5d6ff
markup.underline.link#58a6ff
markup.quote#8b949eitalic
Green Aents by AENTS - VS Code Theme