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#1a1b1d
  • activityBar.foreground#70949e
  • activityBar.inactiveForeground#4f4f4f
  • activityBarBadge.background#70949ebf
  • activityBarBadge.foreground#ffffff
  • badge.background#70949ebf
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#131517
  • breadcrumb.focusForeground#ededed
  • breadcrumb.foreground#6e6e6e
  • breadcrumbPicker.background#1a1b1d
  • button.background#32555f
  • button.foreground#ffffff
  • button.hoverBackground#466973
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#1a1b1d
  • debugToolBar.background#131517
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#1a1b1d
  • dropdown.border#1a1b1d
  • dropdown.foreground#ededed
  • editor.background#131517
  • editor.findMatchBackground#50505040
  • editor.findMatchHighlightBackground#50505040
  • editor.findRangeHighlightBackground#50505040
  • editor.focusedStackFrameHighlightBackground#50505040
  • editor.foreground#dbdbdb
  • editor.hoverHighlightBackground#50505040
  • editor.inactiveSelectionBackground#50505020
  • editor.lineHighlightBackground#1a1b1d
  • editor.lineHighlightBorder#1a1b1d
  • editor.rangeHighlightBackground#50505040
  • editor.selectionBackground#50505040
  • editor.selectionHighlightBackground#50505020
  • editor.snippetFinalTabstopHighlightBorder#50505040
  • editor.snippetTabstopHighlightBackground#50505040
  • editor.stackFrameHighlightBackground#50505040
  • editor.wordHighlightBackground#50505020
  • editor.wordHighlightStrongBackground#50505020
  • editorActiveLineNumber.foreground#6e6e6e
  • editorBracketMatch.background#50505020
  • editorBracketMatch.border#7c90a6
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#dddddd
  • editorError.foreground#974b53
  • editorGroup.border#1a1b1d
  • editorGroup.dropBackground#131517
  • editorGroupHeader.noTabsBackground#131517
  • editorGroupHeader.tabsBackground#1a1b1d
  • editorGutter.addedBackground#000900
  • editorGutter.background#131517
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#2f0000
  • editorGutter.modifiedBackground#000000
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#1a1b1d
  • editorHoverWidget.border#1a1b1d
  • editorIndentGuide.activeBackground#2b2b2d
  • editorIndentGuide.background#222224
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#6e6e6e
  • editorLineNumber.foreground#4f4f4f
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#974b53
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#213213
  • editorOverviewRuler.border#1a1b1d
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#58111f
  • editorOverviewRuler.errorForeground#974b53bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#2d2d2d
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#131517
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#1a1b1d
  • editorSuggestWidget.border#1a1b1d
  • editorSuggestWidget.foreground#ededed
  • editorSuggestWidget.highlightForeground#ededed
  • editorSuggestWidget.selectedBackground#222224
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1a1b1d
  • editorWidget.border#1a1b1d
  • errorForeground#974b53
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#505050
  • foreground#dbdbdb
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#6e6e6e
  • gitDecoration.modifiedResourceForeground#a28a59
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#80946f
  • input.background#131517
  • input.foreground#ededed
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#70949e
  • inputValidation.errorBackground#2f0000
  • inputValidation.errorBorder#360000
  • inputValidation.infoBackground#131517
  • inputValidation.infoBorder#363637
  • inputValidation.warningBackground#1b0000
  • inputValidation.warningBorder#230c00
  • list.activeSelectionBackground#222224
  • list.activeSelectionForeground#ededed
  • list.dropBackground#131517
  • list.errorForeground#974b53
  • list.focusBackground#222224
  • list.highlightForeground#ededed
  • list.hoverBackground#222224
  • list.inactiveFocusBackground#222224
  • list.inactiveSelectionBackground#222224
  • list.inactiveSelectionForeground#ededed
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#1a1b1d
  • menu.foreground#b5b5b5
  • menu.selectionBackground#222224
  • menu.selectionForeground#ededed
  • menu.separatorBackground#363637
  • menubar.selectionBackground#222224
  • menubar.selectionForeground#ededed
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#1a1b1d
  • notificationLink.foreground#70949e
  • notifications.background#1a1b1d
  • notifications.border#1a1b1d
  • panel.background#1a1b1d
  • panel.border#1a1b1d
  • panelTitle.activeBorder#70949e
  • panelTitle.activeForeground#ededed
  • panelTitle.inactiveForeground#a2a2a2
  • peekView.border#1a1b1d
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#1a1b1d
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#131517
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#1a1b1d
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000005
  • scrollbarSlider.activeBackground#4f4f4fbf
  • scrollbarSlider.background#363637bf
  • scrollbarSlider.hoverBackground#424242bf
  • settings.checkboxBackground#131517
  • settings.checkboxBorder#4f4f4f
  • settings.checkboxForeground#ededed
  • settings.dropdownBackground#1a1b1d
  • settings.dropdownBorder#1a1b1d
  • settings.dropdownForeground#ededed
  • settings.dropdownListBorder#2b2b2d
  • settings.headerForeground#e9e9e9
  • settings.modifiedItemIndicator#505050
  • settings.numberInputBackground#1a1b1d
  • settings.numberInputForeground#ededed
  • settings.textInputBackground#1a1b1d
  • settings.textInputForeground#ededed
  • sideBar.background#1a1b1d
  • sideBar.dropBackground#131517
  • sideBar.foreground#a2a2a2
  • sideBarSectionHeader.background#1a1b1d
  • sideBarSectionHeader.foreground#4f4f4f
  • sideBarTitle.foreground#4f4f4f
  • statusBar.background#222224
  • statusBar.debuggingBackground#640000
  • statusBar.debuggingForeground#a2a2a2
  • statusBar.foreground#a2a2a2
  • statusBar.noFolderBackground#250039
  • statusBar.noFolderForeground#a2a2a2
  • tab.activeBackground#1a1b1d
  • tab.activeBorder#70949e
  • tab.activeForeground#ededed
  • tab.activeModifiedBorder#70949ebf
  • tab.border#1a1b1d
  • tab.inactiveBackground#1a1b1d
  • tab.inactiveForeground#a2a2a2
  • tab.inactiveModifiedBorder#70949ebf
  • tab.unfocusedActiveForeground#ededed
  • tab.unfocusedActiveModifiedBorder#70949e80
  • tab.unfocusedInactiveForeground#a2a2a2
  • tab.unfocusedInactiveModifiedBorder#70949e80
  • terminal.ansiBlack#3f4248
  • terminal.ansiBlue#8ba0b6
  • terminal.ansiBrightBlack#515660
  • terminal.ansiBrightBlue#8ba0b6
  • terminal.ansiBrightCyan#9fb9b8
  • terminal.ansiBrightGreen#a8bc96
  • terminal.ansiBrightMagenta#b79cb2
  • terminal.ansiBrightRed#b6676d
  • terminal.ansiBrightWhite#efefef
  • terminal.ansiBrightYellow#e7cc98
  • terminal.ansiCyan#98bdc8
  • terminal.ansiGreen#a8bc96
  • terminal.ansiMagenta#b79cb2
  • terminal.ansiRed#b6676d
  • terminal.ansiWhite#e9e9e9
  • terminal.ansiYellow#e7cc98
  • terminal.background#131517
  • terminal.border#1a1b1d
  • terminal.foreground#dbdbdb
  • terminal.selectionBackground#50505040
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#1a1b1d
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#70949e
  • textLink.foreground#70949e
  • textPreformat.foreground#b79cb2
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#1a1b1d
  • titleBar.activeForeground#a2a2a2
  • titleBar.inactiveBackground#1a1b1d
  • titleBar.inactiveForeground#4f4f4f
  • widget.shadow#04060a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#DBDBDB
emphasisitalic
strongbold
header#000080
comment#515660
constant.language#8BA0B6
constant.numeric#AC92A7
constant.regexp#E7CC98
entity.name.tag#8BA0B6
entity.name.tag.css#9FB9B8
entity.other.attribute-name#9FB9B8
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#9FB9B8
invalid#F44747
markup.underlineunderline
markup.bold#8BA0B6bold
markup.heading#8BA0B6bold
markup.italicitalic
markup.inserted#AC92A7
markup.deleted#A8BC96
markup.changed#8BA0B6
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#A8BC96
punctuation.definition.tag#EFEFEF
meta.preprocessor#8BA0B6
meta.preprocessor.string#A8BC96
meta.preprocessor.numeric#AC92A7
meta.structure.dictionary.key.python#DBDBDB
meta.diff.header#8BA0B6
storage#8BA0B6
storage.type#8BA0B6
storage.modifier#8BA0B6
string#A8BC96
string.tag#A8BC96
string.value#A8BC96
string.regexp#A8BC96
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#8BA0B6
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#DBDBDB
keyword#8BA0B6
keyword.control#8BA0B6
keyword.operator#8BA0B6
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#8BA0B6
keyword.other.unit#AC92A7
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#8BA0B6
support.function.git-rebase#98BDC8
constant.sha.git-rebase#AC92A7
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#D4D4D4
variable.language#8BA0B6
entity.name.function, support.function, support.constant.handlebars#98BDC8
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#9FB9B8
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#9FB9B8
keyword.control#8BA0B6
variable, meta.definition.variable.name, support.variable, entity.name.variable#DBDBDB
meta.object-literal.key#DBDBDB
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#A8BC96
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#EFEFEF
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#E7CC98
keyword.operator.or.regexp, keyword.control.anchor.regexp#8BA0B6
keyword.operator.quantifier.regexp#AC92A7
constant.character#8BA0B6
constant.character.escape#EFEFEF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
string.quoted.double.html#A8BC96
string.template#A8BC96
storage.type.function#8BA0B6
support.class.component.js#8BA0B6
variable.parameter#DDDDDD
variable.other.property#DBDBDB
support.function, support.constant.handlebars#98BDC8
support.type, support.class, support.constant.math#9FB9B8
support.type.vendored.property-name, support.type.property-name#DBDBDB
support.function#98BDC8
variable.other.constant#DBDBDB
meta.brace.round.js, meta.brace.square.js, punctuation#EFEFEF
support.type.property-name.json#DBDBDB
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#8BA0B6
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#8BA0B6
entity.name.type.class, entity.name.type.module#9FB9B8
punctuation.definition.comment.python, punctuation.definition.comment.js, punctuation.definition.comment.cpp, punctuation.definition.comment.begin.css, punctuation.definition.comment.end.css, punctuation.definition.list.begin.markdown#515660
markup.headingnormal
comment, variable.language, variable.parameter, entity.other.attribute-name, keyword, markup.underline.link, storage.modifier, storage.type, string.url, variable.language.super, variable.language.this
keyword.operator, keyword.other.type, storage.modifier.import, storage.modifier.package, storage.type.built-in, storage.type.function.arrow, storage.type.generic, storage.type.java, storage.type.primitive
Best Themes Redefined 🚀 by Lakshit Somani - VS Code Theme