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#00D1C1
  • activityBar.background#11171F
  • activityBar.foreground#6A7D94
  • activityBarBadge.background#00D1C1
  • activityBarBadge.foreground#0B0F1A
  • badge.background#00D1C1
  • badge.foreground#0B0F1A
  • button.background#11171F
  • button.foreground#B0C4D9
  • button.hoverBackground#1A2E36
  • dropdown.background#151C27
  • dropdown.border#11171F
  • dropdown.foreground#B0C4D9
  • editor.background#0B0F1A
  • editor.findMatchBackground#00D1C140
  • editor.findMatchHighlightBackground#00D1C120
  • editor.foreground#B0C4D9
  • editor.lineHighlightBackground#1A2E3A80
  • editor.lineHighlightBorder#00D1C140
  • editor.selectionBackground#1A3F4F80
  • editor.selectionHighlightBackground#1A3F4F40
  • editorBracketMatch.background#00D1C130
  • editorBracketMatch.border#00D1C1
  • editorCursor.foreground#00D1C1
  • editorGroupHeader.tabsBackground#0B0F1A
  • editorIndentGuide.activeBackground#28334480
  • editorIndentGuide.background#28334440
  • editorLineNumber.activeForeground#00D1C1
  • editorLineNumber.foreground#6A7D94
  • editorWhitespace.foreground#28334440
  • focusBorder#00D1C1
  • gitDecoration.conflictingResourceForeground#9A70C9
  • gitDecoration.deletedResourceForeground#C55A5A
  • gitDecoration.modifiedResourceForeground#00D1C1
  • gitDecoration.untrackedResourceForeground#00FFFF
  • input.background#151C27
  • input.border#11171F
  • input.foreground#B0C4D9
  • input.placeholderForeground#6A7D94
  • inputOption.activeBorder#00D1C1
  • list.activeSelectionBackground#1A2E36
  • list.activeSelectionForeground#B0C4D9
  • list.focusBackground#1A2E36
  • list.highlightForeground#00D1C1
  • list.hoverBackground#11171F60
  • minimap.background#0B0F1A
  • minimapSlider.activeBackground#00D1C160
  • minimapSlider.background#00D1C120
  • minimapSlider.hoverBackground#00D1C140
  • panel.background#0B0F1A
  • panel.border#11171F
  • panelTitle.activeBorder#00D1C1
  • panelTitle.activeForeground#00D1C1
  • panelTitle.inactiveForeground#6A7D94
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#00D1C180
  • scrollbarSlider.background#28334440
  • scrollbarSlider.hoverBackground#28334480
  • sideBar.background#151C27
  • sideBar.foreground#8A9AB7
  • sideBarSectionHeader.background#11171F
  • sideBarSectionHeader.foreground#6A7D94
  • sideBarTitle.foreground#6A7D94
  • statusBar.background#151C27
  • statusBar.debuggingBackground#00D1C1
  • statusBar.foreground#8A9AB7
  • statusBar.noFolderBackground#11171F
  • statusBarItem.hoverBackground#1A2E36
  • tab.activeBackground#11171F
  • tab.activeBorder#00D1C1
  • tab.activeForeground#B0C4D9
  • tab.border#0B0F1A
  • tab.inactiveBackground#0B0F1A
  • tab.inactiveForeground#6A7D94
  • terminal.ansiBlue#7B5EDB
  • terminal.ansiBrightBlue#9A8BFF
  • terminal.ansiBrightCyan#00FFFF
  • terminal.ansiBrightGreen#53D68C
  • terminal.ansiBrightMagenta#BD93F9
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#00D1C1
  • terminal.ansiGreen#2E8B57
  • terminal.ansiMagenta#9A70C9
  • terminal.ansiRed#C55A5A
  • terminal.ansiYellow#CFAF45
  • terminal.background#0B0F1A
  • terminal.foreground#B0C4D9
  • titleBar.activeBackground#151C27
  • titleBar.activeForeground#B0C4D9
  • titleBar.inactiveBackground#0B0F1A
  • titleBar.inactiveForeground#6A7D94

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#00FFEF
keyword, storage.type, storage.modifier#5A3EAAbold
keyword.operator, punctuation.accessor#7A5FD8
variable, variable.other#D0D0D0
variable.parameter#999999italic
entity.name.function, support.function#7A5FD8
meta.function-call#999999
entity.name.class, entity.name.type.class, support.class#5A3EAAbold
entity.name.type, support.type#7A5FD8
entity.name.type.interface#00FFEFitalic
constant.numeric#7A5FD8
constant, constant.language, constant.character#999999
constant.language.boolean#5A3EAAbold
variable.other.property, support.variable.property#D0D0D0
meta.object-literal.key#7A5FD8
entity.name.tag, punctuation.definition.tag#5A3EAA
entity.other.attribute-name#00FFEFitalic
punctuation, meta.brace#777777
string.regexp#00FFEF
constant.character.escape#5A3EAA
meta.decorator, punctuation.decorator#7A5FD8
invalid, invalid.illegal#777777strikethrough
markup.heading, entity.name.section#5A3EAAbold
markup.bold#D0D0D0bold
markup.italic#00FFEFitalic
markup.underline.link#00FFEF
markup.inline.raw, markup.fenced_code#7A5FD8
support.type.property-name.json#5A3EAA
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5A3EAA
support.type.property-name.css#7A5FD8
support.constant.property-value.css#00FFEF
themesmith by CyberBoost - VS Code Theme