Skip to main content
CodingTheme

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#000000
  • activityBar.foreground#018001
  • activityBar.inactiveForeground#3769FE
  • activityBarBadge.background#007acc
  • editor.background#000000
  • editor.foreground#bdbdbd
  • editor.inactiveSelectionBackground#018001
  • editor.lineHighlightBorder#00000000
  • editor.selectionHighlightBackground#ffffff28
  • editorBracketMatch.background#ffffff28
  • editorBracketMatch.border#00000000
  • editorCursor.foreground#3769fe
  • editorGroupHeader.tabsBackground#ffffff00
  • editorIndentGuide.activeBackground#ffffff28
  • editorIndentGuide.background#ffffff00
  • editorLineNumber.activeForeground#bdbdbd
  • editorLineNumber.foreground#ffffff44
  • editorRuler.foreground#ffffff28
  • editorSuggestWidget.highlightForeground#018001
  • editorWidget.background#000000
  • editorWidget.border#333333
  • focusBorder#ffffff33
  • input.background#ffffff11
  • input.border#00000000
  • input.foreground#bdbdbd
  • input.placeholderForeground#ffffff66
  • inputOption.activeBackground#ffffff33
  • list.dropBackground#383b3d
  • list.focusForeground#bdbdbd
  • list.focusOutline#018001
  • list.highlightForeground#018001
  • list.inactiveSelectionBackground#ffffff22
  • list.inactiveSelectionForeground#bdbdbd
  • listFilterWidget.noMatchesOutline#3769fe
  • listFilterWidget.outline#018001
  • menu.background#000000
  • menu.foreground#cccccc
  • menu.separatorBackground#3769fe
  • notebookStatusRunningIcon.foreground#bdbdbd
  • notifications.foreground#bdbdbd
  • panel.dropBorder#bdbdbd
  • panelTitle.activeForeground#018001
  • panelTitle.inactiveForeground#bdbdbd
  • peekViewEditor.matchHighlightBorder#018001
  • peekViewResult.fileForeground#bdbdbd
  • peekViewResult.lineForeground#bdbdbd
  • peekViewResult.selectionForeground#bdbdbd
  • peekViewTitleDescription.foreground#bdbdbd99
  • peekViewTitleLabel.foreground#bdbdbd
  • pickerGroup.border#bdbdbd
  • pickerGroup.foreground#bdbdbd
  • quickInput.foreground#bdbdbd
  • scrollbarSlider.activeBackground#3769fe
  • searchEditor.findMatchBorder#018001
  • selection.background#018001
  • settings.checkboxForeground#bdbdbd
  • settings.dropdownForeground#bdbdbd
  • settings.headerForeground#bdbdbd
  • settings.numberInputBackground#292929
  • settings.numberInputForeground#bdbdbd
  • settings.textInputBackground#292929
  • settings.textInputForeground#bdbdbd
  • sideBar.background#000000
  • sideBar.foreground#ffffff88
  • sideBarTitle.foreground#018001
  • statusBar.background#000000
  • statusBar.debuggingForeground#bdbdbd
  • statusBar.foreground#018001
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#bdbdbd
  • statusBarItem.activeBackground#bdbdbd2e
  • statusBarItem.errorForeground#bdbdbd
  • statusBarItem.hoverBackground#bdbdbd1f
  • statusBarItem.prominentForeground#bdbdbd
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#bdbdbd
  • symbolIcon.arrayForeground#bdbdbd
  • symbolIcon.booleanForeground#bdbdbd
  • symbolIcon.colorForeground#bdbdbd
  • symbolIcon.constantForeground#bdbdbd
  • symbolIcon.fileForeground#bdbdbd
  • symbolIcon.folderForeground#bdbdbd
  • symbolIcon.keyForeground#bdbdbd
  • symbolIcon.keywordForeground#bdbdbd
  • symbolIcon.moduleForeground#bdbdbd
  • symbolIcon.namespaceForeground#bdbdbd
  • symbolIcon.nullForeground#bdbdbd
  • symbolIcon.numberForeground#bdbdbd
  • symbolIcon.objectForeground#bdbdbd
  • symbolIcon.operatorForeground#bdbdbd
  • symbolIcon.packageForeground#bdbdbd
  • symbolIcon.propertyForeground#bdbdbd
  • symbolIcon.referenceForeground#bdbdbd
  • symbolIcon.snippetForeground#bdbdbd
  • symbolIcon.stringForeground#bdbdbd
  • symbolIcon.structForeground#bdbdbd
  • symbolIcon.textForeground#bdbdbd
  • symbolIcon.typeParameterForeground#bdbdbd
  • symbolIcon.unitForeground#bdbdbd
  • tab.activeBackground#ffffff22
  • tab.activeForeground#018001
  • tab.inactiveBackground#00000000
  • tab.inactiveForeground#bdbdbd
  • tab.inactiveModifiedBorder#bdbdbd
  • tab.unfocusedActiveForeground#bdbdbd
  • tab.unfocusedActiveModifiedBorder#bdbdbd
  • tab.unfocusedInactiveForeground#bdbdbd
  • tab.unfocusedInactiveModifiedBorder#bdbdbd
  • terminal.ansiBrightWhite#bdbdbd
  • terminal.foreground#bdbdbd
  • terminal.selectionBackground#3769fe
  • testing.message.error.decorationForeground#bdbdbd
  • testing.message.hint.decorationForeground#bdbdbd
  • testing.message.hint.lineBackground#bdbdbd
  • testing.message.info.decorationForeground#bdbdbd
  • testing.message.warning.decorationForeground#bdbdbd
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#bdbdbd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#bdbdbd
emphasisitalic
strongbold
meta.diff.header#000080
comment#bdbdbd8f
constant.language#3769fe
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#23a341
constant.regexp#8543b8
constant.character#3769fe
entity.name.tag#3769fe
entity.name.tag.css#D7BA7D
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.scss#D7BA7D
invalid#fd0000italic
markup.underlineunderline
markup.boldbold
markup.heading#9CDCFEbold
markup.italicitalic
markup.inserted#23a341
markup.deleted#CE9178
markup.changed#3769fe
punctuation.definition.tag#bdbdbdd5
meta.preprocessor#3769fe
meta.preprocessor.string#bdbdbd
meta.preprocessor.numeric#23a341
meta.structure.dictionary.key.python#9CDCFE
storage#3769fe
storage.type#3769fe
storage.modifier#3769fe
string#CE9178
string.tag#CE9178
string.value#CE9178
string.regexp#CE9178c5
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#3769fe
meta.template.expression#bdbdbd
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#bdbdbd
keyword#3769fe
keyword.control#3769fe
keyword.operator#bdbdbd
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#3769fe
keyword.other.unit#23a341
support.function.git-rebase#bdbdbd
constant.sha.git-rebase#23a341
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#bdbdbd
variable.language.this#3769fe
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member#DCDCAA
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.name.scope-resolution, entity.name.class, 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#018001
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#018001
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, keyword.other.operator#8543b8
variable, meta.definition.variable.name, support.variable#9CDCFE
meta.object-literal.key#9CDCFE
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
meta.resultLinePrefix.contextLinePrefix.search#CBEDCB
token.info-token#6796E6
token.warn-token#008000
token.error-token#FF0000
token.debug-token#B267E6

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

VisionTech ThemesPack by Vincent Vision - VS Code Theme