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.activeBackground#00000000
  • activityBar.activeBorder#FFCC00
  • activityBar.activeFocusBorder#FFCC00
  • activityBar.background#2A324B
  • activityBar.border#ADB1C23A
  • activityBar.dropBorder#ADB1C23A
  • activityBar.foreground#FFCC00
  • activityBar.inactiveForeground#ffffff70
  • activityBarBadge.background#FFCC00
  • activityBarBadge.foreground#303956
  • badge.background#FFCC00
  • badge.foreground#303956
  • breadcrumb.activeSelectionForeground#FFCC00
  • breadcrumb.background#212836
  • breadcrumb.focusForeground#FFCC00
  • breadcrumb.foreground#aaa
  • breadcrumbPicker.background#212836
  • button.background#FFCC00
  • button.foreground#242B40
  • debugExceptionWidget.background#303956
  • debugExceptionWidget.border#FF5C57
  • debugToolBar.border#47506B
  • diffEditor.insertedTextBackground#B3FF6324
  • diffEditor.removedTextBackground#FFAEAC44
  • dropdown.background#303956
  • dropdown.border#00000000
  • editor.background#242b40
  • editor.findMatchBackground#ADB1C230
  • editor.findMatchHighlightBackground#ADB1C230
  • editor.findRangeHighlightBackground#F5B90011
  • editor.focusedStackFrameHighlightBackground#B3FF6322
  • editor.foldBackground#303956
  • editor.foreground#bebebe
  • editor.hoverHighlightBackground#ADB1C230
  • editor.lineHighlightBackground#2A324B
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#FFCC0020
  • editor.selectionBackground#ADB1C230
  • editor.snippetTabstopHighlightBackground#ADB1C23A
  • editor.stackFrameHighlightBackground#F5B90033
  • editor.wordHighlightBackground#ADB1C23A
  • editor.wordHighlightStrongBackground#adb1c242
  • editorBracketMatch.background#47506B
  • editorBracketMatch.border#47506B
  • editorCursor.foreground#FFCC00
  • editorError.foreground#FF5C57
  • editorGroup.border#1A1F2E
  • editorGroup.emptyBackground#2A324B
  • editorGroupHeader.tabsBackground#242B40
  • editorGutter.addedBackground#35CF6866
  • editorGutter.deletedBackground#FF5C57
  • editorGutter.modifiedBackground#00A39FAA
  • editorIndentGuide.background#97a7c826
  • editorLineNumber.activeForeground#FFCC00
  • editorLineNumber.foreground#9194A2aa
  • editorLink.activeForeground#FFCC00
  • editorOverviewRuler.addedForeground#FFCC00
  • editorOverviewRuler.deletedForeground#FF5C57
  • editorOverviewRuler.errorForeground#FF5C56
  • editorOverviewRuler.findMatchForeground#04d1bcAA
  • editorOverviewRuler.modifiedForeground#00A39FAA
  • editorOverviewRuler.warningForeground#FFCC00
  • editorOverviewRuler.wordHighlightForeground#ADB1C288
  • editorOverviewRuler.wordHighlightStrongForeground#FFCC00
  • editorStickyScroll.background#242B40
  • editorStickyScrollHover.background#04d1bd2f
  • editorSuggestWidget.background#212836
  • editorWarning.foreground#FFCC00
  • editorWhitespace.foreground#ADB1C255
  • editorWidget.background#212836
  • extensionButton.prominentBackground#FFCC00
  • extensionButton.prominentHoverBackground#FFCC0070
  • focusBorder#3b4c8020
  • foreground#bebebe
  • gitDecoration.ignoredResourceForeground#3D4D67
  • gitDecoration.modifiedResourceForeground#5dd9ffaa
  • gitDecoration.untrackedResourceForeground#FFCC00
  • input.background#303956
  • input.border#ADB1C23A
  • input.foreground#f3f4f5a9
  • input.placeholderForeground#f3f4f550
  • list.activeSelectionBackground#47506B80
  • list.activeSelectionForeground#FFCC00
  • list.errorForeground#FF5C57
  • list.focusBackground#FFCC0033
  • list.focusForeground#FFCC00
  • list.highlightForeground#FFCC00
  • list.hoverBackground#303956
  • list.inactiveSelectionBackground#303B50
  • list.inactiveSelectionForeground#FFCC00
  • list.warningForeground#B38700
  • menu.background#212836
  • menu.border#303956
  • menu.foreground#bebebe
  • menu.selectionBackground#303956
  • menu.selectionBorder#ADB1C23A
  • menu.selectionForeground#fff
  • menubar.selectionBackground#303956
  • menubar.selectionForeground#FFCC00
  • merge.currentContentBackground#35CF6833
  • merge.currentHeaderBackground#35CF6866
  • merge.incomingContentBackground#14B1FF33
  • merge.incomingHeaderBackground#14B1FF77
  • notificationLink.foreground#FFCC00
  • notifications.background#2A324B
  • notifications.foreground#bebebe
  • notificationToast.border#14B1FF33
  • panel.background#242b40
  • panel.border#ADB1C23A
  • panel.dropBorder#ff0000
  • panelTitle.activeBorder#FFCC00
  • panelTitle.activeForeground#f3f4f5
  • panelTitle.inactiveForeground#ffffff70
  • peekView.border#FFCC00
  • peekViewEditor.background#14B1FF08
  • peekViewEditor.matchHighlightBackground#ADB1C23A
  • peekViewEditor.matchHighlightBorder#00000000
  • peekViewResult.matchHighlightBackground#F5B90088
  • peekViewResult.selectionBackground#FFCC00
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#B3FF6311
  • pickerGroup.foreground#FFCC00
  • scrollbar.shadow#11141a11
  • scrollbarSlider.activeBackground#ffffff22
  • scrollbarSlider.background#ffffff11
  • scrollbarSlider.hoverBackground#ffffff22
  • selection.background#ADB1C23A
  • settings.modifiedItemIndicator#FFCC00
  • sideBar.background#242B40
  • sideBar.border#ADB1C23A
  • sideBar.foreground#bebebe
  • sideBarSectionHeader.background#2A324B
  • sideBarSectionHeader.border#303956
  • sideBarSectionHeader.foreground#ffffff70
  • sideBarTitle.foreground#FFCC00
  • statusBar.background#242B40
  • statusBar.border#ADB1C23A
  • statusBar.debuggingBackground#303956
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#303956
  • statusBar.foreground#bebebe
  • statusBar.noFolderBackground#47506B
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#2A324B
  • statusBarItem.remoteBackground#FFCC00
  • tab.activeBackground#212836
  • tab.activeBorder#00000000
  • tab.activeBorderTop#ADB1C23A
  • tab.activeForeground#fefefeb0
  • tab.border#1c212e5a
  • tab.inactiveBackground#242B40
  • tab.inactiveForeground#fefefe50
  • tab.unfocusedActiveBackground#00000000
  • tab.unfocusedActiveForeground#fefefe50
  • tab.unfocusedInactiveForeground#818CA6
  • textLink.activeForeground#FFCC00
  • textLink.foreground#FFCC00
  • titleBar.activeBackground#242b40
  • titleBar.activeForeground#e2e6e95d
  • titleBar.border#ADB1C23A
  • titleBar.inactiveBackground#242b40
  • titleBar.inactiveForeground#a1a2a34d
  • widget.shadow#11141ab3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#97a7c8ff
comment#506686
string#f6f6f5
string.unquoted.html, string.quoted.double.js, string.quoted.single.html, constant.other.symbol, entity.other.inherited-class#B3D667
string.quoted.single.js#70F49C
support.variable.dom.js#59f2f7
variable.other.constant.js, variable.other.constant.object.js, variable.other.constant.property.js#e9b684
constant.numeric#58b4ff
constant.language#FFE792
constant.character, constant.other#AC58FF
variable#B7C6DA
keyword#E95293
storage#FF5BA2
storage.type#D59DF6
entity.name.class#82C600
entity.other.inherited-class#82C600italic underline
variable.parameter#85AC3A
entity.name.tag#E76572
entity.other.attribute-name, entity.other.attribute-name.class.css, string.quoted.double.json#EAB780
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#fffa9e
entity.name.function.js, entity.name.function.method.js, entity.name.accessor.js, entity.name.class.js#71b1fe
support.class.builtin.js, entity.name.type.class.js#fffa9e
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#97a7c8
constant.language.boolean.false.js, constant.language.boolean.true.js#eab780
support.variable.property.dom.js, entity.name.type.new.js#e76572
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#E26674
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#56A3B1
entity.other.attribute-name.id#85AC3A
support.type.property-name.css#4ff2f8
entity.other.attribute-name.id.css#fffa9e
constant.other.color.rgb-value.hex.css#4ff2f8
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#85AC3A
support.function#71b1fe
support.constant#E76572
support.type, support.class#4DB1D8
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#d8d8d8
none#d8d8d8
keyword.operator#4FF2F8
keyword#D59DF6
variable, meta.selector.css#E26674
entity.name.function, meta.require, support.function.any-method#7cafc2
support.class, entity.name.class, entity.name.type.class#E76572
meta.class#f8f8f8
keyword.other.special-method#7cafc2
storage#ba8baf
constant.numeric#dc9656
none#dc9656
none#dc9656
constant#dc9656
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
Bruta by ColtHands - VS Code Theme