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.activeBorder#6FFFD0
  • activityBar.background#0D162E
  • activityBar.foreground#6FFFD0
  • activityBarBadge.background#6FFFD0
  • activityBarBadge.foreground#0A1024
  • badge.background#6FFFD0
  • badge.foreground#0A1024
  • button.background#162740
  • button.foreground#FFFFFF
  • button.hoverBackground#1D3E5A
  • dropdown.background#0D162E
  • dropdown.border#162740
  • dropdown.foreground#E5F0FF
  • editor.background#0A1024
  • editor.findMatchBackground#6FFFD944
  • editor.findMatchHighlightBackground#6FFFD922
  • editor.foreground#E5F0FF
  • editor.lineHighlightBackground#1A2B4F40
  • editor.lineHighlightBorder#1A2B4F80
  • editor.selectionBackground#1D3E5A55
  • editor.selectionHighlightBackground#1D3E5A33
  • editorBracketMatch.background#6FFFD933
  • editorBracketMatch.border#6FFFD0
  • editorCursor.foreground#E5F0FF
  • editorGroupHeader.tabsBackground#0A1024
  • editorIndentGuide.activeBackground#1D3E5A88
  • editorIndentGuide.background#1D3E5A44
  • editorLineNumber.activeForeground#6FFFD0
  • editorLineNumber.foreground#4A5B6C
  • editorWhitespace.foreground#1D3E5A
  • focusBorder#6FFFD0
  • gitDecoration.conflictingResourceForeground#FFE68B
  • gitDecoration.deletedResourceForeground#FF6B8B
  • gitDecoration.modifiedResourceForeground#6FFFD0
  • gitDecoration.untrackedResourceForeground#00FAFF
  • input.background#0D162E
  • input.border#162740
  • input.foreground#E5F0FF
  • input.placeholderForeground#5A6B7C
  • inputOption.activeBorder#6FFFD0
  • list.activeSelectionBackground#162740
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#162740
  • list.highlightForeground#6FFFD0
  • list.hoverBackground#16274066
  • minimap.background#0A1024
  • minimapSlider.activeBackground#6FFFD966
  • minimapSlider.background#6FFFD922
  • minimapSlider.hoverBackground#6FFFD944
  • panel.background#0A1024
  • panel.border#162740
  • panelTitle.activeBorder#6FFFD0
  • panelTitle.activeForeground#6FFFD0
  • panelTitle.inactiveForeground#A3B5C9
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#6FFFD988
  • scrollbarSlider.background#4A5B6C44
  • scrollbarSlider.hoverBackground#4A5B6C88
  • sideBar.background#0D162E
  • sideBar.foreground#A3B5C9
  • sideBarSectionHeader.background#0D162E
  • sideBarSectionHeader.foreground#6FFFD0
  • sideBarTitle.foreground#6FFFD0
  • statusBar.background#162740
  • statusBar.debuggingBackground#6FFFD0
  • statusBar.foreground#E5F0FF
  • statusBar.noFolderBackground#0D162E
  • statusBarItem.hoverBackground#1D2A48
  • tab.activeBackground#162740
  • tab.activeBorder#6FFFD0
  • tab.activeForeground#FFFFFF
  • tab.border#0A1024
  • tab.inactiveBackground#0D162E
  • tab.inactiveForeground#A3B5C9
  • terminal.ansiBlue#5A9FFF
  • terminal.ansiBrightBlue#7ABFFF
  • terminal.ansiBrightCyan#33FFFF
  • terminal.ansiBrightGreen#9EFFC9
  • terminal.ansiBrightMagenta#E6C8FF
  • terminal.ansiBrightRed#FF8BA8
  • terminal.ansiBrightYellow#FFF6A8
  • terminal.ansiCyan#00FAFF
  • terminal.ansiGreen#6FFFD0
  • terminal.ansiMagenta#D8A0FF
  • terminal.ansiRed#FF6B8B
  • terminal.ansiYellow#FFE68B
  • terminal.background#0A1024
  • terminal.foreground#E5F0FF
  • titleBar.activeBackground#0D162E
  • titleBar.activeForeground#E5F0FF
  • titleBar.inactiveBackground#0A1024
  • titleBar.inactiveForeground#A3B5C9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6B7Citalic
string, string.quoted, string.template#00FAFF
keyword, storage.type, storage.modifier#6FFFD0bold
keyword.operator, punctuation.accessor#A3B5C9
variable, variable.other#E5F0FF
variable.parameter#5A9FFFitalic
entity.name.function, support.function#6FFFD0
meta.function-call#A3B5C9
entity.name.class, entity.name.type.class, support.class#5A9FFFbold
entity.name.type, support.type#5A9FFF
entity.name.type.interface#00FAFFitalic
constant.numeric#FFE68B
constant, constant.language, constant.character#FFE68B
constant.language.boolean#FFE68Bbold
variable.other.property, support.variable.property#A3B5C9
meta.object-literal.key#6FFFD0
entity.name.tag, punctuation.definition.tag#6FFFD0
entity.other.attribute-name#00FAFFitalic
punctuation, meta.brace#A3B5C9
string.regexp#FF6B8B
constant.character.escape#D8A0FF
meta.decorator, punctuation.decorator#FFE68B
invalid, invalid.illegal#FF6B8Bstrikethrough
markup.heading, entity.name.section#6FFFD0bold
markup.bold#FFE68Bbold
markup.italic#00FAFFitalic
markup.underline.link#00FAFF
markup.inline.raw, markup.fenced_code#6FFFD0
support.type.property-name.json#6FFFD0
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFE68B
support.type.property-name.css#6FFFD0
support.constant.property-value.css#00FAFF