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#2d2d30
  • activityBar.border#2d2d30
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#007acc
  • activityBarBadge.foreground#ffffff
  • badge.background#007acc
  • badge.foreground#ffffff
  • button.background#0e639c
  • button.foreground#ffffff
  • button.hoverBackground#1177bb
  • editor.background#1e1e1e
  • editor.foreground#d4d4d4
  • editor.hoverHighlightBackground#264f78
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#282828
  • editor.selectionBackground#264f78
  • editor.selectionHighlightBackground#ffffff0d
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightStrongBackground#004972b8
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorCursor.foreground#aeafad
  • editorError.foreground#f48771
  • editorGroup.border#444444
  • editorGroupHeader.tabsBackground#252526
  • editorGutter.addedBackground#487e02
  • editorGutter.background#1e1e1e
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#1b81a8
  • editorHoverWidget.background#252526
  • editorHoverWidget.border#454545
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorLineNumber.activeForeground#c6c6c6
  • editorLineNumber.foreground#858585
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#252526
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#252526
  • editorSuggestWidget.border#454545
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#0097fb
  • editorSuggestWidget.selectedBackground#094771
  • editorWarning.foreground#ffcc02
  • editorWhitespace.foreground#404040
  • editorWidget.background#252526
  • editorWidget.border#454545
  • editorWidget.resizeBorder#5a5a5a
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#007fd4
  • foreground#cccccc
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#e4676b
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • input.background#3c3c3c
  • input.border#3c3c3c
  • input.foreground#cccccc
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#007fd466
  • inputOption.activeBorder#007acc
  • inputValidation.errorBackground#5a1d1d
  • inputValidation.errorBorder#be1100
  • inputValidation.infoBackground#063b49
  • inputValidation.infoBorder#007acc
  • inputValidation.warningBackground#352a05
  • inputValidation.warningBorder#b89500
  • list.activeSelectionBackground#094771
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#383b3d
  • list.focusBackground#062f4a
  • list.focusForeground#cccccc
  • list.highlightForeground#0097fb
  • list.hoverBackground#2a2d2e
  • list.hoverForeground#cccccc
  • list.inactiveSelectionBackground#37373d
  • list.inactiveSelectionForeground#cccccc
  • menu.background#252526
  • menu.border#454545
  • menu.foreground#cccccc
  • menu.selectionBackground#094771
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#454545
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionForeground#cccccc
  • panel.background#1e1e1e
  • panel.border#80808059
  • panel.dropBorder#ffffff
  • panelTitle.activeBorder#e7e7e7
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#e7e7e799
  • peekView.border#007acc
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewResult.background#252526
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1e1e1e
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#264f78
  • settings.headerForeground#e7e7e7
  • settings.modifiedItemIndicator#0c7d9d
  • sideBar.background#252526
  • sideBar.border#2d2d30
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#2d2d30
  • sideBarSectionHeader.border#2d2d30
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#007acc
  • statusBar.border#007acc
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#ffffff25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.prominentBackground#388a34
  • statusBarItem.prominentHoverBackground#369432
  • tab.activeBackground#1e1e1e
  • tab.activeBorder#007acc
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#3399cc
  • tab.border#252526
  • tab.hoverBackground#1e1e1e
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#2d2d30
  • tab.inactiveForeground#ffffff80
  • tab.inactiveModifiedBorder#3399cc80
  • tab.unfocusedActiveBorder#007acc80
  • tab.unfocusedActiveForeground#ffffff80
  • tab.unfocusedActiveModifiedBorder#3399cc80
  • tab.unfocusedHoverBackground#1e1e1e80
  • tab.unfocusedHoverForeground#ffffff80
  • tab.unfocusedInactiveBackground#2d2d30
  • tab.unfocusedInactiveForeground#ffffff40
  • tab.unfocusedInactiveModifiedBorder#3399cc40
  • 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
  • titleBar.activeBackground#3c3c3c
  • titleBar.activeForeground#cccccc
  • titleBar.inactiveBackground#3c3c3c99
  • titleBar.inactiveForeground#cccccc99
  • tree.indentGuidesStroke#585858
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A9955italic
constant, entity.name.constant, variable.other.constant, variable.language#4FC1FF
entity, entity.name#4EC9B0
variable.parameter.function#9CDCFE
entity.name.tag#569CD6
keyword#569CD6
storage, storage.type#569CD6
storage.modifier.package, storage.modifier.import, storage.type.java#D4D4D4
string, punctuation.definition.string, string punctuation.section.embedded source#CE9178
support#4EC9B0
meta.property-name#9CDCFE
variable#9CDCFE
variable.other#9CDCFE
invalid.broken#FDAEB7italic
invalid.deprecated#FDAEB7italic
invalid.illegal#FDAEB7italic
invalid.unimplemented#FDAEB7italic
carriage-return#F0F6FCitalic underline
message.error#F97583
string variable#4FC1FF
source.regexp, string.regexp#D16969
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#CE9178
string.regexp constant.character.escape#4EC9B0bold
support.constant#4FC1FF
support.variable#4FC1FF
meta.module-reference#4FC1FF
punctuation.definition.list.begin.markdown#FFD700
markup.heading, markup.heading entity.name#4FC1FFbold
markup.quote#4EC9B0
markup.italic#D4D4D4italic
markup.bold#D4D4D4bold
markup.raw#4FC1FF
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#FDAEB7
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#85E89D
markup.changed, punctuation.definition.changed#FFAB70
markup.ignored, markup.untracked#2f363d
meta.diff.range#B392F0bold
meta.diff.header#79B8FF
meta.separator#79B8FFbold
meta.output#79B8FF
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#d1d5da
brackethighlighter.unmatched#F97583
constant.other.reference.link, string.other.link#CE9178underline
akil_color_theme by Akilan - VS Code Theme