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#FF5722
  • activityBar.background#0A001A
  • activityBar.foreground#FFB400
  • activityBarBadge.background#FF5722
  • activityBarBadge.foreground#0B001F
  • badge.background#FF5722
  • badge.foreground#0B001F
  • button.background#120022
  • button.foreground#FFFFFF
  • button.hoverBackground#260040
  • dropdown.background#0D001F
  • dropdown.border#120022
  • dropdown.foreground#E4E4E9
  • editor.background#0B001F
  • editor.findMatchBackground#FFB40044
  • editor.findMatchHighlightBackground#FFB40022
  • editor.foreground#E4E4E9
  • editor.lineHighlightBackground#1A0033
  • editor.lineHighlightBorder#FF8A00
  • editor.selectionBackground#FF572233
  • editor.selectionHighlightBackground#FF572222
  • editorBracketMatch.background#FF572233
  • editorBracketMatch.border#FF5722
  • editorCursor.foreground#FF8A00
  • editorGroupHeader.tabsBackground#0B001F
  • editorIndentGuide.activeBackground#FF8A0088
  • editorIndentGuide.background#4A3A5C44
  • editorLineNumber.activeForeground#FFB400
  • editorLineNumber.foreground#4A3A5C
  • editorWhitespace.foreground#4A3A5C
  • focusBorder#FF5722
  • gitDecoration.conflictingResourceForeground#FF5722
  • gitDecoration.deletedResourceForeground#FF5252
  • gitDecoration.modifiedResourceForeground#FFB400
  • gitDecoration.untrackedResourceForeground#00E676
  • input.background#0D001F
  • input.border#120022
  • input.foreground#E4E4E9
  • input.placeholderForeground#7A7A9A
  • inputOption.activeBorder#FF5722
  • list.activeSelectionBackground#120022
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#120022
  • list.highlightForeground#FFB400
  • list.hoverBackground#1A003366
  • minimap.background#0B001F
  • minimapSlider.activeBackground#FF572066
  • minimapSlider.background#FF572022
  • minimapSlider.hoverBackground#FF572044
  • panel.background#0B001F
  • panel.border#120022
  • panelTitle.activeBorder#FF5722
  • panelTitle.activeForeground#FF5722
  • panelTitle.inactiveForeground#7A7A9A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF572288
  • scrollbarSlider.background#4A3A5C44
  • scrollbarSlider.hoverBackground#4A3A5C88
  • sideBar.background#0D001F
  • sideBar.foreground#C0C0D0
  • sideBarSectionHeader.background#0A001A
  • sideBarSectionHeader.foreground#FFB400
  • sideBarTitle.foreground#FFB400
  • statusBar.background#120022
  • statusBar.debuggingBackground#FF5722
  • statusBar.foreground#E4E4E9
  • statusBar.noFolderBackground#0A001A
  • statusBarItem.hoverBackground#260040
  • tab.activeBackground#120022
  • tab.activeBorder#FF5722
  • tab.activeForeground#FFFFFF
  • tab.border#0B001F
  • tab.inactiveBackground#0D001F
  • tab.inactiveForeground#7A7A9A
  • terminal.ansiBlue#4D8BFF
  • terminal.ansiBrightBlue#6FA8FF
  • terminal.ansiBrightCyan#40E0D0
  • terminal.ansiBrightGreen#66FFB2
  • terminal.ansiBrightMagenta#FF6EFF
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFD740
  • terminal.ansiCyan#00E6E6
  • terminal.ansiGreen#00E676
  • terminal.ansiMagenta#E040FB
  • terminal.ansiRed#FF5252
  • terminal.ansiYellow#FFB400
  • terminal.background#0B001F
  • terminal.foreground#E4E4E9
  • titleBar.activeBackground#0A001A
  • titleBar.activeForeground#E4E4E9
  • titleBar.inactiveBackground#0B001F
  • titleBar.inactiveForeground#7A7A9A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A9Aitalic
string, string.quoted, string.template#00E676
keyword, storage.type, storage.modifier#FF5722bold
keyword.operator, punctuation.accessor#FFB400
variable, variable.other#E4E4E9
variable.parameter#FFB400italic
entity.name.function, support.function#4D8BFF
meta.function-call#C0C0D0
entity.name.class, entity.name.type.class, support.class#FF5722bold
entity.name.type, support.type#4D8BFF
entity.name.type.interface#E040FBitalic
constant.numeric#FF5252
constant, constant.language, constant.character#FFB400
constant.language.boolean#FF5252bold
variable.other.property, support.variable.property#C0C0D0
meta.object-literal.key#4D8BFF
entity.name.tag, punctuation.definition.tag#FF5722
entity.other.attribute-name#E040FBitalic
punctuation, meta.brace#FFB400
string.regexp#FF5252
constant.character.escape#E040FB
meta.decorator, punctuation.decorator#FFB400
invalid, invalid.illegal#FF5252strikethrough
markup.heading, entity.name.section#FF5722bold
markup.bold#FFB400bold
markup.italic#E040FBitalic
markup.underline.link#4D8BFF
markup.inline.raw, markup.fenced_code#00E676
support.type.property-name.json#4D8BFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB400
support.type.property-name.css#4D8BFF
support.constant.property-value.css#00E676