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#1a1a1a
  • activityBar.border#ffffff1a
  • activityBar.foreground#eeeeee
  • activityBarBadge.background#84FFFF
  • activityBarBadge.foreground#0c0c0c
  • badge.background#00f7ff36
  • badge.foreground#c5c5c5
  • breadcrumb.activeSelectionForeground#84FFFF
  • breadcrumb.background#212121
  • breadcrumb.focusForeground#eeeeee
  • breadcrumb.foreground#848484
  • breadcrumbPicker.background#1a1a1a
  • button.background#61616150
  • debugToolBar.background#212121
  • diffEditor.insertedTextBackground#C3E88D15
  • diffEditor.removedTextBackground#FF537020
  • dropdown.background#212121
  • dropdown.border#FFFFFF10
  • editor.background#14151a
  • editor.findMatchBackground#edc9d800
  • editor.findMatchHighlightBackground#edc9d831
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#00f7ff3b
  • editor.lineHighlightBackground#3131315e
  • editor.lineHighlightBorder#aaaaaa31
  • editor.selectionBackground#00f7ff55
  • editor.selectionForeground#ff0000
  • editor.selectionHighlightBackground#00f7ff1e
  • editor.selectionHighlightBorder#aaaaaa85
  • editorBracketMatch.background#6e6e6e59
  • editorBracketMatch.border#FFCC0050
  • editorCursor.foreground#c9bf98
  • editorError.foreground#ee3c5a91
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#212121
  • editorGutter.addedBackground#C3E88D60
  • editorGutter.deletedBackground#FF537060
  • editorGutter.modifiedBackground#82AAFF60
  • editorHoverWidget.background#212121
  • editorHoverWidget.border#ffffff4b
  • editorIndentGuide.activeBackground#424242
  • editorIndentGuide.background#42424270
  • editorInfo.foreground#82fbff70
  • editorLineNumber.activeForeground#b3b3b3
  • editorLineNumber.foreground#666666
  • editorLink.activeForeground#eeeeee
  • editorMarkerNavigation.background#EEFFFF05
  • editorOverviewRuler.border#212121
  • editorOverviewRuler.errorForeground#ee3c5a49
  • editorOverviewRuler.infoForeground#82fbff2f
  • editorOverviewRuler.warningForeground#ffcb6b2f
  • editorRuler.foreground#424242
  • editorSuggestWidget.background#212121
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#eeeeee
  • editorSuggestWidget.highlightForeground#84FFFF
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#ffcb6b70
  • editorWhitespace.foreground#EEFFFF40
  • editorWidget.background#1a1a1a
  • editorWidget.border#84FFFF
  • editorWidget.resizeBorder#84FFFF
  • extensionButton.prominentBackground#C3E88D90
  • extensionButton.prominentHoverBackground#C3E88D
  • focusBorder#bbdaff81
  • gitDecoration.conflictingResourceForeground#ff96339f
  • gitDecoration.deletedResourceForeground#FF53709f
  • gitDecoration.ignoredResourceForeground#8484849f
  • gitDecoration.modifiedResourceForeground#84abff9f
  • gitDecoration.untrackedResourceForeground#C3E88D9f
  • input.background#2B2B2B
  • input.border#FFFFFF10
  • input.foreground#eeeeee
  • input.placeholderForeground#A6A6A6
  • inputValidation.errorBorder#FF537050
  • inputValidation.infoBorder#82AAFF50
  • inputValidation.warningBorder#FFCB6B50
  • list.activeSelectionBackground#adadad20
  • list.activeSelectionForeground#84ffff
  • list.dropBackground#383B3D
  • list.errorForeground#e94c4ca9
  • list.focusBackground#EEFFFF20
  • list.focusForeground#eeeeee
  • list.highlightForeground#84ffff
  • list.hoverBackground#1a1a1a
  • list.hoverForeground#FFFFFF
  • list.inactiveFocusBackground#adadad08
  • list.inactiveSelectionBackground#adadad08
  • list.inactiveSelectionForeground#00c0c0
  • list.invalidItemForeground#e94ca8a9
  • list.warningForeground#6df7cd9f
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#252526
  • menu.foreground#CCCCCC
  • menu.selectionBackground#00000050
  • menu.selectionBorder#e2e2e277
  • menu.selectionForeground#84FFFF
  • menu.separatorBackground#eeeeee
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#dadada7a
  • menubar.selectionForeground#84FFFF
  • notificationLink.foreground#84FFFF
  • notifications.background#212121
  • notifications.foreground#eeeeee
  • panel.background#1E1E1E
  • panel.border#31313150
  • panel.dropBackground#eeeeee
  • panelTitle.activeBorder#84FFFF
  • panelTitle.activeForeground#eeeeee
  • panelTitle.inactiveForeground#dddddd
  • peekView.border#35353530
  • peekViewEditor.background#EEFFFF05
  • peekViewEditor.matchHighlightBackground#61616150
  • peekViewEditorGutter.background#EEFFFF05
  • peekViewResult.background#EEFFFF05
  • peekViewResult.matchHighlightBackground#61616150
  • peekViewResult.selectionBackground#84848470
  • peekViewTitle.background#EEFFFF05
  • peekViewTitleDescription.foreground#EEFFFF60
  • pickerGroup.foreground#80CBC4
  • progressBar.background#84ffffd2
  • scrollbar.shadow#21212100
  • scrollbarSlider.activeBackground#84FFFF50
  • scrollbarSlider.background#a7a7a781
  • scrollbarSlider.hoverBackground#9b9b9bb4
  • settings.checkboxBackground#1a1a1a
  • settings.checkboxForeground#eeeeee
  • settings.dropdownBackground#1a1a1a
  • settings.dropdownForeground#eeeeee
  • settings.headerForeground#84FFFF
  • settings.modifiedItemIndicator#84FFFF
  • settings.numberInputBackground#292929
  • settings.numberInputForeground#eeeeee
  • settings.textInputBackground#292929
  • settings.textInputForeground#eeeeee
  • sideBar.background#1a1a1a
  • sideBar.border#FFFFFF10
  • sideBar.foreground#5a7975
  • sideBarSectionHeader.background#292929
  • sideBarSectionHeader.border#00000060
  • sideBarTitle.foreground#BBBBBB
  • statusBar.background#1a1a1a
  • statusBar.border#ffffff2d
  • statusBar.debuggingBackground#7485e6
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#616161
  • statusBar.noFolderBackground#212121
  • statusBarItem.hoverBackground#4A4A4A20
  • tab.activeBorder#84FFFF
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#848484
  • tab.border#75757515
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#848484
  • tab.unfocusedActiveBorder#4A4A4A
  • tab.unfocusedActiveForeground#acacac
  • textLink.activeForeground#eeeeee
  • textLink.foreground#84FFFF
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function, variable.function, support.function, meta.function-call, keyword.other.special-method, support.function, support.constant.handlebars#DCDCAA
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#4EC9B0
variable.parameter.function.language.special, variable.parameter#e4e4e4
meta.type.cast.expr, meta.type.new.expr, entity.other.inherited-class#4EC9B0
keyword.control#6765e9
meta.object-literal.key#9CDCFE
variable, meta.definition.variable.name, support.variable, entity.name.variable#97d3f3
meta.embedded, source.groovy.embedded#D4D4D4
invalid.deprecated#795a8d
emphasisitalic
strongbold
invalid, invalid.illegal#f44747
header#5050cc
entity.name.tag, meta.tag.sgml, entity.name.tag.css, punctuation.definition.tag, markup.deleted.git_gutter#526de2
entity.other.attribute-name#9cdcfe
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#d7ba7d
meta.preprocessor#569cd6
meta.preprocessor.string#be9b8d
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#9cdcfe
meta.diff.header#569cd6
storage#569cd6
storage.type#569cd6
storage.modifier#569cd6
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#9cdcfe
comment, Comment, punctuation.definition.comment, string.quoted.docstring#6A9955
string, string.tag, string.value#daa793
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#569cd6
constant.language#569cd6
constant.sha.git-rebase#b5cea8
constant.numeric#b5cea8
constant.character#569cd6
constant.character.escape#d7ba7d
support.constant.math, support.constant.dom, support.constant.json#2d8cda
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#CE9178
constant.other.symbol, constant.other.key, constant.other.php#3b7dbb
constant.other.color#fafafa
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, support.other.parenthesis.regexp, keyword.operator.negation.regexp, string.regexp, constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp, constant.regexp#d1ab7a
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
meta.template.expression#d4d4d4
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#e4e4e4
source.json meta.structure.dictionary.json support.type.property-name.json#4582df
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#45a1df
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#45dfd2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#45dfa4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#45df66
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#76df45
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#60ff95
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#456edf
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5e5be7
keyword#569cd6
keyword.control#5683d6
keyword.operator#dddddd
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#5dacec
keyword.other.unit#b5cea8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569cd6
support.function.git-rebase#9cdcfe
variable.language#569cd6
keyword.operator.or.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp#DCDCAA
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
text.html.markdown, punctuation.definition.list_item.markdown#D4D4D4
text.html.markdown markup.inline.raw.markdown#296fca
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#808080
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#9147ce
markup.italic#9fc8fditalic
markup.bold, markup.bold string#75b1ffbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#75b1ffbold
markup.underline#9fc8fdunderline
string.other.link.title.markdown, string.other.link.description.title.markdown, constant.other.reference.link.markdown#448f4e
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#EEFFFF90
variable.language.fenced.markdown#33546ba4
meta.separator#3537afccbold
markup.table#EEFFFF
markup.raw.block#624874
markup.inserted#95af87
markup.deleted#a7735f
markup.changed#4b86b6
punctuation.definition.quote.begin.markdown#5d864a
punctuation.definition.list.begin.markdown#4f6fa3
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#B2CCD6
entity.name.tag.css#d7ba7d
entity.other.attribute-name.class#FFCB6B
source.sass keyword.control#82AAFF
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#d7ba7d
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#acc5ff
variable.other.constant#ffc8cb
support.other.variable, string.other.link#ffc8cb
source.cpp meta.block variable.other#f07178
Insight-Default-Theme by insight - VS Code Theme