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#FF6C00
  • activityBar.background#111217
  • activityBar.foreground#FF6C00
  • activityBarBadge.background#FF6C00
  • activityBarBadge.foreground#0B0C10
  • badge.background#FF6C00
  • badge.foreground#0B0C10
  • button.background#FF6C00
  • button.foreground#0B0C10
  • button.hoverBackground#FF6C0099
  • dropdown.background#111217
  • dropdown.border#FF6C00
  • dropdown.foreground#D0D0D0
  • editor.background#0B0C10
  • editor.findMatchBackground#FFB30066
  • editor.findMatchHighlightBackground#FFB30044
  • editor.foreground#D0D0D0
  • editor.lineHighlightBackground#1A1C27
  • editor.lineHighlightBorder#FF6C00
  • editor.selectionBackground#FF6C0040
  • editor.selectionHighlightBackground#FF6C0030
  • editorBracketMatch.background#FF6C0033
  • editorBracketMatch.border#FF6C00
  • editorCursor.foreground#FF6C00
  • editorGroupHeader.tabsBackground#111217
  • editorIndentGuide.activeBackground#55557788
  • editorIndentGuide.background#33334444
  • editorLineNumber.activeForeground#FF6C00
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#FF6C00
  • gitDecoration.conflictingResourceForeground#FFB300
  • gitDecoration.deletedResourceForeground#FF5F5F
  • gitDecoration.modifiedResourceForeground#FF6C00
  • gitDecoration.untrackedResourceForeground#FF6CFF
  • input.background#111217
  • input.border#FF6C00
  • input.foreground#D0D0D0
  • input.placeholderForeground#555555
  • inputOption.activeBorder#FF6C00
  • list.activeSelectionBackground#FF6C0033
  • list.activeSelectionForeground#D0D0D0
  • list.focusBackground#FF6C0022
  • list.highlightForeground#FF6C00
  • list.hoverBackground#22253066
  • minimap.background#0B0C10
  • minimapSlider.activeBackground#FF6C0066
  • minimapSlider.background#FF6C0022
  • minimapSlider.hoverBackground#FF6C0044
  • panel.background#0B0C10
  • panel.border#FF6C00
  • panelTitle.activeBorder#FF6C00
  • panelTitle.activeForeground#FF6C00
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000088
  • scrollbarSlider.activeBackground#FF6C0088
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#111217
  • sideBar.foreground#C0C0C0
  • sideBarSectionHeader.background#0F1015
  • sideBarSectionHeader.foreground#FF6C00
  • sideBarTitle.foreground#FF6C00
  • statusBar.background#0F1015
  • statusBar.debuggingBackground#FFB300
  • statusBar.foreground#D0D0D0
  • statusBar.noFolderBackground#111217
  • statusBarItem.hoverBackground#222530
  • tab.activeBackground#0F1015
  • tab.activeBorder#FF6C00
  • tab.activeForeground#D0D0D0
  • tab.border#0B0C10
  • tab.inactiveBackground#0B0C10
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#0077FF
  • terminal.ansiBrightBlue#3399FF
  • terminal.ansiBrightCyan#33E5FF
  • terminal.ansiBrightGreen#66FFB2
  • terminal.ansiBrightMagenta#FF99FF
  • terminal.ansiBrightRed#FF7777
  • terminal.ansiBrightYellow#FFCC66
  • terminal.ansiCyan#00C9FF
  • terminal.ansiGreen#00FF99
  • terminal.ansiMagenta#FF6CFF
  • terminal.ansiRed#FF5F5F
  • terminal.ansiYellow#FFB300
  • terminal.background#0B0C10
  • terminal.foreground#D0D0D0
  • titleBar.activeBackground#111217
  • titleBar.activeForeground#D0D0D0
  • titleBar.inactiveBackground#08090D
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A5Aitalic
string, string.quoted, string.template#FF6CFF
keyword, storage.type, storage.modifier#FF6C00bold
keyword.operator, punctuation.accessor#FFB300
variable, variable.other#C0C0C0
variable.parameter#FF99FFitalic
entity.name.function, support.function#00C9FF
meta.function-call#33E5FF
entity.name.class, entity.name.type.class, support.class#FF6C00bold
entity.name.type, support.type#00C9FF
entity.name.type.interface#FF6C00italic
constant.numeric#FFB300
constant, constant.language, constant.character#FF6C00
constant.language.boolean#FFB300bold
variable.other.property, support.variable.property#00C9FF
meta.object-literal.key#FFB300
entity.name.tag, punctuation.definition.tag#FF6C00
entity.other.attribute-name#FFB300italic
punctuation, meta.brace#D0D0D0
string.regexp#FF6CFF
constant.character.escape#FFB300
meta.decorator, punctuation.decorator#FF6C00
invalid, invalid.illegal#FF5F5Fstrikethrough
markup.heading, entity.name.section#FF6C00bold
markup.bold#FFB300bold
markup.italic#FF6C00italic
markup.underline.link#00C9FF
markup.inline.raw, markup.fenced_code#FF6CFF
support.type.property-name.json#FF6C00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB300
support.type.property-name.css#00C9FF
support.constant.property-value.css#FF6CFF