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#FF6F61
  • activityBar.background#081F23
  • activityBar.foreground#E0E0E0
  • activityBarBadge.background#FF6F61
  • activityBarBadge.foreground#0B2B34
  • badge.background#FF6F61
  • badge.foreground#0B2B34
  • button.background#FFB74D
  • button.foreground#FFFFFF
  • button.hoverBackground#FFB74DAA
  • dropdown.background#081F23
  • dropdown.border#FFB74D
  • dropdown.foreground#E0E0E0
  • editor.background#0B2B34
  • editor.findMatchBackground#FFB74D50
  • editor.findMatchHighlightBackground#FFB74D30
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#FF6F6010
  • editor.lineHighlightBorder#FF6F6040
  • editor.selectionBackground#FF6F6170
  • editor.selectionHighlightBackground#FF6F6160
  • editorBracketMatch.background#FF6F6030
  • editorBracketMatch.border#FF6F61
  • editorCursor.foreground#FF6F61
  • editorGroupHeader.tabsBackground#081F23
  • editorIndentGuide.activeBackground#FF6F6070
  • editorIndentGuide.background#FF6F6030
  • editorLineNumber.activeForeground#FF6F61
  • editorLineNumber.foreground#617D8A
  • editorWhitespace.foreground#617D8A80
  • focusBorder#FF6F61
  • gitDecoration.conflictingResourceForeground#FF6F61
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#FFB74D
  • gitDecoration.untrackedResourceForeground#00BCD4
  • input.background#081F23
  • input.border#FFB74D
  • input.foreground#E0E0E0
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#FF6F61
  • list.activeSelectionBackground#FFB74D60
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#FFB74D60
  • list.highlightForeground#FF6F61
  • list.hoverBackground#FFB74D50
  • minimap.background#0B2B34
  • minimapSlider.activeBackground#FF6F6040
  • minimapSlider.background#FF6F6020
  • minimapSlider.hoverBackground#FF6F6030
  • panel.background#0B2B34
  • panel.border#081F23
  • panelTitle.activeBorder#FF6F61
  • panelTitle.activeForeground#E0E0E0
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF6F61AA
  • scrollbarSlider.background#A0A0A060
  • scrollbarSlider.hoverBackground#A0A0A080
  • sideBar.background#081F23
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#0B2B34
  • sideBarSectionHeader.foreground#FFB74D
  • sideBarTitle.foreground#FFB74D
  • statusBar.background#FFB74D
  • statusBar.debuggingBackground#FF6F61
  • statusBar.foreground#0B2B34
  • statusBar.noFolderBackground#081F23
  • statusBarItem.hoverBackground#FF6F6160
  • tab.activeBackground#0B2B34
  • tab.activeBorder#FF6F61
  • tab.activeForeground#E0E0E0
  • tab.border#060F12
  • tab.inactiveBackground#081F23
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#18FFFF
  • terminal.ansiBrightGreen#C6FF00
  • terminal.ansiBrightMagenta#FF80AB
  • terminal.ansiBrightRed#FF867F
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#F44336
  • terminal.ansiYellow#FFC107
  • terminal.background#0B2B34
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#081F23
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#0B2B34
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#B0BEC5italic
string, string.quoted, string.template#00E5FF
keyword, storage.type, storage.modifier#FF7043bold
keyword.operator, punctuation.accessor#1E88E5
variable, variable.other#ECEFF1
variable.parameter#00E5FFitalic
entity.name.function, support.function#1E88E5
meta.function-call#FF7043
entity.name.class, entity.name.type.class, support.class#FF7043bold
entity.name.type, support.type#1E88E5
entity.name.type.interface#00E5FFitalic
constant.numeric#FF7043
constant, constant.language, constant.character#00E5FF
constant.language.boolean#FF7043bold
variable.other.property, support.variable.property#1E88E5
meta.object-literal.key#FF7043
entity.name.tag, punctuation.definition.tag#1E88E5
entity.other.attribute-name#FF7043italic
punctuation, meta.brace#ECEFF1
string.regexp#00E5FF
constant.character.escape#FF7043
meta.decorator, punctuation.decorator#1E88E5
invalid, invalid.illegal#FF5252strikethrough
markup.heading, entity.name.section#1E88E5bold
markup.bold#FF7043bold
markup.italic#1E88E5italic
markup.underline.link#FF7043
markup.inline.raw, markup.fenced_code#00E5FF
support.type.property-name.json#FF7043
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#1E88E5
support.type.property-name.css#FF7043
support.constant.property-value.css#00E5FF
themesmith by CyberBoost - VS Code Theme