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#010409
  • activityBar.foreground#4caf50
  • activityBar.inactiveForeground#6a737d
  • activityBarBadge.background#f44336
  • activityBarBadge.foreground#ffffff
  • badge.background#f44336
  • badge.foreground#ffffff
  • button.background#4caf50
  • button.foreground#ffffff
  • button.hoverBackground#66bb6a
  • dropdown.background#0a0e14
  • dropdown.border#21262d
  • dropdown.foreground#c9d1d9
  • editor.background#0d1117
  • editor.findMatchBackground#ff980060
  • editor.findMatchHighlightBackground#ff980040
  • editor.foreground#c9d1d9
  • editor.lineHighlightBackground#161b2280
  • editor.selectionBackground#1c212880
  • editor.selectionHighlightBackground#1c212860
  • editor.wordHighlightBackground#1c212860
  • editor.wordHighlightStrongBackground#1c212880
  • editorBracketMatch.background#1c212880
  • editorBracketMatch.border#4caf50
  • editorCursor.foreground#4caf50
  • editorError.foreground#f44336
  • editorGhostText.border#4caf5030
  • editorGhostText.foreground#4caf5050
  • editorGroupHeader.tabsBackground#010409
  • editorHint.foreground#00bcd4
  • editorIndentGuide.activeBackground1#4caf50
  • editorIndentGuide.background1#21262d
  • editorInfo.foreground#2196f3
  • editorInlayHint.background#1c212820
  • editorInlayHint.foreground#8b949e
  • editorInlayHint.parameterForeground#42a5f5
  • editorInlayHint.typeForeground#66bb6a
  • editorLineNumber.activeForeground#4caf50
  • editorLineNumber.foreground#30363d
  • editorStickyScroll.background#0a0e14
  • editorStickyScroll.border#21262d
  • editorStickyScrollHover.background#161b22
  • editorWarning.foreground#ff9800
  • gitDecoration.conflictingResourceForeground#ff3333
  • gitDecoration.deletedResourceForeground#f44336
  • gitDecoration.ignoredResourceForeground#6a737d
  • gitDecoration.modifiedResourceForeground#ff9800
  • gitDecoration.stageDeletedResourceForeground#ff9800
  • gitDecoration.stageModifiedResourceForeground#ffca28
  • gitDecoration.untrackedResourceForeground#4caf50
  • input.background#0a0e14
  • input.border#21262d
  • input.foreground#c9d1d9
  • inputOption.activeBorder#4caf50
  • inputValidation.errorBackground#f4433620
  • inputValidation.errorBorder#f44336
  • inputValidation.warningBackground#ff980020
  • inputValidation.warningBorder#ff9800
  • list.activeSelectionBackground#1c2128
  • list.activeSelectionForeground#4caf50
  • list.focusBackground#1c2128
  • list.hoverBackground#1c212899
  • list.inactiveSelectionBackground#161b22
  • minimap.errorHighlight#f4433680
  • minimap.findMatchHighlight#ff980080
  • minimap.selectionHighlight#1c212860
  • minimap.warningHighlight#ff980080
  • panel.background#0a0e14
  • panel.border#21262d
  • panelTitle.activeBorder#4caf50
  • panelTitle.activeForeground#c9d1d9
  • panelTitle.inactiveForeground#6a737d
  • peekView.border#4caf50
  • peekViewEditor.background#0a0e14
  • peekViewResult.background#010409
  • scrollbarSlider.activeBackground#484f5880
  • scrollbarSlider.background#21262d80
  • scrollbarSlider.hoverBackground#30363d80
  • sideBar.background#010409
  • sideBar.foreground#8b949e
  • sideBarSectionHeader.background#0a0e14
  • sideBarSectionHeader.foreground#4caf50
  • sideBarTitle.foreground#4caf50
  • statusBar.background#0a0e14
  • statusBar.debuggingBackground#ff9800
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#4caf50
  • statusBar.noFolderBackground#0a0e14
  • statusBarItem.prominentBackground#f44336
  • tab.activeBackground#0d1117
  • tab.activeBorder#4caf50
  • tab.activeForeground#4caf50
  • tab.border#21262d
  • tab.inactiveBackground#010409
  • tab.inactiveForeground#6a737d
  • terminal.ansiBlack#484f58
  • terminal.ansiBlue#2196f3
  • terminal.ansiBrightBlack#6a737d
  • terminal.ansiBrightBlue#42a5f5
  • terminal.ansiBrightCyan#26c6da
  • terminal.ansiBrightGreen#66bb6a
  • terminal.ansiBrightMagenta#ab47bc
  • terminal.ansiBrightRed#ff5252
  • terminal.ansiBrightWhite#f0f6fc
  • terminal.ansiBrightYellow#ffca28
  • terminal.ansiCyan#00bcd4
  • terminal.ansiGreen#4caf50
  • terminal.ansiMagenta#9c27b0
  • terminal.ansiRed#f44336
  • terminal.ansiWhite#b1bac4
  • terminal.ansiYellow#ffc107
  • terminal.background#0d1117
  • terminal.foreground#c9d1d9
  • titleBar.activeBackground#010409
  • titleBar.activeForeground#c9d1d9
  • titleBar.inactiveBackground#010409
  • titleBar.inactiveForeground#6a737d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a737ditalic
keyword.codetag#ff5722bold
string, string.quoted, string.template#4caf50—
constant.character.escape#66bb6abold
constant.numeric#00bcd4—
keyword.control, keyword.operator.new#ff9800bold
keyword, storage.type, storage.modifier#00bcd4—
entity.name.function, support.function#2196f3—
entity.name.class, entity.name.type.class, support.class#66bb6abold
variable, support.variable#c9d1d9—
variable.language.this, variable.language.self#ff9800italic
variable.object.property, support.type.property-name#42a5f5—
variable.other.constant, constant.other#26c6dabold
keyword.operator#4caf50—
keyword.other.DML.sql, constant.other.database-name, constant.other.table-name#9c27b0bold underline
string.regexp#cddc39—
support.type.property-name.json, meta.structure.dictionary.key.json#42a5f5—
entity.name.tag, punctuation.definition.tag#ff5722—
entity.other.attribute-name#ff9800—
entity.name.tag.css, entity.other.attribute-name.class.css#4caf50—
keyword.control.import, keyword.control.from, meta.import#00bcd4—
variable.other.readwrite.module#26c6da—
entity.name.function.decorator, meta.decorator, punctuation.decorator#ffc107bold
entity.name.type, support.type#66bb6a—
invalid, invalid.illegal#f44336bold underline
invalid.deprecated#ff9800strikethrough
markup.heading#4caf50bold
markup.underline.link#2196f3underline
markup.inline.raw, markup.fenced_code#66bb6a—
support.type.object.console#ff9800—
storage.type.function.arrow, storage.type.function.async#42a5f5italic
variable.parameter.function.language.special.self#ff9800italic
storage.type.contract#ffc107bold
storage.type.modifier#4caf50bold
storage.type.event#00bcd4—
storage.modifier.lifetime#ff9800—
variable.other.go#c9d1d9—
support.function.dangerous, entity.name.function.dangerous, support.function.eval, support.function.exec#ff3333bold underline
support.variable.dom, support.class.storage, support.variable.property.dom#ff9800bold
support.class.crypto, support.function.secure, entity.name.type.crypto#66bb6abold
text.html meta.embedded.block.php, text.html meta.embedded.line.php, string.quoted.double.html meta.attribute-with-value.html#ff5722underline