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#00DFFC
  • activityBar.background#0E1523
  • activityBar.foreground#00DFFC
  • activityBarBadge.background#00DFFC
  • activityBarBadge.foreground#0A0F1A
  • badge.background#00DFFC
  • badge.foreground#0A0F1A
  • button.background#14273F
  • button.foreground#FFFFFF
  • button.hoverBackground#273B5C
  • dropdown.background#0E1523
  • dropdown.border#14273F
  • dropdown.foreground#E0E5F0
  • editor.background#0A0F1A
  • editor.findMatchBackground#00DFFC44
  • editor.findMatchHighlightBackground#00DFFC22
  • editor.foreground#E0E5F0
  • editor.lineHighlightBackground#14273F66
  • editor.lineHighlightBorder#14273F99
  • editor.selectionBackground#00DFFC33
  • editor.selectionHighlightBackground#00DFFC22
  • editorBracketMatch.background#00DFFC33
  • editorBracketMatch.border#00DFFC
  • editorCursor.foreground#00DFFC
  • editorGroupHeader.tabsBackground#0A0F1A
  • editorIndentGuide.activeBackground#4A566D88
  • editorIndentGuide.background#4A566D44
  • editorLineNumber.activeForeground#00DFFC
  • editorLineNumber.foreground#4A566D
  • editorWhitespace.foreground#4A566D44
  • focusBorder#00DFFC
  • gitDecoration.conflictingResourceForeground#FFEB5B
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#00DFFC
  • gitDecoration.untrackedResourceForeground#8AFF96
  • input.background#0E1523
  • input.border#14273F
  • input.foreground#E0E5F0
  • input.placeholderForeground#4A566D
  • inputOption.activeBorder#00DFFC
  • list.activeSelectionBackground#14273F
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#14273F
  • list.highlightForeground#00DFFC
  • list.hoverBackground#14273F66
  • minimap.background#0A0F1A
  • minimapSlider.activeBackground#00DFFC66
  • minimapSlider.background#00DFFC22
  • minimapSlider.hoverBackground#00DFFC44
  • panel.background#0A0F1A
  • panel.border#14273F
  • panelTitle.activeBorder#00DFFC
  • panelTitle.activeForeground#00DFFC
  • panelTitle.inactiveForeground#A1B2C8
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00DFFC88
  • scrollbarSlider.background#4A566D44
  • scrollbarSlider.hoverBackground#4A566D88
  • sideBar.background#0E1523
  • sideBar.foreground#A1B2C8
  • sideBarSectionHeader.background#0E1523
  • sideBarSectionHeader.foreground#00DFFC
  • sideBarTitle.foreground#00DFFC
  • statusBar.background#14273F
  • statusBar.debuggingBackground#00DFFC
  • statusBar.foreground#E0E5F0
  • statusBar.noFolderBackground#0E1523
  • statusBarItem.hoverBackground#273B5C
  • tab.activeBackground#14273F
  • tab.activeBorder#00DFFC
  • tab.activeForeground#FFFFFF
  • tab.border#0A0F1A
  • tab.inactiveBackground#0E1523
  • tab.inactiveForeground#A1B2C8
  • terminal.ansiBlue#00DFFC
  • terminal.ansiBrightBlue#66FFFF
  • terminal.ansiBrightCyan#66FFDD
  • terminal.ansiBrightGreen#66FF96
  • terminal.ansiBrightMagenta#D196FF
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFF79F
  • terminal.ansiCyan#6AFFD1
  • terminal.ansiGreen#8AFF96
  • terminal.ansiMagenta#C58AFF
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFEB5B
  • terminal.background#0A0F1A
  • terminal.foreground#E0E5F0
  • titleBar.activeBackground#0E1523
  • titleBar.activeForeground#E0E5F0
  • titleBar.inactiveBackground#0A0F1A
  • titleBar.inactiveForeground#A1B2C8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4A566Ditalic
string, string.quoted, string.template#8AFF96—
keyword, storage.type, storage.modifier#00DFFCbold
keyword.operator, punctuation.accessor#66FFFF—
variable, variable.other#E0E5F0—
variable.parameter#C58AFFitalic
entity.name.function, support.function#66FFFF—
meta.function-call#A1B2C8—
entity.name.class, entity.name.type.class, support.class#C58AFFbold
entity.name.type, support.type#C58AFF—
entity.name.type.interface#8AFF96italic
constant.numeric#FFEB5B—
constant, constant.language, constant.character#FFEB5B—
constant.language.boolean#FFEB5Bbold
variable.other.property, support.variable.property#A1B2C8—
meta.object-literal.key#66FFFF—
entity.name.tag, punctuation.definition.tag#00DFFC—
entity.other.attribute-name#C58AFFitalic
punctuation, meta.brace#66FFFF—
string.regexp#FF6B6B—
constant.character.escape#C58AFF—
meta.decorator, punctuation.decorator#FFEB5B—
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#00DFFCbold
markup.bold#FFEB5Bbold
markup.italic#C58AFFitalic
markup.underline.link#8AFF96—
markup.inline.raw, markup.fenced_code#8AFF96—
support.type.property-name.json#00DFFC—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFEB5B—
support.type.property-name.css#66FFFF—
support.constant.property-value.css#8AFF96—
themesmith by CyberBoost - VS Code Theme