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#141414
  • activityBar.border#3acbaf40
  • activityBar.foreground#3acbaf
  • activityBarBadge.background#3acbaf
  • activityBarBadge.foreground#000000
  • badge.background#14141430
  • badge.foreground#eeffff
  • breadcrumb.background#1c1c1c
  • button.background#11b394
  • button.foreground#000000
  • debugExceptionWidget.background#282828
  • debugExceptionWidget.border#3acbaf40
  • dropdown.background#202020
  • dropdown.border#00000010
  • editor.background#1c1c1c
  • editor.findMatchBackground#3acbaf40
  • editor.findMatchHighlightBackground#3acbaf15
  • editor.foreground#eeeeee
  • editor.selectionBackground#3acbaf40
  • editor.selectionHighlightBackground#3acbaf15
  • editorBracketHighlight.foreground1#cccc8e
  • editorBracketHighlight.foreground2#8ecccc
  • editorBracketHighlight.foreground3#cc8ecc
  • editorBracketPairGuide.activeBackground1#cccc8e
  • editorBracketPairGuide.activeBackground2#ff0000
  • editorBracketPairGuide.activeBackground3#cc8ecc
  • editorGroupHeader.tabsBackground#141414
  • editorGroupHeader.tabsBorder#3acbaf40
  • editorLineNumber.activeForeground#3acbaf
  • editorLineNumber.foreground#3acbaf5a
  • editorSuggestWidget.border#3acbaf40
  • editorSuggestWidget.focusHighlightForeground#3acbaf
  • editorSuggestWidget.highlightForeground#3acbaf
  • extensionButton.prominentBackground#11b394
  • focusBorder#3acbaf
  • foreground#eeeeee
  • input.background#141414
  • inputOption.activeBackground#3acbaf35
  • inputOption.activeBorder#3acbaf40
  • list.activeSelectionBackground#3acbaf25
  • list.dropBackground#3acbaf19
  • list.focusHighlightForeground#3acbaf
  • list.highlightForeground#3acbaf
  • list.inactiveSelectionBackground#2c2c2c
  • minimap.selectionHighlight#3acbaf
  • panel.background#191919
  • panel.border#3acbaf40
  • panelTitle.activeBorder#3acbaf
  • peekView.border#3acbaf
  • peekViewEditor.background#252525
  • peekViewEditor.matchHighlightBackground#3acbaf50
  • peekViewResult.background#222222
  • peekViewResult.matchHighlightBackground#3acbaf50
  • peekViewResult.selectionBackground#3acbaf25
  • peekViewTitle.background#222222
  • pickerGroup.foreground#3acbaf
  • scrollbarSlider.activeBackground#363636
  • scrollbarSlider.background#323232
  • scrollbarSlider.hoverBackground#3a3a3a
  • settings.checkboxBackground#3acbaf
  • settings.checkboxForeground#000000
  • settings.dropdownBackground#202525
  • settings.dropdownBorder#3acbaf50
  • settings.modifiedItemIndicator#3acbaf
  • settings.numberInputBackground#202525
  • settings.numberInputBorder#3acbaf50
  • settings.textInputBackground#202525
  • settings.textInputBorder#3acbaf50
  • sideBar.background#191919
  • sideBar.border#3acbaf40
  • sideBarSectionHeader.background#2a2a2a
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#3acbaf
  • statusBar.debuggingBackground#29cec0
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#3acbaf90
  • tab.activeBorder#1c1c1c
  • tab.border#3acbaf40
  • tab.hoverBorder#3acbaf
  • tab.inactiveBackground#141414
  • tab.inactiveForeground#707070
  • textLink.activeForeground#3acbaf
  • textLink.foreground#3acbafcc
  • titleBar.activeBackground#141414
  • titleBar.inactiveBackground#141414
  • tree.indentGuidesStroke#3acbaf40

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.preprocessor#19b6ffitalic
meta.preprocessor string, entity.name.namespace, entity.name.section.vhdl#19b6ff
storage.type, storage.modifier, keyword.other, keyword.type, entity.name.tag, keyword.mnemonic, keyword#4c8dff
entity.name.function, support.function#c5efefitalic
variable.parameter, variable.other.makefile, meta.property-name.css, variable.other.positional#ffa632italic
punctuation.definition.directive, copula#70aef0
keyword.operator, storage.modifier.pointer.cpp, source.makefile punctuation, storage.type.function.arrow.js, punctuation.separator.key-value.html#6eaecc
comment.block, punctuation.definition.comment#808080italic
comment.line#686868italic
keyword.control, source.makefile support.function, keyword.operator.conjunction, support.type.property-name.table.toml#4c8dffitalic
string.quoted.double, meta.interpolation variable.other.readwrite, string.template.js, string.quoted.single.js, meta.preprocessor.string.cs, source.toml string.quoted.single#e9a75b
constant.other.placeholder, punctuation.definition.interpolation, punctuation.definition.template-expression#dadf5bitalic
invalid.illegal.placeholder, invalid.illegal.unknown-escape#ff3232bold italic
invalid.illegal#ff3232bold
string.quoted.double constant.character.escape#ff8800italic
string.quoted.single#e5ce5b
constant.character.escape#ffd400italic
constant.numeric, constant.language#d072e5
keyword.other.unit#c32de5
variable.other.enummember#ccc88e
entity.name.type.class, support.class, support.class punctuation.definition.string, entity.name.type.vhdl#28c3cc
entity.name.type.struct, keyword.operator.adverb#28cc92
entity.name.type.enum#71ce6d
entity.name.type.interface, text.tex.latex constant.other, entity.other.inherited-class.vhdl#b0cc28
meta.interpolation, meta.template.expression.js, variable.parameter.label.asm, support.class.math.block#eeeeee
entity.name.section#b2e6ffbold
punctuation.definition.heading#19b6ff
markup.inline, markup.fenced_code.block#e5a55b
fenced_code.block.language#e0e55bitalic
punctuation.definition.list, punctuation.definition.bold, punctuation.definition.italic#447fe5
markup.italicitalic
markup.bold markup.italicbold italic
markup.boldbold
meta.link.inline markup.underline.link#447fe5
punctuation.definition.link.title, meta.link.inline punctuation.definition.metadata#28c3cc
punctuation.definition.link.description, meta.image.inline punctuation.definition.metadata#2ecc28
string.other.link.title, string.other.link.description, support.type.register#e5ce5b
markup.underline.link.image#28cc92
support.type.property-name.json, entity.other.attribute-name, meta.object-literal.key.js string.quoted.double.js, support.type.property-name.toml#28c3ccitalic
entity.name.function.macro.rust, variable.language.makefile, source.css support.constant, entity.name.variable.preprocessor.symbol.cs, source.shell variable.other, text.tex.latex support.function#e2ccff
variable.other.constant.jsbold
entity.name.type.numeric, entity.name.type.primitive.rust#ed478f
meta.attribute.rust#b4b4b4bold
Kumuhana by Martan03 - VS Code Theme