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#0D1628
  • activityBar.foreground#F8FAFC
  • activityBar.inactiveForeground#8AA3C7
  • activityBarBadge.background#00D9FF
  • activityBarBadge.foreground#051019
  • badge.background#8B5CF6
  • badge.foreground#F8FAFC
  • button.background#00D9FF
  • button.foreground#051019
  • button.hoverBackground#3AE6FF
  • descriptionForeground#96A8C8
  • disabledForeground#7D8AA5
  • dropdown.background#0E1524
  • dropdown.border#1F3B5C
  • editor.background#0A0F1C
  • editor.findMatchBackground#F59E0B55
  • editor.findMatchHighlightBackground#F59E0B22
  • editor.foreground#E5EEF9
  • editor.inactiveSelectionBackground#1E293B88
  • editor.lineHighlightBackground#0F172A88
  • editor.selectionBackground#164E6366
  • editor.wordHighlightBackground#0EA5E933
  • editor.wordHighlightStrongBackground#8B5CF633
  • editorBracketMatch.background#8B5CF622
  • editorBracketMatch.border#8B5CF6AA
  • editorCursor.foreground#00D9FF
  • editorGutter.addedBackground#4ADE80
  • editorGutter.deletedBackground#EF4444
  • editorGutter.modifiedBackground#38BDF8
  • editorHoverWidget.background#0F172A
  • editorHoverWidget.border#1F3B5C
  • editorIndentGuide.activeBackground1#2B3D5A
  • editorIndentGuide.background1#162235
  • editorLineNumber.activeForeground#8B5CF6
  • editorLineNumber.foreground#40506B
  • editorSuggestWidget.background#0D1424
  • editorSuggestWidget.border#1F3B5C
  • editorSuggestWidget.foreground#E5EEF9
  • editorSuggestWidget.highlightForeground#00D9FF
  • editorSuggestWidget.selectedBackground#10314B
  • editorWhitespace.foreground#162235
  • editorWidget.background#0F172A
  • editorWidget.border#1F3B5C
  • errorForeground#EF4444
  • focusBorder#00D9FF66
  • foreground#E5EEF9
  • gitDecoration.addedResourceForeground#4ADE80
  • gitDecoration.deletedResourceForeground#EF4444
  • gitDecoration.modifiedResourceForeground#38BDF8
  • icon.foreground#C8D7F2
  • input.background#0E1524
  • input.border#1F3B5C
  • input.foreground#E5EEF9
  • input.placeholderForeground#6E7F9C
  • list.activeSelectionBackground#10314B
  • list.activeSelectionForeground#F8FBFF
  • list.highlightForeground#00D9FF
  • list.hoverBackground#0F172A88
  • list.inactiveSelectionBackground#0E2437
  • minimap.selectionHighlight#00D9FF33
  • notificationCenterHeader.background#0C1422
  • notifications.background#0C1422
  • notifications.border#1F3B5C
  • panel.background#09101C
  • panel.border#1A2A44
  • panelTitle.activeForeground#00D9FF
  • panelTitle.inactiveForeground#7D8AA5
  • peekView.border#1F3B5C
  • peekViewEditor.background#09111D
  • peekViewResult.background#0C1422
  • peekViewResult.selectionBackground#10314B
  • peekViewTitle.background#0B1322
  • progressBar.background#00D9FF
  • scrollbarSlider.activeBackground#33557FCC
  • scrollbarSlider.background#1B2A44AA
  • scrollbarSlider.hoverBackground#264062CC
  • sideBar.background#111827
  • sideBar.foreground#D7E3F8
  • sideBarSectionHeader.background#0B1322
  • sideBarSectionHeader.foreground#8B5CF6
  • sideBarTitle.foreground#F8FAFC
  • statusBar.background#08111F
  • statusBar.debuggingBackground#8B5CF6
  • statusBar.debuggingForeground#F8FAFC
  • statusBar.foreground#D7E3F8
  • statusBar.noFolderBackground#08111F
  • tab.activeBackground#0C1424
  • tab.activeBorderTop#00D9FF
  • tab.activeForeground#F8FBFF
  • tab.border#111827
  • tab.inactiveBackground#09111D
  • tab.inactiveForeground#7D8AA5
  • terminal.ansiBlack#0A0F1C
  • terminal.ansiBlue#38BDF8
  • terminal.ansiBrightBlack#4B5B76
  • terminal.ansiBrightBlue#67E8F9
  • terminal.ansiBrightCyan#A5F3FC
  • terminal.ansiBrightGreen#86EFAC
  • terminal.ansiBrightMagenta#C4B5FD
  • terminal.ansiBrightRed#F87171
  • terminal.ansiBrightWhite#F8FAFC
  • terminal.ansiBrightYellow#FCD34D
  • terminal.ansiCyan#00D9FF
  • terminal.ansiGreen#4ADE80
  • terminal.ansiMagenta#8B5CF6
  • terminal.ansiRed#EF4444
  • terminal.ansiWhite#D9E6F8
  • terminal.ansiYellow#F59E0B
  • terminal.background#050A14
  • terminal.foreground#D9E6F8
  • terminalCursor.foreground#00D9FF
  • titleBar.activeBackground#0C1424
  • titleBar.activeForeground#F8FBFF
  • titleBar.inactiveBackground#0A0F1C
  • titleBar.inactiveForeground#7D8AA5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5B6B86italic
keyword, storage, storage.type, storage.modifier#38BDF8
string, constant.other.symbol#4ADE80
constant.numeric, constant.language, constant.character.escape#F59E0B
entity.name.function, support.function, variable.function, meta.function-call#00D9FF
entity.name.type, entity.name.class, support.type, support.class#8B5CF6
variable, meta.object-literal.key, support.variable#E5EEF9
invalid, invalid.illegal#EF4444
NeuroShade by RYN BD - VS Code Theme