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#f6f6f6
  • activityBar.foreground#9E9E9E
  • activityBarBadge.background#616161
  • badge.background#E0E0E0
  • badge.foreground#616161
  • button.background#757575
  • button.hoverBackground#616161
  • debugIcon.breakpointCurrentStackframeForeground#006FFF
  • debugIcon.breakpointDisabledForeground#848484
  • debugIcon.breakpointForeground#FF002F
  • debugIcon.breakpointStackframeForeground#006FFF
  • debugIcon.continueForeground#A217FF
  • debugIcon.disconnectForeground#A217FF
  • debugIcon.pauseForeground#A217FF
  • debugIcon.restartForeground#006FFF
  • debugIcon.startForeground#006FFF
  • debugIcon.stepBackForeground#A217FF
  • debugIcon.stepIntoForeground#A217FF
  • debugIcon.stepOutForeground#A217FF
  • debugIcon.stepOverForeground#A217FF
  • debugIcon.stopForeground#006FFF
  • diffEditor.insertedTextBackground#b7e7a44b
  • diffEditor.removedTextBackground#e597af52
  • editor.background#ffffff
  • editor.foreground#212121
  • editor.lineHighlightBackground#F3F3F3
  • editor.lineHighlightBorder#fff
  • editorBracketMatch.background#E7F3FF
  • editorBracketMatch.border#c8e1ff
  • editorGroupHeader.tabsBackground#f6f6f6
  • editorGroupHeader.tabsBorder#fff
  • editorIndentGuide.background#EEE
  • editorLineNumber.activeForeground#222222
  • editorLineNumber.foreground#A6A6A6
  • editorSuggestWidget.background#F3F3F3
  • extensionButton.prominentBackground#000000AA
  • extensionButton.prominentHoverBackground#000000BB
  • focusBorder#D0D0D0
  • foreground#757575
  • gitDecoration.ignoredResourceForeground#AAAAAA
  • input.border#E9E9E9
  • inputOption.activeBackground#EDEDED
  • list.activeSelectionBackground#EEE
  • list.activeSelectionForeground#212121
  • list.focusBackground#ddd
  • list.focusForeground#212121
  • list.highlightForeground#212121
  • list.hoverBackground#E7E7E7
  • list.hoverForeground#0066EB
  • list.inactiveSelectionBackground#E7E7E7
  • list.inactiveSelectionForeground#0066EB
  • panel.background#F6F6F6
  • panel.border#f4f4f4
  • panelTitle.activeBorder#002D68
  • panelTitle.activeForeground#0066EB
  • panelTitle.inactiveForeground#2B2B2B
  • peekView.border#E0E0E0
  • peekViewEditor.background#f8f8f8
  • pickerGroup.foreground#000
  • progressBar.background#000
  • scrollbar.shadow#FFF
  • sideBar.background#F6F6F6
  • sideBar.border#f6f6f6
  • sideBarSectionHeader.background#EEE
  • sideBarTitle.foreground#999
  • statusBar.background#f6f6f6
  • statusBar.border#f6f6f6
  • statusBar.debuggingBackground#f6f6f6
  • statusBar.foreground#7E7E7E
  • statusBar.noFolderBackground#f6f6f6
  • statusBarItem.prominentBackground#0000001a
  • statusBarItem.remoteBackground#f6f6f600
  • statusBarItem.remoteForeground#7E7E7E
  • symbolIcon.classForeground#dd8500
  • symbolIcon.constructorForeground#A217FF
  • symbolIcon.enumeratorForeground#dd8500
  • symbolIcon.enumeratorMemberForeground#006FFF
  • symbolIcon.eventForeground#dd8500
  • symbolIcon.fieldForeground#006FFF
  • symbolIcon.functionForeground#A217FF
  • symbolIcon.interfaceForeground#006FFF
  • symbolIcon.methodForeground#A217FF
  • symbolIcon.variableForeground#006FFF
  • tab.activeBorder#FFF
  • tab.activeForeground#000
  • tab.border#E9E9E9
  • tab.hoverForeground#0066EB
  • tab.inactiveBackground#f6f8fa
  • tab.inactiveForeground#5F5F5F
  • tab.unfocusedActiveBorder#fff
  • terminal.ansiBlack#333
  • terminal.ansiBlue#e0e0e0
  • terminal.ansiBrightBlack#a1a1a1
  • terminal.ansiBrightBlue#6871ff
  • terminal.ansiBrightCyan#57d9ad
  • terminal.ansiBrightGreen#a3d900
  • terminal.ansiBrightMagenta#a37acc
  • terminal.ansiBrightRed#d6656a
  • terminal.ansiBrightWhite#7E7E7E
  • terminal.ansiBrightYellow#e7c547
  • terminal.ansiCyan#4dbf99
  • terminal.ansiGreen#77cc00
  • terminal.ansiMagenta#9966cc
  • terminal.ansiRed#FF002F
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#f29718
  • terminal.background#fff
  • textLink.activeForeground#000
  • textLink.foreground#000
  • titleBar.activeBackground#f6f6f6
  • titleBar.border#FFFFFF00
  • titleBar.inactiveBackground#f6f6f6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#24292eff
keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block#24292eff
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdownbold
markup.italic.markdownitalic
meta.link.inline.markdown#006FFFunderline
string, markup.fenced_code, markup.inline#2b5581
comment, string.quoted.docstring.multi#7A7A7B
variable#000000
variable.parameter#FF5D18
variable.other.property, meta.object-literal.key, meta.object.member, meta.objectliteral#A217FF
variable.language.this#006FFF
constant.language, variable.other.class, variable.other.constant, meta.property-name, support, string.other.link.title.markdown#A217FF
constant.numeric, constant.other.placeholder, meta.property-value, keyword.other.unit, keyword.other.template, entity.name.tag.yaml, entity.other.attribute-name, support.type.property-name.json#BF7300
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, entity.name.tag.yaml, support.function.node, support.type.property-name.json, punctuation.separator.key-value, punctuation.definition.template-expression#FF002F
variable.parameter.function#FF9800
support.function, entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure#006FFF
entity.name.tag#FF002F
string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template#009523
token.info-token#316bcd
token.warn-token#cd9731
token.error-token#cd3131
token.debug-token#800080
strong, markup.heading.markdown, markup.bold.markdown#A217FF
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments#212121
markup.underline.link, punctuation.definition.metadata.markdown#22863a
beginning.punctuation.definition.list.markdown#A217FF
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, string.other.link.title.markdown, string.other.link.description.markdown#FF002F
Carbon Symphony by Jeferson Ferreira - VS Code Theme