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#C41E3A
  • activityBar.background#141414
  • activityBar.foreground#A0A0A0
  • activityBarBadge.background#C41E3A
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C41E3A
  • badge.foreground#FFFFFF
  • button.background#3A3A3A
  • button.foreground#E0E0E0
  • button.hoverBackground#4A4A4A
  • dropdown.background#1A1A1A
  • dropdown.border#3A3A3A
  • dropdown.foreground#E0E0E0
  • editor.background#0D0D0D
  • editor.findMatchBackground#C41E3A
  • editor.findMatchHighlightBackground#8A2F2F
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#2A2A2A
  • editor.lineHighlightBorder#3A3A3A
  • editor.selectionBackground#5A5A5A
  • editor.selectionHighlightBackground#3A3A3A
  • editorBracketMatch.background#3A3A3A
  • editorBracketMatch.border#C41E3A
  • editorCursor.foreground#E0E0E0
  • editorGroupHeader.tabsBackground#151515
  • editorIndentGuide.activeBackground#777777
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#E0E0E0
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#555555
  • focusBorder#C41E3A
  • gitDecoration.conflictingResourceForeground#A074A0
  • gitDecoration.deletedResourceForeground#C41E3A
  • gitDecoration.modifiedResourceForeground#5A9A5A
  • gitDecoration.untrackedResourceForeground#4A6EA9
  • input.background#1A1A1A
  • input.border#3A3A3A
  • input.foreground#E0E0E0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#C41E3A
  • list.activeSelectionBackground#3A3A3A
  • list.activeSelectionForeground#E0E0E0
  • list.focusBackground#2A2A2A
  • list.highlightForeground#C41E3A
  • list.hoverBackground#2A2A2A
  • minimap.background#151515
  • minimapSlider.activeBackground#777777
  • minimapSlider.background#333333
  • minimapSlider.hoverBackground#555555
  • panel.background#151515
  • panel.border#2A2A2A
  • panelTitle.activeBorder#C41E3A
  • panelTitle.activeForeground#E0E0E0
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#777777
  • scrollbarSlider.background#333333
  • scrollbarSlider.hoverBackground#555555
  • sideBar.background#151515
  • sideBar.foreground#A0A0A0
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#C0C0C0
  • sideBarTitle.foreground#E0E0E0
  • statusBar.background#141414
  • statusBar.debuggingBackground#5A5A5A
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#0D0D0D
  • statusBarItem.hoverBackground#2A2A2A
  • tab.activeBackground#151515
  • tab.activeBorder#C41E3A
  • tab.activeForeground#E0E0E0
  • tab.border#2A2A2A
  • tab.inactiveBackground#0D0D0D
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#4A6EA9
  • terminal.ansiBrightBlue#6B8FBF
  • terminal.ansiBrightCyan#78BFCF
  • terminal.ansiBrightGreen#78C878
  • terminal.ansiBrightMagenta#C994D5
  • terminal.ansiBrightRed#E04A4A
  • terminal.ansiBrightYellow#D8C973
  • terminal.ansiCyan#5A8FA1
  • terminal.ansiGreen#5A9A5A
  • terminal.ansiMagenta#A074A0
  • terminal.ansiRed#C41E3A
  • terminal.ansiYellow#B5A041
  • terminal.background#0D0D0D
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#0D0D0D
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#080808
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#5A9A5A
keyword, storage.type, storage.modifier#C41E3Abold
keyword.operator, punctuation.accessor#A074A0
variable, variable.other#E0E0E0
variable.parameter#8A8A8Aitalic
entity.name.function, support.function#4A6EA9
meta.function-call#6B8FBF
entity.name.class, entity.name.type.class, support.class#78C878bold
entity.name.type, support.type#78BFCF
entity.name.type.interface#78C878italic
constant.numeric#D8C973
constant, constant.language, constant.character#A074A0
constant.language.boolean#C41E3Abold
variable.other.property, support.variable.property#5A5A5A
meta.object-literal.key#5A5A5A
entity.name.tag, punctuation.definition.tag#C41E3A
entity.other.attribute-name#C41E3Aitalic
punctuation, meta.brace#777777
string.regexp#5A9A5A
constant.character.escape#C41E3A
meta.decorator, punctuation.decorator#4A6EA9
invalid, invalid.illegal#E53E53strikethrough
markup.heading, entity.name.section#E0E0E0bold
markup.bold#E0E0E0bold
markup.italic#E0E0E0italic
markup.underline.link#4A6EA9
markup.inline.raw, markup.fenced_code#5A9A5A
support.type.property-name.json#5A9A5A
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4A6EA9
support.type.property-name.css#5A9A5A
support.constant.property-value.css#D8C973
themesmith by CyberBoost - VS Code Theme