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.

  • actionBar.toggledBackground#383a49
  • activityBar.activeBackground#666666
  • activityBar.border#00000000
  • contrastActiveBorder#00000000
  • contrastBorder#00000000
  • diffEditor.insertedLineBackground#00000000
  • diffEditor.insertedTextBackground#a3c98f73
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedLineBackground#00000000
  • diffEditor.removedTextBackground#eb28019a
  • diffEditor.removedTextBorder#00000000
  • diffEditorGutter.insertedLineBackground#a3c98f73
  • diffEditorGutter.removedLineBackground#eb28019a
  • editor.background#000000
  • editor.findMatchBackground#00ff0089
  • editor.findMatchHighlightBackground#00ff0010
  • editor.foreground#FFFFFF
  • editor.selectionBackground#FFFFFF
  • editor.selectionHighlightBackground#00ff005e
  • editorCommentsWidget.rangeActiveBackground#666666
  • editorCommentsWidget.rangeBackground#666666
  • editorCommentsWidget.replyInputBackground#000000
  • editorCommentsWidget.resolvedBorder#666666
  • editorCommentsWidget.unresolvedBorder#666666
  • editorGroup.border#666666
  • editorGroup.dropBackground#66666688
  • editorIndentGuide.activeBackground1#FFFFFF
  • editorIndentGuide.background1#FFFFFF
  • editorInlayHint.background#FFFFFF
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.dimmedForeground#666666
  • editorLineNumber.foreground#666666
  • editorMultiCursor.primary.background#00ff00
  • editorMultiCursor.primary.foreground#00ff00
  • editorMultiCursor.secondary.background#666666cb
  • editorMultiCursor.secondary.foreground#666666cb
  • editorWhitespace.foreground#7c7c7c
  • focusBorder#00000000
  • input.border#666666
  • inputOption.activeBackground#666666
  • list.activeSelectionBackground#00ff00
  • list.activeSelectionForeground#000000
  • list.filterMatchBorder#666666
  • list.focusBackground#00ff00
  • list.focusForeground#000000
  • list.focusHighlightForeground#000000
  • list.highlightForeground#00ca4a
  • list.hoverBackground#666666
  • list.inactiveFocusBackground#666666
  • list.inactiveSelectionBackground#666666
  • list.inactiveSelectionForeground#FFFFFF
  • panel.border#666666
  • panelSection.border#666666
  • panelTitle.activeBorder#00ff00
  • panelTitle.border#00000000
  • panelTitleBadge.background#00ff00
  • panelTitleBadge.foreground#000000
  • peekView.border#666666
  • peekViewEditor.background#333333
  • peekViewEditor.matchHighlightBorder#00ff00
  • peekViewResult.matchHighlightBackground#00ff0089
  • ports.iconRunningProcessForeground#FFFFFF
  • quickInput.background#2e2e2e
  • quickInputList.focusBackground#00ff00
  • quickInputList.focusForeground#000000
  • scrollbarSlider.activeBackground#666666
  • scrollbarSlider.background#666666bb
  • scrollbarSlider.hoverBackground#666666
  • selection.background#008000
  • sideBar.border#666666
  • sideBarTitle.border#00000000
  • sideBarTitle.foreground#888888
  • statusBarItem.remoteBackground#00000000
  • tab.activeBorder#00ff00
  • tab.unfocusedActiveBorder#00ff0089

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
meta.diff.header#000080
comment#7ca668
constant.language#569cd6
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#b5cea8
constant.regexp#b46695
entity.name.tag#569cd6
entity.name.tag.css#d7ba7d
entity.other.attribute-name#9cdcfe
source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name#d7ba7d
invalid#f44747
markup.underlineunderline
markup.boldbold
markup.heading#6796e6
markup.italicitalic
markup.inserted#b5cea8
markup.deleted#ce9178
markup.changed#569cd6
meta.selector#d7ba7d
punctuation.definition.tag#808080
meta.preprocessor#569cd6
meta.preprocessor.string#ce9178
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#9cdcfe
storage#569cd6
storage.type#569cd6
storage.modifier#569cd6
string#ce9178
string.tag#ce9178
string.value#ce9178
string.regexp#d16969
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js#569cd6
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less#d4d4d4
keyword#569cd6
keyword.control#569cd6
keyword.operator#d4d4d4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#569cd6
keyword.other.unit#b5cea8
support.function.git-rebase#d4d4d4
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language.this#569cd6
entity.name.function, support.function, support.constant.handlebars#DCDCAA
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type#4EC9B0
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4EC9B0
keyword.control#C586C0
variable, meta.definition.variable.name, support.variable#9CDCFE
meta.object-literal.key, meta.object-literal.key entity.name.function#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
urmom by drewgonzales - VS Code Theme