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#FF6EC7
  • activityBar.background#0A001A
  • activityBar.foreground#00E5FF
  • activityBarBadge.background#00E5FF
  • activityBarBadge.foreground#0B001F
  • badge.background#00E5FF
  • badge.foreground#0B001F
  • button.background#0C001E
  • button.foreground#E5E5E5
  • button.hoverBackground#1A001F
  • dropdown.background#0C001E
  • dropdown.border#333333
  • dropdown.foreground#E5E5E5
  • editor.background#0B001F
  • editor.findMatchBackground#00E5FF44
  • editor.findMatchHighlightBackground#FF6EC722
  • editor.foreground#E5E5E5
  • editor.lineHighlightBackground#1A001F80
  • editor.lineHighlightBorder#00E5FF20
  • editor.selectionBackground#00E5FF33
  • editor.selectionHighlightBackground#FF6EC722
  • editorBracketMatch.background#00E5FF33
  • editorBracketMatch.border#00E5FF
  • editorCursor.foreground#00E5FF
  • editorGroupHeader.tabsBackground#0B001F
  • editorIndentGuide.activeBackground#00E5FF88
  • editorIndentGuide.background#33333344
  • editorLineNumber.activeForeground#00E5FF
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#333333
  • focusBorder#00E5FF
  • gitDecoration.conflictingResourceForeground#FFD700
  • gitDecoration.deletedResourceForeground#FF4081
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#A6FF00
  • input.background#0C001E
  • input.border#333333
  • input.foreground#E5E5E5
  • input.placeholderForeground#555555
  • inputOption.activeBorder#00E5FF
  • list.activeSelectionBackground#1A001F
  • list.activeSelectionForeground#00E5FF
  • list.focusBackground#1A001F
  • list.highlightForeground#00E5FF
  • list.hoverBackground#111A2B66
  • minimap.background#0B001F
  • minimapSlider.activeBackground#00E5FF66
  • minimapSlider.background#00E5FF22
  • minimapSlider.hoverBackground#00E5FF44
  • panel.background#0B001F
  • panel.border#0C001E
  • panelTitle.activeBorder#00E5FF
  • panelTitle.activeForeground#00E5FF
  • panelTitle.inactiveForeground#888888
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00E5FF88
  • scrollbarSlider.background#33333344
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#0C001E
  • sideBar.foreground#C0C0C0
  • sideBarSectionHeader.background#0A001A
  • sideBarSectionHeader.foreground#00E5FF
  • sideBarTitle.foreground#00E5FF
  • statusBar.background#0B001F
  • statusBar.debuggingBackground#FF6EC7
  • statusBar.foreground#E5E5E5
  • statusBar.noFolderBackground#0A001A
  • statusBarItem.hoverBackground#1A001F
  • tab.activeBackground#0C001E
  • tab.activeBorder#00E5FF
  • tab.activeForeground#00E5FF
  • tab.border#0A001A
  • tab.inactiveBackground#0B001F
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#0066FF
  • terminal.ansiBrightBlue#00E5FF
  • terminal.ansiBrightCyan#88FFFF
  • terminal.ansiBrightGreen#B3FF33
  • terminal.ansiBrightMagenta#FF6EC7
  • terminal.ansiBrightRed#FF6B8B
  • terminal.ansiBrightYellow#FFE66B
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#A6FF00
  • terminal.ansiMagenta#FF6EC7
  • terminal.ansiRed#FF4081
  • terminal.ansiYellow#FFD700
  • terminal.background#0B001F
  • terminal.foreground#E5E5E5
  • titleBar.activeBackground#0B001F
  • titleBar.activeForeground#E5E5E5
  • titleBar.inactiveBackground#080012
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#A6FF00—
keyword, storage.type, storage.modifier#00E5FFbold
keyword.operator, punctuation.accessor#FF6EC7—
variable, variable.other#E0E0E0—
variable.parameter#FF6EC7italic
entity.name.function, support.function#00E5FF—
meta.function-call#A8A8A8—
entity.name.class, entity.name.type.class, support.class#FF6EC7bold
entity.name.type, support.type#00E5FF—
entity.name.type.interface#A6FF00italic
constant.numeric#FFD700—
constant, constant.language, constant.character#FF6EC7—
constant.language.boolean#FFD700bold
variable.other.property, support.variable.property#E0E0E0—
meta.object-literal.key#00E5FF—
entity.name.tag, punctuation.definition.tag#FF6EC7—
entity.other.attribute-name#A6FF00italic
punctuation, meta.brace#888888—
string.regexp#FF4081—
constant.character.escape#A6FF00—
meta.decorator, punctuation.decorator#FFD700—
invalid, invalid.illegal#FF4081strikethrough
markup.heading, entity.name.section#00E5FFbold
markup.bold#FF6EC7bold
markup.italic#A6FF00italic
markup.underline.link#00E5FF—
markup.inline.raw, markup.fenced_code#A6FF00—
support.type.property-name.json#00E5FF—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6EC7—
support.type.property-name.css#00E5FF—
support.constant.property-value.css#A6FF00—
themesmith by CyberBoost - VS Code Theme