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#FF2D70
  • activityBar.background#0B0B0B
  • activityBar.foreground#FF2D70
  • activityBarBadge.background#FF2D70
  • activityBarBadge.foreground#0B0B0B
  • badge.background#FF2D70
  • badge.foreground#0B0B0B
  • button.background#FF2D70
  • button.foreground#0B0B0B
  • button.hoverBackground#FF5F9E
  • dropdown.background#0B0B0B
  • dropdown.border#FF2D70
  • dropdown.foreground#D0D0D0
  • editor.background#0B0B0B
  • editor.findMatchBackground#A0FF5560
  • editor.findMatchHighlightBackground#A0FF5520
  • editor.foreground#D0D0D0
  • editor.lineHighlightBackground#00E5FF20
  • editor.lineHighlightBorder#00E5FF80
  • editor.selectionBackground#FF2D7060
  • editor.selectionHighlightBackground#FF2D7040
  • editorBracketMatch.background#A0FF5520
  • editorBracketMatch.border#A0FF55
  • editorCursor.foreground#FF2D70
  • editorGroupHeader.tabsBackground#0B0B0B
  • editorIndentGuide.activeBackground#55555588
  • editorIndentGuide.background#55555544
  • editorLineNumber.activeForeground#FF2D70
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#FF2D70
  • gitDecoration.conflictingResourceForeground#FF2D70
  • gitDecoration.deletedResourceForeground#FF2D70
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#A0FF55
  • input.background#0B0B0B
  • input.border#FF2D70
  • input.foreground#D0D0D0
  • input.placeholderForeground#555555
  • inputOption.activeBorder#FF2D70
  • list.activeSelectionBackground#FF2D7060
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#FF2D7060
  • list.highlightForeground#FF2D70
  • list.hoverBackground#FF2D6060
  • minimap.background#0B0B0B
  • minimapSlider.activeBackground#FF2D7066
  • minimapSlider.background#FF2D7022
  • minimapSlider.hoverBackground#FF2D7044
  • panel.background#0B0B0B
  • panel.border#00E5FF
  • panelTitle.activeBorder#FF2D70
  • panelTitle.activeForeground#D0D0D0
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF2D7088
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#0B0B0B
  • sideBar.foreground#D0D0D0
  • sideBarSectionHeader.background#0B0B0B
  • sideBarSectionHeader.foreground#00E5FF
  • sideBarTitle.foreground#FF2D70
  • statusBar.background#0B0B0B
  • statusBar.debuggingBackground#FF2D70
  • statusBar.foreground#D0D0D0
  • statusBar.noFolderBackground#0B0B0B
  • statusBarItem.hoverBackground#FF2D7060
  • tab.activeBackground#0B0B0B
  • tab.activeBorder#FF2D70
  • tab.activeForeground#D0D0D0
  • tab.border#0B0B0B
  • tab.inactiveBackground#0B0B0B
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#00E5FF
  • terminal.ansiBrightBlue#33F0FF
  • terminal.ansiBrightCyan#33F0FF
  • terminal.ansiBrightGreen#B3FF88
  • terminal.ansiBrightMagenta#FF5FA0
  • terminal.ansiBrightRed#FF5FA0
  • terminal.ansiBrightYellow#FFDD55
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#A0FF55
  • terminal.ansiMagenta#FF2D70
  • terminal.ansiRed#FF2D70
  • terminal.ansiYellow#FFCC33
  • terminal.background#0B0B0B
  • terminal.foreground#D0D0D0
  • titleBar.activeBackground#0B0B0B
  • titleBar.activeForeground#D0D0D0
  • titleBar.inactiveBackground#0B0B0B
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#A0FF55—
keyword, storage.type, storage.modifier#FF2D70bold
keyword.operator, punctuation.accessor#00E5FF—
variable, variable.other#D0D0D0—
variable.parameter#00E5FFitalic
entity.name.function, support.function#FF2D70—
meta.function-call#00E5FF—
entity.name.class, entity.name.type.class, support.class#FF2D70bold
entity.name.type, support.type#00E5FF—
entity.name.type.interface#00E5FFitalic
constant.numeric#A0FF55—
constant, constant.language, constant.character#A0FF55—
constant.language.boolean#FF2D70bold
variable.other.property, support.variable.property#D0D0D0—
meta.object-literal.key#00E5FF—
entity.name.tag, punctuation.definition.tag#FF2D70—
entity.other.attribute-name#A0FF55italic
punctuation, meta.brace#D0D0D0—
string.regexp#A0FF55—
constant.character.escape#A0FF55—
meta.decorator, punctuation.decorator#00E5FF—
invalid, invalid.illegal#FF2D70strikethrough
markup.heading, entity.name.section#FF2D70bold
markup.bold#FF2D70bold
markup.italic#00E5FFitalic
markup.underline.link#00E5FF—
markup.inline.raw, markup.fenced_code#A0FF55—
support.type.property-name.json#00E5FF—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF2D70—
support.type.property-name.css#00E5FF—
support.constant.property-value.css#A0FF55—
themesmith by CyberBoost - VS Code Theme