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#131822
  • activityBar.foreground#C9D1E0
  • activityBar.inactiveForeground#7C8798
  • activityBarBadge.background#F2A65A
  • activityBarBadge.foreground#0B0E14
  • badge.background#F2A65A
  • badge.foreground#0B0E14
  • button.background#F2A65A
  • button.foreground#0B0E14
  • button.hoverBackground#ECAC6E
  • diffEditor.insertedTextBackground#9ECE6A24
  • diffEditor.removedTextBackground#F26D7D24
  • editor.background#0B0E14
  • editor.findMatchBackground#F2C14E59
  • editor.findMatchHighlightBackground#F2C14E33
  • editor.foreground#C9D1E0
  • editor.lineHighlightBackground#13182299
  • editor.selectionBackground#24304A
  • editor.selectionHighlightBackground#24304A80
  • editor.wordHighlightBackground#24304A73
  • editorBracketMatch.background#5FD3D833
  • editorBracketMatch.border#5FD3D8
  • editorCursor.foreground#F2A65A
  • editorError.foreground#F26D7D
  • editorGroupHeader.tabsBackground#131822
  • editorGroupHeader.tabsBorder#1F2733
  • editorGutter.addedBackground#9ECE6A
  • editorGutter.deletedBackground#F26D7D
  • editorGutter.modifiedBackground#5FD3D8
  • editorHoverWidget.background#1A2130
  • editorHoverWidget.border#1F2733
  • editorIndentGuide.activeBackground1#7C8798
  • editorIndentGuide.background1#1F2733
  • editorInfo.foreground#5FD3D8
  • editorLineNumber.activeForeground#C9D1E0
  • editorLineNumber.foreground#9BA6B8
  • editorSuggestWidget.background#1A2130
  • editorSuggestWidget.selectedBackground#282D36
  • editorWarning.foreground#F2C14E
  • editorWhitespace.foreground#1F2733
  • editorWidget.background#1A2130
  • editorWidget.border#1F2733
  • focusBorder#F2A65A
  • gitDecoration.addedResourceForeground#9ECE6A
  • gitDecoration.deletedResourceForeground#F26D7D
  • gitDecoration.ignoredResourceForeground#7C8798
  • gitDecoration.modifiedResourceForeground#5FD3D8
  • gitDecoration.untrackedResourceForeground#9ECE6A
  • input.background#1A2130
  • input.border#1F2733
  • input.foreground#C9D1E0
  • list.activeSelectionBackground#282D36
  • list.activeSelectionForeground#EAF0FA
  • list.highlightForeground#F2A65A
  • list.hoverBackground#1F242D
  • list.inactiveSelectionBackground#1F242D
  • panel.background#131822
  • panel.border#1F2733
  • panelTitle.activeForeground#C9D1E0
  • panelTitle.inactiveForeground#7C8798
  • peekView.border#F2A65A
  • progressBar.background#F2A65A
  • scrollbarSlider.activeBackground#7C87988C
  • scrollbarSlider.background#7C879840
  • scrollbarSlider.hoverBackground#7C879866
  • selection.background#24304ACC
  • sideBar.background#131822
  • sideBar.border#1F2733
  • sideBar.foreground#9BA6B8
  • sideBarSectionHeader.background#131822
  • sideBarSectionHeader.foreground#C9D1E0
  • sideBarTitle.foreground#C9D1E0
  • statusBar.background#131822
  • statusBar.border#1F2733
  • statusBar.debuggingBackground#F2A65A
  • statusBar.debuggingForeground#0B0E14
  • statusBar.foreground#9BA6B8
  • statusBar.noFolderBackground#131822
  • tab.activeBackground#0B0E14
  • tab.activeBorderTop#F2A65A
  • tab.activeForeground#EAF0FA
  • tab.border#1F2733
  • tab.inactiveBackground#131822
  • tab.inactiveForeground#7C8798
  • terminal.ansiBlack#131822
  • terminal.ansiBlue#7AA2F7
  • terminal.ansiBrightBlack#7C8798
  • terminal.ansiBrightBlue#9BB9F9
  • terminal.ansiBrightCyan#87DEE2
  • terminal.ansiBrightGreen#B6DA8F
  • terminal.ansiBrightMagenta#BDA8FB
  • terminal.ansiBrightRed#F5929E
  • terminal.ansiBrightWhite#EAF0FA
  • terminal.ansiBrightYellow#F5D17A
  • terminal.ansiCyan#5FD3D8
  • terminal.ansiGreen#9ECE6A
  • terminal.ansiMagenta#A78BFA
  • terminal.ansiRed#F26D7D
  • terminal.ansiWhite#C9D1E0
  • terminal.ansiYellow#F2C14E
  • terminal.background#0B0E14
  • terminal.foreground#C9D1E0
  • textLink.activeForeground#EAF0FA
  • textLink.foreground#5FD3D8
  • titleBar.activeBackground#131822
  • titleBar.activeForeground#C9D1E0
  • titleBar.border#1F2733
  • titleBar.inactiveBackground#131822
  • titleBar.inactiveForeground#7C8798

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7C8798italic
string, string.quoted, punctuation.definition.string#9ECE6A
string.regexp, constant.character.escape#5FD3D8
constant.numeric, constant.language, constant.language.boolean#A78BFA
keyword, keyword.control, storage, storage.type, storage.modifier#F2A65A
keyword.operator#E8B98A
entity.name.function, support.function, meta.function-call.generic#5FD3D8
entity.name.type, entity.name.class, support.class, support.type#F2D08A
variable, meta.definition.variable.name, support.variable#C9D1E0
variable.parameter, meta.parameter#9BA6B8
variable.other.property, meta.object-literal.key#5FD3D8
entity.name.tag, punctuation.definition.tag#F26D7D
entity.other.attribute-name#F2D08A
punctuation, meta.brace#9BA6B8
invalid, invalid.illegal#F26D7Dunderline
markup.heading, entity.name.section#F2A65Abold
markup.bold#C9D1E0bold
markup.italic#C9D1E0italic
markup.inline.raw, markup.fenced_code#9ECE6A
markup.inserted#9ECE6A
markup.deleted#F26D7D
markup.changed#5FD3D8
markup.underline.link#5FD3D8underline
Spacehole by mrsandv - VS Code Theme