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.background#333333
  • activityBar.foreground#cccccc
  • editor.background#1e1e1e
  • editor.foreground#dcdcaa
  • editor.selectionBackground#404040
  • editor.selectionHighlightBackground#2d2d2d
  • editorBracketHighlight.foreground1#ffd700
  • editorBracketHighlight.foreground2#da70d6
  • editorBracketHighlight.foreground3#87ceeb
  • editorBracketHighlight.foreground4#ffa500
  • editorBracketHighlight.foreground5#98fb98
  • editorBracketHighlight.foreground6#f0e68c
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorBracketPairGuide.activeBackground1#ffd700
  • editorBracketPairGuide.activeBackground2#da70d6
  • editorBracketPairGuide.activeBackground3#87ceeb
  • editorBracketPairGuide.activeBackground4#ffa500
  • editorBracketPairGuide.activeBackground5#98fb98
  • editorBracketPairGuide.activeBackground6#f0e68c
  • editorBracketPairGuide.background1#ffd70040
  • editorBracketPairGuide.background2#da70d640
  • editorBracketPairGuide.background3#87ceeb40
  • editorBracketPairGuide.background4#ffa50040
  • editorBracketPairGuide.background5#98fb9840
  • editorBracketPairGuide.background6#f0e68c40
  • editorCursor.foreground#ffffff
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#666666
  • editorWhitespace.foreground#404040
  • list.activeSelectionBackground#094771
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#383b3d
  • list.errorForeground#f44747
  • list.focusBackground#094771
  • list.focusForeground#ffffff
  • list.highlightForeground#007acc
  • list.hoverBackground#2a2d2e
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#3c3c3c
  • list.inactiveSelectionForeground#cccccc
  • list.invalidItemForeground#f44747
  • list.warningForeground#ffcc02
  • listFilterWidget.background#3c3c3c
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#000000
  • panel.background#1e1e1e
  • panel.border#404040
  • sideBar.background#252526
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#2d2d30
  • sideBarSectionHeader.border#3e3e42
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#ffffff
  • statusBar.background#007acc
  • statusBar.foreground#ffffff
  • tab.activeBackground#1a1a1a
  • tab.activeForeground#ffffff
  • tab.inactiveBackground#2d2d2d
  • tab.inactiveForeground#999999
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.background#1e1e1e
  • terminal.foreground#d4d4d4
  • terminal.selectionBackground#404040
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#000000
  • titleBar.activeBackground#333333
  • titleBar.activeForeground#ffffff
  • tree.indentGuidesStroke#404040
  • tree.tableColumnsBorder#3e3e42
  • tree.tableOddRowsBackground#1e1e1e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a9955italic
keyword, storage.type, storage.modifier#569cd6bold
string, constant.other.placeholder#6a9955normal
constant.numeric#b5cea8
entity.name.function, meta.function-call#dcdcaa
variable, entity.name.variable#dcdcaanormal
entity.name.type, entity.name.class#4ec9b0
constant, entity.name.constant#4fc1ff
entity.name.tag, meta.tag, punctuation.definition.tag#9cdcfenormal
punctuation.definition.tag.begin, punctuation.definition.tag.end#9cdcfe
entity.other.attribute-name#ce9178
string.quoted, meta.attribute-value string, string.quoted.double.html, string.quoted.single.html#6a9955
text.html, meta.tag.other.html, text#dcdcaa
entity.other.attribute-name.class, meta.attribute.class#6a9955
entity.other.attribute-name.id, meta.attribute.id#6a9955
entity.name.type.class, meta.class#6a9955normal
entity.name.function.method, meta.method#dcdcaa
variable.other.property, meta.property#9cdcfeitalic
keyword.control.import, keyword.control.export#c586c0bold
punctuation.decorator, meta.decorator#4ec9b0italic
string.template, meta.template.expression#6a9955normal
string.regexp#d16969italic
MR Theme by Ramesh Mavuluri - VS Code Theme