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#FF5F57
  • activityBar.background#111111
  • activityBar.foreground#FF3B30
  • activityBarBadge.background#FF5F57
  • activityBarBadge.foreground#0A0A0A
  • badge.background#FF3B30
  • badge.foreground#0A0A0A
  • button.background#FF3B30
  • button.foreground#0A0A0A
  • button.hoverBackground#FF5F57
  • dropdown.background#141414
  • dropdown.border#333333
  • dropdown.foreground#E2E2E2
  • editor.background#0A0A0A
  • editor.findMatchBackground#FF5F5720
  • editor.findMatchHighlightBackground#FF5F5740
  • editor.foreground#E2E2E2
  • editor.lineHighlightBackground#1A1A1A80
  • editor.lineHighlightBorder#FF5F57
  • editor.selectionBackground#FF3B3060
  • editor.selectionHighlightBackground#FF3B3040
  • editorBracketMatch.background#FF5F5720
  • editorBracketMatch.border#FF3B30
  • editorCursor.foreground#FF3B30
  • editorGroupHeader.tabsBackground#0F0F0F
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#FF3B30
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#444444
  • focusBorder#FF3B30
  • gitDecoration.conflictingResourceForeground#D500F9
  • gitDecoration.deletedResourceForeground#FF5F57
  • gitDecoration.modifiedResourceForeground#FF3B30
  • gitDecoration.untrackedResourceForeground#FFB24D
  • input.background#141414
  • input.border#333333
  • input.foreground#E2E2E2
  • input.placeholderForeground#777777
  • inputOption.activeBorder#FF3B30
  • list.activeSelectionBackground#FF3B3060
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#FF3B3040
  • list.highlightForeground#FFB24D
  • list.hoverBackground#FF3B3033
  • minimap.background#0A0A0A
  • minimapSlider.activeBackground#FF3B3066
  • minimapSlider.background#77777722
  • minimapSlider.hoverBackground#77777744
  • panel.background#0F0F0F
  • panel.border#1A1A1A
  • panelTitle.activeBorder#FF3B30
  • panelTitle.activeForeground#E2E2E2
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF3B3088
  • scrollbarSlider.background#77777744
  • scrollbarSlider.hoverBackground#77777788
  • sideBar.background#0F0F0F
  • sideBar.foreground#E2E2E2
  • sideBarSectionHeader.background#111111
  • sideBarSectionHeader.foreground#FF5F57
  • sideBarTitle.foreground#FF3B30
  • statusBar.background#111111
  • statusBar.debuggingBackground#FF3B30
  • statusBar.foreground#E2E2E2
  • statusBar.noFolderBackground#0F0F0F
  • statusBarItem.hoverBackground#FF5F57
  • tab.activeBackground#0A0A0A
  • tab.activeBorder#FF3B30
  • tab.activeForeground#FFB24D
  • tab.border#0A0A0A
  • tab.inactiveBackground#0F0F0F
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#0099FF
  • terminal.ansiBrightBlue#66B2FF
  • terminal.ansiBrightCyan#66EFFF
  • terminal.ansiBrightGreen#66FF9E
  • terminal.ansiBrightMagenta#FF66FF
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightYellow#FFD580
  • terminal.ansiCyan#00D8FF
  • terminal.ansiGreen#00E676
  • terminal.ansiMagenta#D500F9
  • terminal.ansiRed#FF3B30
  • terminal.ansiYellow#FFB24D
  • terminal.background#0A0A0A
  • terminal.foreground#E2E2E2
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#E2E2E2
  • titleBar.inactiveBackground#0F0F0F
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#FFB24D
keyword, storage.type, storage.modifier#FF3B30bold
keyword.operator, punctuation.accessor#00C7E6
variable, variable.other#E2E2E2
variable.parameter#00C7E6italic
entity.name.function, support.function#00D8FF
meta.function-call#66EFFF
entity.name.class, entity.name.type.class, support.class#D500F9bold
entity.name.type, support.type#66B2FF
entity.name.type.interface#66FF9Eitalic
constant.numeric#FF3B30
constant, constant.language, constant.character#FFB24D
constant.language.boolean#FF3B30bold
variable.other.property, support.variable.property#E2E2E2
meta.object-literal.key#66B2FF
entity.name.tag, punctuation.definition.tag#FF3B30
entity.other.attribute-name#00C7E6italic
punctuation, meta.brace#E2E2E2
string.regexp#00C7E6
constant.character.escape#D500F9
meta.decorator, punctuation.decorator#FFB24D
invalid, invalid.illegal#FF5F57strikethrough
markup.heading, entity.name.section#FF3B30bold
markup.bold#FFB24Dbold
markup.italic#00C7E6italic
markup.underline.link#00D8FF
markup.inline.raw, markup.fenced_code#FFB24D
support.type.property-name.json#66B2FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D500F9
support.type.property-name.css#00D8FF
support.constant.property-value.css#FFB24D