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#00BFA5
  • activityBar.background#0F0F1A
  • activityBar.foreground#E2E2E2
  • activityBarBadge.background#FF6F00
  • activityBarBadge.foreground#0F0F1A
  • badge.background#FF6F00
  • badge.foreground#0F0F1A
  • button.background#00BFA5
  • button.foreground#0F0F1A
  • button.hoverBackground#00BFA580
  • dropdown.background#141424
  • dropdown.border#2962FF
  • dropdown.foreground#E2E2E2
  • editor.background#0F0F1A
  • editor.findMatchBackground#FF6F4040
  • editor.findMatchHighlightBackground#FF6F4020
  • editor.foreground#E2E2E2
  • editor.lineHighlightBackground#1A1A2F80
  • editor.lineHighlightBorder#1A1A2F
  • editor.selectionBackground#00BFA540
  • editor.selectionHighlightBackground#00BFA520
  • editorBracketMatch.background#00BFA520
  • editorBracketMatch.border#00BFA5
  • editorCursor.foreground#FFEB3B
  • editorGroupHeader.tabsBackground#0F0F1A
  • editorIndentGuide.activeBackground#33333380
  • editorIndentGuide.background#33333340
  • editorLineNumber.activeForeground#E2E2E2
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#444444
  • focusBorder#00BFA5
  • gitDecoration.conflictingResourceForeground#FFEB3B
  • gitDecoration.deletedResourceForeground#E53935
  • gitDecoration.modifiedResourceForeground#2962FF
  • gitDecoration.untrackedResourceForeground#8BC34A
  • input.background#141424
  • input.border#2962FF
  • input.foreground#E2E2E2
  • input.placeholderForeground#777777
  • inputOption.activeBorder#00BFA5
  • list.activeSelectionBackground#2962FF
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#2962FF80
  • list.highlightForeground#FF6F00
  • list.hoverBackground#2962FF60
  • minimap.background#0F0F1A
  • minimapSlider.activeBackground#55555566
  • minimapSlider.background#55555522
  • minimapSlider.hoverBackground#55555544
  • panel.background#0F0F1A
  • panel.border#FF6F00
  • panelTitle.activeBorder#00BFA5
  • panelTitle.activeForeground#E2E2E2
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#555555CC
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#141424
  • sideBar.foreground#E2E2E2
  • sideBarSectionHeader.background#0F0F1A
  • sideBarSectionHeader.foreground#FF6F00
  • sideBarTitle.foreground#E2E2E2
  • statusBar.background#00BFA5
  • statusBar.debuggingBackground#2962FF
  • statusBar.foreground#0F0F1A
  • statusBar.noFolderBackground#0F0F1A
  • statusBarItem.hoverBackground#00BFA580
  • tab.activeBackground#0F0F1A
  • tab.activeBorder#00BFA5
  • tab.activeForeground#E2E2E2
  • tab.border#000000
  • tab.inactiveBackground#141424
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#2962FF
  • terminal.ansiBrightBlue#5E92F3
  • terminal.ansiBrightCyan#26C6DA
  • terminal.ansiBrightGreen#66BB6A
  • terminal.ansiBrightMagenta#AB47BC
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#00BFA5
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#D81B60
  • terminal.ansiRed#E53935
  • terminal.ansiYellow#FFEB3B
  • terminal.background#0F0F1A
  • terminal.foreground#E2E2E2
  • titleBar.activeBackground#0F0F1A
  • titleBar.activeForeground#E2E2E2
  • titleBar.inactiveBackground#141424
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A5Aitalic
string, string.quoted, string.template#FFEB3B
keyword, storage.type, storage.modifier#00BFA5bold
keyword.operator, punctuation.accessor#2962FF
variable, variable.other#E2E2E2
variable.parameter#FFEB3Bitalic
entity.name.function, support.function#2962FF
meta.function-call#E2E2E2
entity.name.class, entity.name.type.class, support.class#00BFA5bold
entity.name.type, support.type#2962FF
entity.name.type.interface#2962FFitalic
constant.numeric#FFEB3B
constant, constant.language, constant.character#FFEB3B
constant.language.boolean#00BFA5bold
variable.other.property, support.variable.property#E2E2E2
meta.object-literal.key#2962FF
entity.name.tag, punctuation.definition.tag#00BFA5
entity.other.attribute-name#2962FFitalic
punctuation, meta.brace#777777
string.regexp#FFEB3B
constant.character.escape#2962FF
meta.decorator, punctuation.decorator#FFEB3B
invalid, invalid.illegal#EF5350strikethrough
markup.heading, entity.name.section#00BFA5bold
markup.bold#00BFA5bold
markup.italic#2962FFitalic
markup.underline.link#2962FF
markup.inline.raw, markup.fenced_code#FFEB3B
support.type.property-name.json#2962FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#00BFA5
support.type.property-name.css#2962FF
support.constant.property-value.css#FFEB3B