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#FFB400
  • activityBar.background#001B2A
  • activityBar.foreground#FFB400
  • activityBarBadge.background#FFB400
  • activityBarBadge.foreground#001720
  • badge.background#FFB400
  • badge.foreground#001720
  • button.background#004E5C
  • button.foreground#FFFFFF
  • button.hoverBackground#006673
  • dropdown.background#001B2A
  • dropdown.border#004E5C
  • dropdown.foreground#E0F8FF
  • editor.background#001720
  • editor.findMatchBackground#FFB40066
  • editor.findMatchHighlightBackground#FFB40033
  • editor.foreground#E0F8FF
  • editor.lineHighlightBackground#00384280
  • editor.lineHighlightBorder#003842
  • editor.selectionBackground#004E5C88
  • editor.selectionHighlightBackground#004E5C44
  • editorBracketMatch.background#004E5C33
  • editorBracketMatch.border#00D1C1
  • editorCursor.foreground#00D1C1
  • editorGroupHeader.tabsBackground#001720
  • editorIndentGuide.activeBackground#00D1C1
  • editorIndentGuide.background#004E5C44
  • editorLineNumber.activeForeground#00D1C1
  • editorLineNumber.foreground#004E5C
  • editorWhitespace.foreground#004E5C44
  • focusBorder#FFB400
  • gitDecoration.conflictingResourceForeground#FFB400
  • gitDecoration.deletedResourceForeground#FF4F4F
  • gitDecoration.modifiedResourceForeground#00D1C1
  • gitDecoration.untrackedResourceForeground#A0FF70
  • input.background#001B2A
  • input.border#004E5C
  • input.foreground#E0F8FF
  • input.placeholderForeground#5A5A5A
  • inputOption.activeBorder#FFB400
  • list.activeSelectionBackground#004E5C
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#004E5C
  • list.highlightForeground#FFB400
  • list.hoverBackground#004E5C66
  • minimap.background#001720
  • minimapSlider.activeBackground#FFB40066
  • minimapSlider.background#FFB40022
  • minimapSlider.hoverBackground#FFB40044
  • panel.background#001720
  • panel.border#004E5C
  • panelTitle.activeBorder#FFB400
  • panelTitle.activeForeground#FFB400
  • panelTitle.inactiveForeground#C0D8E0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FFB40088
  • scrollbarSlider.background#004E5C44
  • scrollbarSlider.hoverBackground#004E5C88
  • sideBar.background#001720
  • sideBar.foreground#C0D8E0
  • sideBarSectionHeader.background#002530
  • sideBarSectionHeader.foreground#FFB400
  • sideBarTitle.foreground#FFB400
  • statusBar.background#002830
  • statusBar.debuggingBackground#FF4F4F
  • statusBar.foreground#E0F8FF
  • statusBar.noFolderBackground#001B2A
  • statusBarItem.hoverBackground#003842
  • tab.activeBackground#002830
  • tab.activeBorder#FFB400
  • tab.activeForeground#FFFFFF
  • tab.border#001720
  • tab.inactiveBackground#001720
  • tab.inactiveForeground#C0D8E0
  • terminal.ansiBlue#00D1C1
  • terminal.ansiBrightBlue#7FFFD4
  • terminal.ansiBrightCyan#B0FFF0
  • terminal.ansiBrightGreen#C8FFB0
  • terminal.ansiBrightMagenta#FFB6C1
  • terminal.ansiBrightRed#FF7F7F
  • terminal.ansiBrightYellow#FFE080
  • terminal.ansiCyan#66FFE0
  • terminal.ansiGreen#A0FF70
  • terminal.ansiMagenta#FF81E0
  • terminal.ansiRed#FF4F4F
  • terminal.ansiYellow#FFB400
  • terminal.background#001720
  • terminal.foreground#E0F8FF
  • titleBar.activeBackground#001B2A
  • titleBar.activeForeground#E0F8FF
  • titleBar.inactiveBackground#001720
  • titleBar.inactiveForeground#C0D8E0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A5Aitalic
string, string.quoted, string.template#66FFE0
keyword, storage.type, storage.modifier#FFB400bold
keyword.operator, punctuation.accessor#E0F8FF
variable, variable.other#E0F8FF
variable.parameter#00D1C1italic
entity.name.function, support.function#66FFE0
meta.function-call#E0F8FF
entity.name.class, entity.name.type.class, support.class#FFB400bold
entity.name.type, support.type#00D1C1
entity.name.type.interface#00D1C1italic
constant.numeric#FFB400
constant, constant.language, constant.character#FFB400
constant.language.boolean#FFB400bold
variable.other.property, support.variable.property#E0F8FF
meta.object-literal.key#00D1C1
entity.name.tag, punctuation.definition.tag#FFB400
entity.other.attribute-name#FF81E0italic
punctuation, meta.brace#E0F8FF
string.regexp#FFB400
constant.character.escape#FF81E0
meta.decorator, punctuation.decorator#FFE080
invalid, invalid.illegal#FF4F4Fstrikethrough
markup.heading, entity.name.section#FFB400bold
markup.bold#FFB400bold
markup.italic#FF81E0italic
markup.underline.link#00D1C1
markup.inline.raw, markup.fenced_code#A0FF70
support.type.property-name.json#00D1C1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB400
support.type.property-name.css#00D1C1
support.constant.property-value.css#E0F8FF
themesmith by CyberBoost - VS Code Theme