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#FFB74D
  • activityBar.background#0A0A0F
  • activityBar.foreground#CED2D9
  • activityBarBadge.background#FFB74D
  • activityBarBadge.foreground#0B0C10
  • badge.background#FFB74D
  • badge.foreground#0B0C10
  • button.background#FFB74D
  • button.foreground#FFFFFF
  • button.hoverBackground#FFCC80
  • dropdown.background#1A1A20
  • dropdown.border#333333
  • dropdown.foreground#CED2D9
  • editor.background#0B0C10
  • editor.findMatchBackground#FFB74D60
  • editor.findMatchHighlightBackground#FFB74D40
  • editor.foreground#CED2D9
  • editor.lineHighlightBackground#ffffff10
  • editor.lineHighlightBorder#ffffff20
  • editor.selectionBackground#FFB74D30
  • editor.selectionHighlightBackground#4DD0E130
  • editorBracketMatch.background#4DD0E130
  • editorBracketMatch.border#4DD0E1
  • editorCursor.foreground#FFB74D
  • editorGroupHeader.tabsBackground#0B0C10
  • editorIndentGuide.activeBackground#777777
  • editorIndentGuide.background#444444
  • editorLineNumber.activeForeground#4DD0E1
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#555555
  • focusBorder#FFB74D
  • gitDecoration.conflictingResourceForeground#FFF176
  • gitDecoration.deletedResourceForeground#FFB74D
  • gitDecoration.modifiedResourceForeground#4DD0E1
  • gitDecoration.untrackedResourceForeground#A5D6A7
  • input.background#1A1A20
  • input.border#333333
  • input.foreground#CED2D9
  • input.placeholderForeground#777C82
  • inputOption.activeBorder#FFB74D
  • list.activeSelectionBackground#4DD0E130
  • list.activeSelectionForeground#CED2D9
  • list.focusBackground#4DD0E130
  • list.highlightForeground#FFB74D
  • list.hoverBackground#4DD0E120
  • minimap.background#0B0C10
  • minimapSlider.activeBackground#4DD0E166
  • minimapSlider.background#4DD0E122
  • minimapSlider.hoverBackground#4DD0E144
  • panel.background#0B0C10
  • panel.border#333333
  • panelTitle.activeBorder#FFB74D
  • panelTitle.activeForeground#CED2D9
  • panelTitle.inactiveForeground#8A8E94
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#555555CC
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#0C0C12
  • sideBar.foreground#CED2D9
  • sideBarSectionHeader.background#0C0C12
  • sideBarSectionHeader.foreground#4DD0E1
  • sideBarTitle.foreground#CED2D9
  • statusBar.background#111117
  • statusBar.debuggingBackground#FFB74D
  • statusBar.foreground#CED2D9
  • statusBar.noFolderBackground#111117
  • statusBarItem.hoverBackground#2A2A33
  • tab.activeBackground#111117
  • tab.activeBorder#FFB74D
  • tab.activeForeground#CED2D9
  • tab.border#0B0C10
  • tab.inactiveBackground#0B0C10
  • tab.inactiveForeground#6E7279
  • terminal.ansiBlue#4DD0E1
  • terminal.ansiBrightBlue#81D4FA
  • terminal.ansiBrightCyan#B2EBF2
  • terminal.ansiBrightGreen#C8E6C9
  • terminal.ansiBrightMagenta#F8BBD0
  • terminal.ansiBrightRed#FFCC80
  • terminal.ansiBrightYellow#FFF59D
  • terminal.ansiCyan#80DEEA
  • terminal.ansiGreen#A5D6A7
  • terminal.ansiMagenta#F48FB1
  • terminal.ansiRed#FFB74D
  • terminal.ansiYellow#FFF176
  • terminal.background#0B0C10
  • terminal.foreground#CED2D9
  • titleBar.activeBackground#0C0C12
  • titleBar.activeForeground#CED2D9
  • titleBar.inactiveBackground#0B0C10
  • titleBar.inactiveForeground#8A8E94

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C6370italic
string, string.quoted, string.template#A5D6A7
keyword, storage.type, storage.modifier#FFB74Dbold
keyword.operator, punctuation.accessor#4DD0E1
variable, variable.other#CED2D9
variable.parameter#A5D6A7italic
entity.name.function, support.function#4DD0E1
meta.function-call#81D4FA
entity.name.class, entity.name.type.class, support.class#FFB74Dbold
entity.name.type, support.type#4DD0E1
entity.name.type.interface#4DD0E1italic
constant.numeric#FFB74D
constant, constant.language, constant.character#4DD0E1
constant.language.boolean#FFB74Dbold
variable.other.property, support.variable.property#A5D6A7
meta.object-literal.key#A5D6A7
entity.name.tag, punctuation.definition.tag#4DD0E1
entity.other.attribute-name#4DD0E1italic
punctuation, meta.brace#CED2D9
string.regexp#FFB74D
constant.character.escape#FFB74D
meta.decorator, punctuation.decorator#4DD0E1
invalid, invalid.illegal#FFB74Dstrikethrough
markup.heading, entity.name.section#FFB74Dbold
markup.bold#4DD0E1bold
markup.italic#4DD0E1italic
markup.underline.link#A5D6A7
markup.inline.raw, markup.fenced_code#A5D6A7
support.type.property-name.json#4DD0E1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB74D
support.type.property-name.css#4DD0E1
support.constant.property-value.css#A5D6A7
themesmith by CyberBoost - VS Code Theme