Skip to main content
Coding Theme

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#3e3e75
  • activityBar.border#1b1b33
  • activityBar.foreground#eeeeee
  • activityBar.inactiveForeground#8b8bcd
  • activityBarBadge.background#eeeeee
  • activityBarBadge.foreground#3e3e75
  • badge.background#eeeeee
  • badge.foreground#3e3e75
  • breadcrumb.activeSelectionForeground#eeeeee
  • breadcrumb.focusForeground#eeeeee
  • breadcrumb.foreground#8b8bcd
  • button.background#3e3e75
  • button.foreground#eeeeee
  • button.hoverBackground#8b8bcd
  • debugToolBar.background#1b1b33
  • debugToolBar.border#3e3e75
  • diffEditor.border#3e3e75
  • diffEditor.insertedLineBackground#306d3000
  • diffEditor.insertedTextBackground#306d307f
  • diffEditor.removedLineBackground#6d30307f
  • diffEditor.removedTextBackground#6d3030
  • diffEditorGutter.insertedLineBackground#306d30
  • diffEditorGutter.removedLineBackground#6d3030
  • editor.background#1b1b33
  • editor.findMatchBackground#3e3e75
  • editor.findMatchBorder#f0ad6d
  • editor.findMatchHighlightBackground#3e3e75
  • editor.foldBackground#3e3e75
  • editor.foreground#5ed378
  • editor.inactiveSelectionBackground#3e3e75
  • editor.lineHighlightBorder#8b8bcd
  • editor.selectionBackground#3e3e75
  • editor.selectionHighlightBackground#8b8bcd
  • editorBracketMatch.border#f0ad6d
  • editorCursor.background#2e2e37
  • editorCursor.foreground#8fff8b
  • editorError.foreground#ce4e4e
  • editorGroup.border#3e3e75
  • editorGroupHeader.border#3e3e75
  • editorGroupHeader.tabsBackground#1b1b33
  • editorGroupHeader.tabsBorder#3e3e75
  • editorGutter.addedBackground#306d30
  • editorGutter.background#3e3e75
  • editorGutter.deletedBackground#6d3030
  • editorGutter.foldingControlForeground#8b8bcd
  • editorGutter.modifiedBackground#306b8f
  • editorHoverWidget.background#1b1b33
  • editorHoverWidget.border#3e3e75
  • editorHoverWidget.foreground#5ed378
  • editorInfo.foreground#8b8bcd
  • editorLineNumber.activeForeground#eeeeee
  • editorLineNumber.foreground#8b8bcd
  • editorMarkerNavigation.background#3e3e75
  • editorMarkerNavigationError.background#ce4e4e
  • editorMarkerNavigationInfo.background#8b8bcd
  • editorMarkerNavigationWarning.background#ce8e4e
  • editorRuler.foreground#8b8bcd
  • editorStickyScroll.shadow#3e3e75
  • editorSuggestWidget.background#1b1b33
  • editorSuggestWidget.border#3e3e75
  • editorSuggestWidget.focusHighlightForeground#8b8bcd
  • editorSuggestWidget.highlightForeground#eeeeee
  • editorSuggestWidget.selectedBackground#3e3e75
  • editorWarning.foreground#ce8e4e
  • editorWhitespace.foreground#8b8bcd
  • editorWidget.background#1b1b33
  • editorWidget.resizeBorder#3e3e75
  • focusBorder#8b8bcd
  • foreground#8b8bcd
  • gitDecoration.addedResourceForeground#306d30
  • gitDecoration.conflictingResourceForeground#6d3030
  • gitDecoration.deletedResourceForeground#6d3030
  • gitDecoration.ignoredResourceForeground#306b8f
  • gitDecoration.modifiedResourceForeground#306b8f
  • gitDecoration.renamedResourceForeground#306d30
  • gitDecoration.stageDeletedResourceForeground#6d3030
  • gitDecoration.stageModifiedResourceForeground#306b8f
  • gitDecoration.submoduleResourceForeground#306d30
  • gitDecoration.untrackedResourceForeground#306b8f
  • input.background#3e3e75
  • input.border#8b8bcd
  • input.foreground#8b8bcd
  • input.placeholderForeground#eeeeee
  • inputOption.activeBackground#8b8bcd
  • inputOption.activeBorder#eeeeee
  • inputOption.activeForeground#eeeeee
  • inputOption.hoverBackground#8b8bcd
  • list.activeSelectionBackground#3e3e75
  • list.activeSelectionForeground#eeeeee
  • list.dropBackground#3e3e75
  • list.errorForeground#ce4e4e
  • list.focusBackground#3e3e75
  • list.focusForeground#8b8bcd
  • list.focusHighlightForeground#8b8bcd
  • list.highlightForeground#8b8bcd
  • list.hoverBackground#3e3e75
  • list.hoverForeground#8b8bcd
  • list.inactiveSelectionBackground#3e3e75
  • list.inactiveSelectionForeground#8b8bcd
  • list.warningForeground#ce8e4e
  • listFilterWidget.background#3e3e75
  • listFilterWidget.noMatchesOutline#ce4e4e
  • menu.background#1b1b33
  • menu.border#3e3e75
  • menu.foreground#8b8bcd
  • menu.selectionBackground#3e3e75
  • menu.selectionBorder#8b8bcd
  • menu.selectionForeground#eeeeee
  • menu.separatorBackground#3e3e75
  • menubar.selectionBackground#8b8bcd
  • menubar.selectionBorder#eeeeee
  • menubar.selectionForeground#eeeeee
  • merge.commonContentBackground#306b8f
  • merge.commonHeaderBackground#306b8f
  • merge.currentContentBackground#6d3030
  • merge.currentHeaderBackground#6d3030
  • merge.incomingContentBackground#306d30
  • merge.incomingHeaderBackground#306d30
  • notificationCenter.border#3e3e75
  • notificationCenterHeader.background#1b1b33
  • notificationCenterHeader.foreground#8b8bcd
  • notifications.border#3e3e75
  • notifications.foreground#8b8bcd
  • notificationsErrorIcon.foreground#ce4e4e
  • notificationsInfoIcon.foreground#8b8bcd
  • notificationsWarningIcon.foreground#ce8e4e
  • notificationToast.border#3e3e75
  • panel.border#3e3e75
  • panelTitle.activeBorder#eeeeee
  • panelTitle.activeForeground#eeeeee
  • panelTitle.inactiveForeground#8b8bcd
  • peekView.border#8b8bcd
  • peekViewEditor.background#1b1b33
  • peekViewEditor.matchHighlightBackground#3e3e75
  • peekViewEditor.matchHighlightBorder#eeeeee
  • peekViewEditorGutter.background#3e3e75
  • peekViewResult.background#1b1b33
  • peekViewResult.fileForeground#8b8bcd
  • peekViewResult.lineForeground#8b8bcd
  • peekViewResult.matchHighlightBackground#3e3e75
  • peekViewResult.selectionBackground#3e3e75
  • peekViewResult.selectionForeground#eeeeee
  • peekViewTitle.background#1b1b33
  • peekViewTitleDescription.foreground#8b8bcd
  • peekViewTitleLabel.foreground#8b8bcd
  • pickerGroup.border#3e3e75
  • pickerGroup.foreground#8b8bcd
  • progressBar.background#eeeeee
  • scrollbar.shadow#3e3e75
  • scrollbarSlider.activeBackground#eeeeee
  • scrollbarSlider.background#8b8bcd
  • scrollbarSlider.hoverBackground#eeeeee
  • selection.background#1b1b33
  • sideBar.background#1b1b33
  • sideBar.border#3e3e75
  • sideBar.foreground#8b8bcd
  • sideBarSectionHeader.background#1b1b33
  • sideBarSectionHeader.foreground#8b8bcd
  • sideBarTitle.foreground#8b8bcd
  • statusBar.background#3e3e75
  • statusBar.debuggingBackground#306b8f
  • statusBar.debuggingForeground#eeeeee
  • statusBar.foreground#8b8bcd
  • statusBar.noFolderBackground#1b1b33
  • statusBar.noFolderBorder#3e3e75
  • statusBarItem.hoverBackground#8b8bcd
  • statusBarItem.hoverForeground#eeeeee
  • statusBarItem.remoteBackground#3e3e75
  • statusBarItem.remoteForeground#8b8bcd
  • tab.activeBackground#3e3e75
  • tab.activeBorderTop#eeeeee
  • tab.activeForeground#eeeeee
  • tab.hoverBackground#3e3e75
  • tab.inactiveBackground#1b1b33
  • tab.inactiveForeground#8b8bcd
  • terminal.border#3e3e75
  • terminal.foreground#eeeeee
  • terminalCursor.background#404040
  • terminalCursor.foreground#8fff8b
  • textLink.activeForeground#8b8bcd
  • textLink.foreground#eeeeee
  • titleBar.activeBackground#3e3e75
  • titleBar.activeForeground#eeeeee
  • titleBar.inactiveBackground#1b1b33
  • titleBar.inactiveForeground#8b8bcd
  • widget.border#3e3e75
  • widget.shadow#3e3e75

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, markup.raw.block.fenced.markdown, markup.table, markup.quote punctuation.definition.blockquote.markdown, punctuation.definition.comment, punctuation.section.class.end, text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown, variable.language.fenced.markdown#00ff00
entity.name.function, keyword.other.special-method, meta.block variable.other, meta.class-method.js entity.name.function.js, meta.function-call, punctuation.definition.list_item.markdown, string constant.other.placeholder, support.function, text.html.markdown, variable, variable.function, variable.function.constructor, variable.other.class.js, variable.parameter#5ed378
invalid, invalid.illegal, markup.deleted#6e2e2e
entity.name.function.preprocessor, entity.other.attribute-name, keyword, markup.raw.block, string.other.link.description.title.markdown, text.html.markdown markup.inline.raw.markdown#c080d0
entity.name.module.js, keyword.operator, keyword.other, source.js constant.other.object.key.js string.unquoted.label.js, storage.modifier, storage.type, variable.import.parameter.js, variable.language#b7b7f7
constant.other.color, constant.other.reference.link.markdown, entity.name.tag, entity.other.attribute-name.class, keyword.control, keyword.control.directive, keyword.other.template, keyword.other.substitution, keyword.preprocessor, markup.deleted.git_gutter, markup.inserted, meta.preprocessor, meta.tag, meta.tag.sgml, punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, punctuation.separator.inheritance.php, source.sass keyword.control#409090
text.html.basic entity.other.attribute-name, text.html.basic entity.other.attribute-name.html#409090italic
constant.character, constant.character.escape, constant.escape, constant.numeric, constant.language, constant.other.key, constant.other.symbol, keyword.other.unit, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, string.regexp, support.constant#ffcd8b
markdown.heading, markup.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.inserted.git_gutter, string, string.other.link, support.other.variable#f0ad6d
entity.other.inherited-class, markup.changed.git_gutter, meta.use.php, source.css support.type.property-name, source.less support.type.property-name, source.postcss support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.stylus support.type.property-name, support.class, support.other.namespace.use.php, support.other.namespace.php, support.type, support.type.sys-types#c080d0
markup.changed#ffffcd
*link*, *uri*, *url*underline
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5ed378italic
source.json meta.structure.dictionary.json support.type.property-name.json#c080d0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5ed378
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#f0ad6d
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#6e2e2e
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#409090
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#5ed378
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#409090
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#c080d0
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#f0ad6d
markup.italic#409090italic
markup.bold, markup.bold string#409090bold
markup.bold markup.italic, markup.bold markup.italic string, markup.italic markup.bold, markup.italic markup.bold string, markup.quote markup.bold, markup.quote markup.bold string#409090bold
markup.underline, string.other.link.title.markdown#f0ad6dunderline
markup.quoteitalic
markup.raw.block.fenced.markdown, punctuation.definition.fenced.markdown#3e3e7550
meta.separator#00ff00bold
Inkpot GC VSC by mattmaniak - VS Code Theme