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#24292f
  • activityBarBadge.background#4B76CF
  • activityBarBadge.foreground#ffffff
  • badge.background#ff5f5f
  • badge.foreground#ffffff
  • diffEditor.insertedTextBackground#09e79d13
  • dropdown.background#f6f8fa
  • editor.background#f6f8fa
  • editor.findMatchBackground#ff5f5f
  • editor.findMatchBorder#ff5f5f
  • editor.findMatchHighlightBackground#ff5f5f
  • editor.findMatchHighlightBorder#ff5f5f
  • editor.findRangeHighlightBackground#ff5f5f
  • editor.findRangeHighlightBorder#ff5f5f
  • editor.focusedStackFrameHighlightBackground#ff0000
  • editor.foreground#24292f
  • editor.lineHighlightBackground#efefefb0
  • editor.selectionBackground#e0e0e0D0
  • editor.wordHighlightBackground#f6f8fa
  • editorCursor.foreground#f30f4c
  • editorGroup.border#1A1F2E
  • editorGroupHeader.tabsBackground#f6f8fa
  • editorGutter.addedBackground#308E68
  • editorGutter.modifiedBackground#938464
  • editorIndentGuide.background#97a7c826
  • editorLineNumber.activeForeground#818ca6
  • editorLineNumber.foreground#3D4D67
  • editorSuggestWidget.background#f6f8fa
  • editorSuggestWidget.border#ff5f5f
  • editorSuggestWidget.foreground#24292f
  • editorSuggestWidget.highlightForeground#ff5f5f
  • foreground#24292f
  • gitDecoration.ignoredResourceForeground#3D4D67
  • gitDecoration.modifiedResourceForeground#E3C18A
  • gitDecoration.untrackedResourceForeground#50fa7b
  • input.background#efefefb0
  • input.border#ff5f5f
  • input.foreground#3D4D67
  • input.placeholderForeground#3D4D67
  • list.activeSelectionBackground#e5e5e5
  • list.activeSelectionForeground#ff5f5f
  • list.activeSelectionIconForeground#fff
  • list.focusBackground#3D4D67
  • list.hoverBackground#eaeaea
  • list.inactiveSelectionBackground#e5e5e5
  • list.inactiveSelectionForeground#ff5f5f
  • panel.background#f6f8fa
  • panel.border#b2b2b2
  • panelTitle.activeBorder#ff5f5f
  • panelTitle.activeForeground#24292f
  • panelTitle.inactiveForeground#b2b2b2
  • pickerGroup.border#FFE792
  • scrollbar.shadow#e2e2e25b
  • scrollbarSlider.activeBackground#e2e2e25b
  • scrollbarSlider.background#e2e2e25b
  • scrollbarSlider.hoverBackground#e2e2e25b
  • sideBar.background#f2f2f2
  • sideBarSectionHeader.background#e5e5e5
  • sideBarTitle.foreground#f30f4c
  • statusBar.background#ff5f5f
  • statusBar.border#ff5f5f
  • statusBar.debuggingBackground#818CA6
  • statusBar.debuggingBorder#818CA6
  • statusBar.debuggingForeground#f0f0f0
  • statusBar.foreground#f0f0f0
  • statusBar.noFolderBackground#ff5f5f
  • tab.activeBackground#e5e5e5
  • tab.activeBorder#ff5f5f
  • tab.border#e5e5e5
  • tab.inactiveBackground#f2f2f2
  • tab.inactiveForeground#ff5f5f
  • tab.unfocusedInactiveForeground#818CA6
  • terminal.foreground#282a36
  • terminal.selectionBackground#e5e5e5
  • terminalCursor.foreground#f30f4c
  • terminalOverviewRuler.cursorForeground#ff0000
  • widget.shadow#d0d0d0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#97a7c8ff—
comment#7cafc2—
string#6e7781—
string.unquoted.html, string.quoted.double.js, string.quoted.single.html, constant.other.symbol, entity.other.inherited-class#24292f—
string.quoted.single.js#24292f—
support.variable.dom.js#59f2f7—
variable.other.constant.js, variable.other.constant.object.js, variable.other.constant.property.js#6e7781—
constant.numeric#FF5BA2—
constant.language#6e7781—
constant.character, constant.other#AC58FF—
variable#AC58FF—
keyword#E95293—
storage#FF5BA2—
storage.type#FF5BA2—
entity.name.class#24292f—
entity.other.inherited-class#24292fitalic underline
variable.parameter#6e7781—
entity.name.tag#FF5BA2—
entity.other.attribute-name, entity.other.attribute-name.class.css, string.quoted.double.json#8250df—
meta.tag.other, entity.name.tag.style, entity.name.tag.script, meta.tag.block.script, source.js.embedded punctuation.definition.tag.html, source.css.embedded punctuation.definition.tag.html#E26674—
variable.language.this.js, variable.language.this.ts, entity.name.type#eab780—
entity.other.attribute-name.id.html#6e7781—
entity.name.function.js, entity.name.function.method.js, entity.name.accessor.js, entity.name.class.js#8250df—
support.class.builtin.js, entity.name.type.class.js#FF5BA2—
variable.parameter.js, constant.other.object.key.js, variable.other.readwrite.js, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, meta.object-literal.key.js, meta.array.literal.js, meta.brace.round.js, punctuation.definition.block.js, meta.objectliteral.js#6e7781—
constant.language.boolean.false.js, constant.language.boolean.true.js#FF5BA2—
support.variable.property.dom.js, entity.name.type.new.js#8250df—
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#8250df—
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#82BAF2—
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#D0B344—
meta.toc-list.id#88F2AF—
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, string.quoted.double.handlebars#47919e—
entity.other.attribute-name.id#85AC3A—
support.type.property-name.css#6e7781—
entity.other.attribute-name.id.css#24292f—
constant.other.color.rgb-value.hex.css#8250df—
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#FF5BA2—
support.function#8250df—
support.constant#FF5BA2—
support.type, support.class#FF5BA2—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#24292f—
none#d8d8d8—
keyword.operator#6e7781—
keyword#FF5BA2—
variable, meta.selector.css#FF5BA2—
entity.name.function, meta.require, support.function.any-method#7cafc2—
support.class, entity.name.class, entity.name.type.class#6e7781—
meta.class#7cafc2—
keyword.other.special-method#7cafc2—
storage#7cafc2—
constant.numeric#FF5BA2—
none#FF5BA2—
none#FF5BA2—
constant#24292f—
invalid.deprecated#ffffff—
meta.diff, meta.diff.header#655c2d—
markup.deleted#FF5BA2—
markup.inserted#82C600—
markup.changed#ffff63—
entity.name.filename.find-in-files#ffff63—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—
entity.name.section.markdown#EF596F—
punctuation.definition.heading.markdown#E76572—
punctuation.definition.list.begin.markdown#E5C07B—
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.underline.markdown#E5C07B—
markup.inline.raw.markdown#89CA78—
markup.inline.raw.string.markdown#70ca8e—
punctuation.definition.raw.markdown#E5C07B—
punctuation.definition.list.markdown#E5C07B—
punctuation.definition.metadata.markdown#FFFFFF—
markup.underline.link.markdown,markup.underline.link.image.markdown#56A3B1—
string.other.link.title.markdown,string.other.link.description.markdown#3bb3e2—
markup.quote.markdown#FFFFFF—
markup.bold.markdown#c59164bold
markup.italic.markdown#c59164italic
markup.underline.markdown#c59164underline
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#E5C07B—
beginning.punctuation.definition.list.markdown#EF596F—
markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#EF596F—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#3bb3e2—
text.html.markdown string.unquoted.plain.out.yaml#506686—
text.html.markdown entity.name.tag.yaml#97a7c8—
JK Themes by Jhonny Kyuorhan - VS Code Theme