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#171717
  • activityBar.border#00000060
  • activityBar.foreground#eeffff
  • activityBarBadge.background#c48469
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#4a4a4a
  • breadcrumb.activeSelectionForeground#cb9e80
  • breadcrumb.background#212121
  • breadcrumb.focusForeground#eeffff
  • breadcrumb.foreground#848484
  • breadcrumbPicker.background#1a1a1a
  • button.background#61616150
  • debugToolBar.background#212121
  • diffEditor.insertedTextBackground#abe88d15
  • diffEditor.removedTextBackground#ff537020
  • dropdown.background#212121
  • dropdown.border#ffffff10
  • editor.background#202020
  • editor.findMatchHighlightBackground#a6a04837
  • editor.findMatchHighlightBorder#dcce2c
  • editor.foreground#eeffff
  • editor.lineHighlightBackground#00000050
  • editor.selectionBackground#ffa05223
  • editor.selectionHighlightBackground#00c8ff25
  • editorBracketHighlight.foreground1#87c469
  • editorBracketHighlight.foreground2#d1d1d1
  • editorBracketHighlight.foreground3#e1da8f
  • editorBracketHighlight.foreground4#979797
  • editorBracketHighlight.foreground5#ce8d64
  • editorBracketHighlight.unexpectedBracket.foreground#ffffff
  • editorBracketMatch.background#212121
  • editorBracketMatch.border#ffcc0050
  • editorCursor.foreground#ffcc00
  • editorError.foreground#ff537070
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#212121
  • editorGutter.addedBackground#8ee79460
  • editorGutter.deletedBackground#ff537060
  • editorGutter.modifiedBackground#82aaff60
  • editorHoverWidget.background#212121
  • editorHoverWidget.border#ffffff10
  • editorIndentGuide.activeBackground1#424242
  • editorIndentGuide.background1#42424270
  • editorInlayHint.background#19191900
  • editorInlayHint.foreground#947669
  • editorLineNumber.activeForeground#848484
  • editorLineNumber.foreground#424242
  • editorLink.activeForeground#eeffff
  • editorMarkerNavigation.background#eeffff05
  • editorOverviewRuler.border#212121
  • editorRuler.foreground#424242
  • editorSuggestWidget.background#212121
  • editorSuggestWidget.border#ffffff10
  • editorSuggestWidget.foreground#eeffff
  • editorSuggestWidget.highlightForeground#cbb180
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#e8b18d70
  • editorWhitespace.foreground#eeffff40
  • editorWidget.background#1a1a1a
  • editorWidget.border#ff0000
  • editorWidget.resizeBorder#cbb380
  • extensionButton.prominentBackground#292241
  • extensionButton.prominentForeground#e2b675
  • extensionButton.prominentHoverBackground#e8b38d
  • focusBorder#ffffff00
  • gitDecoration.conflictingResourceForeground#ff906b90
  • gitDecoration.deletedResourceForeground#ff537090
  • gitDecoration.ignoredResourceForeground#84848490
  • gitDecoration.modifiedResourceForeground#82aaff90
  • gitDecoration.untrackedResourceForeground#c3e88d90
  • input.background#2b2b2b
  • input.border#ffffff10
  • input.foreground#eeffff
  • input.placeholderForeground#eeffff60
  • inputValidation.errorBorder#ff537050
  • inputValidation.infoBorder#82aaff50
  • inputValidation.warningBorder#ffcb6b50
  • list.activeSelectionBackground#1a1a1a
  • list.activeSelectionForeground#cbac80
  • list.focusBackground#eeffff20
  • list.focusForeground#eeffff
  • list.highlightForeground#cba880
  • list.hoverBackground#1a1a1a
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#c49869
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#212121
  • menu.foreground#eeffff
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#cba680
  • menu.separatorBackground#eeffff
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#cb9f80
  • minimap.findMatchHighlight#cbb5805e
  • minimap.selectionHighlight#cbba805e
  • notificationLink.foreground#cba180
  • notifications.background#212121
  • notifications.foreground#eeffff
  • panel.background#1a1a1a
  • panel.border#00000060
  • panelTitle.activeBorder#cba680
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#eeffff
  • peekView.border#00000030
  • 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#cb9d80
  • progressBar.background#cba480
  • scrollbar.shadow#21212100
  • scrollbarSlider.activeBackground#80c1cb
  • scrollbarSlider.background#eeffff20
  • scrollbarSlider.hoverBackground#eeffff10
  • selection.background#eeffff
  • settings.checkboxBackground#1a1a1a
  • settings.checkboxForeground#eeffff
  • settings.dropdownBackground#1a1a1a
  • settings.dropdownForeground#eeffff
  • settings.headerForeground#cba180
  • settings.modifiedItemIndicator#808dcb
  • settings.numberInputBackground#1a1a1a
  • settings.numberInputForeground#eeffff
  • settings.textInputBackground#1a1a1a
  • settings.textInputForeground#eeffff
  • sideBar.background#1a1a1a
  • sideBar.border#00000060
  • sideBar.foreground#686868
  • sideBarSectionHeader.background#1a1a1a
  • sideBarSectionHeader.border#00000060
  • sideBarTitle.foreground#eeffff
  • statusBar.background#1a1a1a
  • statusBar.border#00000060
  • statusBar.debuggingBackground#db6363
  • statusBar.debuggingForeground#531d1d
  • statusBar.foreground#616161
  • statusBar.noFolderBackground#212121
  • statusBarItem.hoverBackground#4a4a4a20
  • statusBarItem.remoteBackground#333333
  • statusBarItem.remoteForeground#7e7e7e
  • tab.activeBorder#cb9480
  • tab.activeForeground#cb9480
  • tab.activeModifiedBorder#848484
  • tab.border#212121
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#848484
  • tab.unfocusedActiveBorder#4a4a4a
  • tab.unfocusedActiveForeground#eeffff
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#4a4a4a
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#89ddff
  • terminal.ansiBrightGreen#61b379
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#db6363
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f0ce5e
  • terminal.ansiCyan#89ddff
  • terminal.ansiGreen#75e2c7
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#ff5370
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffcb6b
  • terminal.foreground#888888
  • textLink.activeForeground#c4b369
  • textLink.foreground#c4bd69
  • titleBar.activeBackground#1a1a1a
  • titleBar.activeForeground#eeffff
  • titleBar.border#00000060
  • titleBar.inactiveBackground#1a1a1a
  • titleBar.inactiveForeground#848484
  • widget.shadow#0000005e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#D4D4D4
emphasisitalic
strongbold
header#009264
comment#559974
constant.language#db6963
constant.numeric#7ccdd4
constant.regexp#646695
entity.name.tag#dbcea0
entity.name.tag.css#dbcea0
entity.other.attribute-name#dbcea0
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#dbcea0
invalid#F44747
markup.underlineunderline
markup.bold#56d68bbold
markup.heading#56d68bbold
markup.italicitalic
markup.inserted#B5CEA8
markup.deleted#ce7a78
markup.changed#56d68b
punctuation.definition.quote.begin.markdown#558d99
punctuation.definition.list.begin.markdown#67e69a
markup.inline.raw#CE9178
punctuation.definition.tag#808080
meta.preprocessor#56d68b
meta.preprocessor.string#dbcea0
meta.preprocessor.numeric#7cd4c2
meta.structure.dictionary.key.python#9cfec2
meta.diff.header#56d68b
storage#56d68b
storage.type#56d68b
storage.modifier#56d68b
string#dbcea0
string.tag#dbcea0
string.value#dbcea0
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#56d68b
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#9cfeb1
keyword#56d68b
keyword.control#56d68b
keyword.operator#D4D4D4
keyword.operator.class, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#66dc9fitalic
keyword.other.unit#9CDCFE
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#56d68b
support.function.git-rebase#9CDCFE
constant.sha.git-rebase#B5CEA8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#D4D4D4
variable.language#e48b65
entity.name.function, support.function, support.constant.handlebars#dcb483
support.class, support.type#cbe793italic
meta.return-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#cbe793underline
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json#86c5b5
entity.other.inherited-class#86c5b5italic underline
keyword.control#86c5b5
variable, meta.definition.variable.name, support.variable, entity.name.variable#db9685
meta.object-literal.key#9cfec5
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
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#CE9178
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#D16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAA
keyword.operator.quantifier.regexp#D7BA7D
constant.character#5cffa0
constant.character.escape#D7BA7D
comment#376352
punctuation.definition.comment#376352
string#dbcea0
meta.embedded.assembly#dbcea0
keyword - keyword.operator#db9d63
keyword.control#db9d63
storage#db9d63
storage.type#db9d63italic
entity.name.function#6ACCB4
support.function#6ACCB4
entity.name.tag.html, variable.language.this.js, entity.name.tag.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.jsx, entity.name.tag.js, keyword.other.python, entity.name.tag.css, variable.other.readwrite.alias.js#DDDDDD
entity.name.tag.block.any.html, entity.name.tag.template.html, entity.name.tag.script.html, entity.name.tag.style.html, entity.name.tag.jsx, constant.language.json.comments, entity.other.attribute-name.class.css, entity.name.section.markdown, markup.heading.markdown, meta.function-call.python#6ACCB4
entity.other.attribute-name.html, entity.name.tag.html, entity.other.attribute-name.jsx, entity.name.tag.localname.xml, support.type.property-name.css, support.type.vendored.property-name.css, meta.object-literal.key.ts, entity.other.attribute-name.css, meta.object-literal.key.js, entity.other.attribute-name.js.jsx, variable.other.object.js, variable.other.object.property.js#9DCCC0italic
entity.other.attribute-name.id.css#FFA977
support.type.property-name.media.css, support.type.property-name.json.comments, support.type.property-name.json, variable.other.property.js, variable.parameter.js, variable.parameter.graphql, variable.other.readwrite.js, variable.graphql#E6E6E6italic
variable.parameteritalic
punctuation, entity.other.django.delimiter.tag, meta.scope.django.variable, entity.name.tag.yaml, variable.language.python#A7A7A7
keyword.type.graphql, variable.css, keyword.control, keyword.operator.module.js, keyword.control.import.from.python, constant.language.boolean.false.js, keyword.control.default.js, keyword.other.special-method.dockerfile, keyword.other.definition.ini#db9d63
entity.name.type.class.python, entity.other.inherited-class.python#87d3d4italic underline
markup.inline.raw.string.markdown, markup.bold.markdown, entity.other.attribute-name.pseudo-element.css, support.constant.property-value.css, constant.other.color.rgb-value.hex.css, support.constant.font-name.css, support.constant.color.w3c-standard-color-name.css#ffdb77
meta.function-call.python, meta.paragraph.markdown, punctuation.definition.list.begin.markdown, text.html.vue-html#C9C9C9
variable.function.js, entity.name.function, keyword.operator.logical.python, meta.function-call.generic.python, constant.language.python, constant.numeric.dec.python, variable.language.special.self.python, variable.other.constant.js#6ACCB4
support.function.console.js, variable.scss, constant.language.json#FFFFFF
keyword.other.important.scss, keyword.other.important.css, constant.language.null.js, keyword.control.django, keyword.operator.new.js, keyword.operation.graphql, keyword.on.graphql#db9d63
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#67e676
Autumn Night by RuslanRystsov - VS Code Theme