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#192330
  • badge.background#047aa6
  • breadcrumb.activeSelectionForeground#f0cc09
  • breadcrumb.background#131a24
  • breadcrumb.focusForeground#f0cc09
  • breadcrumb.foreground#c7c4bb
  • button.background#2aa19899
  • debugExceptionWidget.background#131a24
  • debugExceptionWidget.border#ab395b
  • debugToolBar.background#131a24
  • dropdown.background#131a24
  • dropdown.border#2aa19899
  • editor.background#131a24
  • editor.foreground#eeffff
  • editor.lineHighlightBackground#073642
  • editor.selectionBackground#274642
  • editor.selectionHighlightBackground#005a6faa
  • editor.wordHighlightBackground#004454aa
  • editor.wordHighlightStrongBackground#005a6faa
  • editorBracketHighlight.foreground1#cdcdcd
  • editorBracketHighlight.foreground2#b58900
  • editorBracketHighlight.foreground3#d33682
  • editorCursor.foreground#eeffff
  • editorGroup.border#131a24
  • editorGroup.dropBackground#2aa19844
  • editorGroupHeader.tabsBackground#192330
  • editorHoverWidget.background#131a24
  • editorHoverWidget.border#2aa19899
  • editorHoverWidget.foreground#f5f5f5
  • editorHoverWidget.highlightForeground#f0cc09
  • editorHoverWidget.statusBarBackground#192330
  • editorIndentGuide.activeBackground#4a4a4a
  • editorIndentGuide.background#4a4a4a
  • editorLineNumber.activeForeground#f0cc09
  • editorMarkerNavigationError.background#ab395b
  • editorMarkerNavigationWarning.background#5b7e7a
  • editorSuggestWidget.background#131a24
  • editorSuggestWidget.border#2aa19899
  • editorSuggestWidget.focusHighlightForeground#f0cc09
  • editorSuggestWidget.foreground#f5f5f5
  • editorSuggestWidget.selectedIconForeground#f0cc09
  • editorSuggestWidgetStatus.foreground#f00909
  • editorWhitespace.foreground#93a1a180
  • editorWidget.background#131a24
  • editorWidget.foreground#f5f5f5
  • errorForeground#ffeaea
  • focusBorder#2aa19899
  • input.background#212e3f
  • input.foreground#f5f5f5
  • input.placeholderForeground#93a1a1aa
  • inputOption.activeBorder#2aa19899
  • inputValidation.errorBackground#571b26
  • inputValidation.errorBorder#a92049
  • inputValidation.infoBackground#052730
  • inputValidation.infoBorder#363b5f
  • inputValidation.warningBackground#5d5938
  • inputValidation.warningBorder#9d8a5e
  • list.activeSelectionBackground#005a6f
  • list.dropBackground#00445488
  • list.highlightForeground#1ebcc5
  • list.hoverBackground#004454aa
  • list.inactiveSelectionBackground#00445488
  • minimap.selectionHighlight#274642
  • panel.background#131a24
  • panel.border#2b2b4a
  • panelTitle.activeBorder#f0cc09
  • peekView.border#f0cc09
  • peekViewEditor.background#131a24
  • peekViewEditor.matchHighlightBackground#7744aa40
  • peekViewEditorGutter.background#131a24
  • peekViewResult.background#131a24
  • peekViewTitle.background#131a24
  • pickerGroup.border#2aa19899
  • pickerGroup.foreground#2aa19899
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#047aa6
  • quickInputList.focusBackground#005a6f
  • scrollbar.shadow#192330
  • selection.background#2aa19899
  • sideBar.background#131a24
  • sideBar.border#192330
  • sideBarStickyScroll.shadow#ff0000
  • sideBarTitle.foreground#f5f5f5
  • statusBar.background#192330
  • statusBar.border#f0cc09
  • statusBar.debuggingBackground#131a24
  • statusBar.foreground#f5f5f5
  • statusBar.noFolderBackground#131a24
  • statusBarItem.prominentBackground#192330
  • statusBarItem.prominentHoverBackground#192330
  • statusBarItem.remoteBackground#2aa19899
  • tab.activeBackground#192330
  • tab.activeBorder#f0cc09
  • tab.activeForeground#c7c4bb
  • tab.border#192330
  • tab.hoverBorder#f0cc09
  • tab.inactiveBackground#192330
  • tab.inactiveForeground#93a1a1
  • tab.lastPinnedBorder#2aa19844
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#1460d2
  • terminal.ansiBrightBlack#002b36
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#fdf6e3
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#00bbbb
  • terminal.ansiGreen#1ec81e
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#ff0000
  • terminal.ansiWhite#f5f5f5
  • terminal.ansiYellow#f0cc09
  • terminal.background#131a24
  • terminal.foreground#f5f5f5
  • terminalCursor.foreground#f0cc09
  • titleBar.activeBackground#002c39

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#839496
comment, string.quoted.docstring#586E75italic
string#2AA198
string.regexp#DC322F
constant.numeric#D33682
variable.language, variable.other#268BD2
keyword#859900
storage#93A1A1bold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#CB4B16
entity.name.function#268BD2
punctuation.definition.variable#859900
punctuation.section.embedded.begin, punctuation.section.embedded.end#DC322F
constant.language, meta.preprocessor#B58900
support.function.construct, keyword.other.new#CB4B16
constant.character, constant.other#CB4B16
entity.other.inherited-class#6C71C4
variable.parameter
entity.name.tag#268BD2
punctuation.definition.tag#586E75
entity.other.attribute-name#93A1A1
support.function#268BD2
punctuation.separator.continuation#DC322F
support.constant, support.variable
support.type, support.class#859900
support.type.exception#CB4B16
support.other.variable
invalid#DC322F
meta.diff, meta.diff.header#268BD2italic
markup.deleted#DC322F
markup.changed#CB4B16
markup.inserted#859900
markup.quote#859900
markup.list#B58900
markup.bold, markup.italic#D33682
markup.boldbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inline.raw#2AA198
markup.heading#268BD2bold
markup.heading.setext#268BD2
punctuation#f5f5f5
comment#4A4A4Aitalic
comment punctuation.definition.comment, string.quoted.docstring#4A4A4Aitalic
string#C3E88D
constant.character.escape, text.html constant.character.entity.named#f5f5f5
constant.numeric#F78C6C
constant.language#F78C6C
meta.brace.round#f5f5f5
variable, variable.parameter, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#f5f5f5
support.variable#FFCB6Bitalic
entity.name.function#82AAFF
entity.name.function, support.function#82AAFF
meta.function entity.name.function#82AAFF
entity.name.function.call#82AAFF
variable.parameteritalic
entity.name, entity.name.type.class, support.type, support.class, meta.use#FFCB6B
variable.object.property, meta.field.declaration entity.name.function#F07178
meta.definition.method entity.name.function#F07178
support.type, constant.other.key#FFCB6B
entity.name.type, entity.other.inherited-class, entity.other#FFCB6B
support.module, support.node#F07178italic
keyword, modifier, support.type.object#89DDFF
variable.language.this, variable.language.super#F07178italic
keyword.other#F78C6C
keyword.control#89DDFFitalic
constant.keyword#89DDFFitalic
storage.type, storage.modifier, storage.control#C792EA
variable.language, variable.other#f5f5f5
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#89DDFF
meta.embedded, source.groovy.embedded, meta.template.expression#f5f5f5
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#9CDCFE
string.quoted.double.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json#CE9178
constant.numeric.json#CE9178
constant.language.json#CE9178
entity.name.tag.yaml#9CDCFE
string.quoted.single.yaml, string.quoted.double.yaml, string.unquoted.plain.out.yaml, punctuation.definition.string.begin.yaml, punctuation.definition.string.end.yaml#CE9178
constant.numeric.float.yaml, constant.numeric.integer.yaml#569CD6
constant.language.boolean.yaml#569CD6
source.yaml, meta.flow-mapping.yaml, meta.flow-mapping.yaml, string.unquoted.plain.in.yaml#f5f5f5
meta.tag, punctuation.definition.tag#89DDFF
entity.name.tag#F07178
entity.other.attribute-name#C792EA
punctuation.definition.entity.html#f5f5f5
entity.other.attribute-name.class#FFCB6B
entity.other.attribute-name.id#F78C6C
source.css entity.name.tag#FFCB6B
support.type.property-name.css#B2CCD6
variable.parameter.function.language.special.self.python#F07178italic
constant.character.format.placeholder.other.python#F78C6C
source.python meta.member.access.python#F07178
source.python meta.function-call.python, meta.function-call.arguments#82AAFF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
Paro Paro Themes by Paro-Paro - VS Code Theme