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#010409
  • activityBar.border#010409
  • activityBar.foreground#E6EDF3
  • activityBar.inactiveForeground#484F58
  • activityBarBadge.background#00E5FF
  • activityBarBadge.foreground#010409
  • badge.background#00E5FF
  • badge.foreground#010409
  • breadcrumb.activeSelectionForeground#00E5FF
  • breadcrumb.focusForeground#E6EDF3
  • breadcrumb.foreground#484F58
  • breadcrumbPicker.background#161B22
  • button.background#1A237E
  • button.foreground#FFFFFF
  • button.hoverBackground#283593
  • descriptionForeground#6E7681
  • editor.background#0D1117
  • editor.findMatchBackground#00E5FF40
  • editor.findMatchHighlightBackground#00E5FF22
  • editor.foreground#E6EDF3
  • editor.inactiveSelectionBackground#1A237E35
  • editor.lineHighlightBackground#161B22
  • editor.selectionBackground#1A237E50
  • editor.selectionHighlightBackground#1A237E30
  • editor.wordHighlightBackground#00E5FF20
  • editor.wordHighlightStrongBackground#00E5FF38
  • editorBracketMatch.background#00E5FF1A
  • editorBracketMatch.border#00E5FF55
  • editorCursor.background#0D1117
  • editorCursor.foreground#00E5FF
  • editorError.foreground#F85149
  • editorGroupHeader.tabsBackground#010409
  • editorGroupHeader.tabsBorder#010409
  • editorGutter.background#0D1117
  • editorHoverWidget.background#161B22
  • editorHoverWidget.border#30363D
  • editorIndentGuide.activeBackground1#30363D
  • editorIndentGuide.background1#21262D
  • editorInfo.foreground#00E5FF
  • editorLineNumber.activeForeground#00E5FF
  • editorLineNumber.foreground#30363D
  • editorRuler.foreground#161B22
  • editorSuggestWidget.background#161B22
  • editorSuggestWidget.border#30363D
  • editorSuggestWidget.highlightForeground#00E5FF
  • editorSuggestWidget.selectedBackground#1C2128
  • editorWarning.foreground#D29922
  • editorWhitespace.foreground#161B22
  • errorForeground#F85149
  • focusBorder#00E5FF55
  • foreground#E6EDF3
  • gitDecoration.conflictingResourceForeground#7B1FA2
  • gitDecoration.deletedResourceForeground#F85149
  • gitDecoration.ignoredResourceForeground#30363D
  • gitDecoration.modifiedResourceForeground#D29922
  • gitDecoration.untrackedResourceForeground#3FB950
  • input.background#161B22
  • input.border#30363D
  • input.foreground#E6EDF3
  • input.placeholderForeground#484F58
  • list.activeSelectionBackground#1A237E60
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A237E60
  • list.highlightForeground#00E5FF
  • list.hoverBackground#161B22
  • list.hoverForeground#E6EDF3
  • list.inactiveSelectionBackground#161B22
  • list.inactiveSelectionForeground#E6EDF3
  • panel.background#010409
  • panel.border#010409
  • panelTitle.activeBorder#00E5FF
  • panelTitle.activeForeground#00E5FF
  • panelTitle.inactiveForeground#484F58
  • scrollbarSlider.activeBackground#30363DA0
  • scrollbarSlider.background#30363D40
  • scrollbarSlider.hoverBackground#30363D70
  • selection.background#1A237E40
  • sideBar.background#0D1117
  • sideBar.border#010409
  • sideBar.foreground#8B949E
  • sideBarSectionHeader.background#010409
  • sideBarSectionHeader.border#010409
  • sideBarSectionHeader.foreground#6E7681
  • sideBarTitle.foreground#00E5FF
  • statusBar.background#010409
  • statusBar.border#010409
  • statusBar.debuggingBackground#7B1FA2
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#6E7681
  • statusBar.noFolderBackground#010409
  • statusBarItem.hoverBackground#161B22
  • statusBarItem.remoteBackground#00E5FF
  • statusBarItem.remoteForeground#010409
  • tab.activeBackground#0D1117
  • tab.activeBorder#00E5FF
  • tab.activeBorderTop#00E5FF
  • tab.activeForeground#FFFFFF
  • tab.border#010409
  • tab.hoverBackground#161B22
  • tab.hoverForeground#8B949E
  • tab.inactiveBackground#010409
  • tab.inactiveForeground#484F58
  • tab.unfocusedActiveForeground#6E7681
  • tab.unfocusedInactiveForeground#30363D
  • terminal.ansiBlack#161B22
  • terminal.ansiBlue#1A237E
  • terminal.ansiBrightBlack#484F58
  • terminal.ansiBrightBlue#58A6FF
  • terminal.ansiBrightCyan#79C0FF
  • terminal.ansiBrightGreen#56D364
  • terminal.ansiBrightMagenta#BC8CFF
  • terminal.ansiBrightRed#FF7B72
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E3B341
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#3FB950
  • terminal.ansiMagenta#7B1FA2
  • terminal.ansiRed#F85149
  • terminal.ansiWhite#8B949E
  • terminal.ansiYellow#D29922
  • terminal.background#010409
  • terminal.foreground#E6EDF3
  • titleBar.activeBackground#010409
  • titleBar.activeForeground#E6EDF3
  • titleBar.border#010409
  • titleBar.inactiveBackground#0D1117
  • titleBar.inactiveForeground#484F58

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#484F58italic
keyword, keyword.control, keyword.operator.new, keyword.other.import#00E5FFbold
keyword.operator, keyword.operator.logical, keyword.operator.comparison#79C0FF
storage, storage.type, storage.modifier#7B1FA2italic
string, string.quoted, string.template#3FB950
constant.character.escape, string.regexp#79C0FF
constant.numeric#D29922
constant, constant.language#E3B341
entity.name.function, meta.definition.method entity.name.function#58A6FFbold
meta.function-call, support.function#00E5FF
variable, variable.other#E6EDF3
variable.parameter#A5D6FFitalic
variable.language, variable.other.this, variable.other.self#00E5FFitalic
entity.name.type, entity.name.class, support.class#D29922bold
entity.name.interface, entity.name.enum#BC8CFF
entity.name.tag#F85149
entity.other.attribute-name#79C0FF
support.type.property-name#00E5FF
support.constant.property-value#3FB950
punctuation, meta.brace#484F58
meta.decorator, punctuation.decorator#D29922italic