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#acad6f
  • activityBar.activeBorder#ffda72
  • activityBar.background#103a75
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#ffffff8c
  • badge.background#569cd6
  • breadcrumb.background#222730
  • breadcrumbPicker.background#303742
  • diffEditor.insertedTextBackground#7faa4e33
  • dropdown.background#222121
  • editor.background#21252B
  • editor.foreground#e8e0c8
  • editor.lineHighlightBackground#0e1313b6
  • editor.selectionBackground#193770ec
  • editor.selectionHighlightBackground#15416d88
  • editor.selectionHighlightBorder#59adf781
  • editor.wordHighlightBackground#40443370
  • editor.wordHighlightBorder#2963599a
  • editor.wordHighlightStrongBackground#01397a6e
  • editor.wordHighlightStrongBorder#267ecc9d
  • editorBracketHighlight.foreground1#5bb3b3
  • editorBracketHighlight.foreground2#fac863
  • editorBracketHighlight.foreground3#bb80b3
  • editorBracketHighlight.foreground4#98c379
  • editorBracketMatch.border#ffffff
  • editorCursor.foreground#e8e0c8
  • editorGroupHeader.tabsBackground#18181a
  • editorGutter.background#21252B
  • editorGutter.foldingControlForeground#fdff8a
  • editorIndentGuide.activeBackground#e3e4e250
  • editorIndentGuide.background#000000
  • editorLineNumber.activeForeground#ffd4b8
  • editorLineNumber.foreground#a8a8a84d
  • editorOverviewRuler.border#0000008c
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#e4676b
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#837559
  • gitDecoration.modifiedResourceForeground#ffd493
  • gitDecoration.renamedResourceForeground#73c991
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • gitlens.decorations.ignoredForegroundColor#c4c4c4
  • list.focusBackground#002e3b
  • list.hoverBackground#0068638f
  • list.hoverForeground#ffffff
  • list.inactiveFocusOutline#c1df8aa1
  • menu.background#222121
  • menu.border#c2c2c283
  • menubar.selectionBorder#a8a8a8
  • panel.background#101416
  • panel.border#00000059
  • panelTitle.activeBorder#f78166
  • panelTitle.activeForeground#ecf5ff
  • panelTitle.inactiveForeground#8b949e
  • sideBar.background#121213
  • sideBar.dropBackground#53595d80
  • statusBar.background#02131f
  • statusBar.border#000000
  • statusBarItem.remoteBackground#25a760
  • tab.activeBackground#222730
  • tab.activeBorderTop#0084ff
  • tab.activeModifiedBorder#f78166
  • tab.border#585858
  • tab.hoverBorder#ff9a9a
  • tab.inactiveBackground#111111
  • tab.inactiveModifiedBorder#f78166ad
  • tab.lastPinnedBorder#ff9b9b
  • terminal.background#101416
  • terminal.dropBackground#262d3080
  • terminal.tab.activeBorder#ff0202
  • titleBar.activeBackground#18263a
  • titleBar.activeForeground#fcf9fc
  • tree.indentGuidesStroke#a7a66f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, variable, meta.object, meta.tag, support.constant, meta.function-call.arguments, variable.parameter.function, support.type.object#b4d3dbe7
variable.other#968b9bitalic
support.variable, variable.parameter#9CDCFE
keyword, storage, keyword.control, keyword.operator.expression, primitive, modifier, language.constant, meta.preprocessor, support.type.primitive, keyword.language.gherkin.feature, punctuation.definition.decorator#fd9743
keyword.type, keyword.other, keyword.operator.new#f5c748ea
keyword.operator.logical, punctuation.accessor#e6616cbold
constant.language#E5C07Bbold
storage.modifier.import#ce9863
storage.type.annotation, variable.language.this#e2f8e5italic
punctuation.definition, punctuation.terminator#ffffff6c
meta.type.parameters, entity.name.type.type-parameter, constant.character.format.placeholder, text.variable#d7ffe1italic
entity.name.type, entity.name.type.alias, entity.name.type.class, meta.return.type, class.type.name, storage.type.variable, meta.type.annotation, return-type, inherited-class, entity.other.inherited-class, declaration.entity.type, declaration.heritage.type, storage.type.cs, new.expr, string.language.gherkin#33a3ff
entity.name.type.interface, entity.name.type.namespace, entity.name.type.model#558dbb
support.class#7EE787
string, punctuation.definition.string, keyword.operator.quantifier.regexp#c9a192
constant.character.escape#f1c2c2
comment, punctuation.definition.comment#576b5e
constant.numeric#56B6C2
property-name, support.function, meta.function-call, entity.name.function, variable.legacy.builtin, keyword.language.gherkin.feature.step, text.gherkin.feature#6cfdb4e7
support.type.property-name, punctuation.support.type.property-name#86c7f3
entity.name.tag, selector, selector.attribute-name#E5C07B
meta.tag.begin, meta.tag.end#30A2C2
entity.other.attribute-name#30C9AE
tag.quoted, string.quoted.double.html, string.quoted.single.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#A3A3A3
detected-link, string.detected-link#80C2E2
entity.name.tag.tsx, entity.name.tag.jsx, entity.name.tag.js#569CD6
meta.tag.begin.tsx, meta.tag.end.tsx, meta.tag.begin.jsx, meta.tag.end.jsx, meta.tag.begin.js, meta.tag.end.js#AAAAAA
entity.other.attribute-name.tsx, entity.other.attribute-name.js, entity.other.attribute-name.jsx#00CCFF
js.storage.type#FF8811bold
string.quoted.docstring.multi.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python#576b5eitalic
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#B479DB
variable.other.object.property, variable.other.property, variable.other.constant.property#5d9bbd
storage.type.class, storage.type.function, comment.line, storage.type.annotationitalic
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
markup.bold, markup.heading, punctuation.definition.heading#569cd6bold
markup.inline.raw#ce9178
markup.underline.link#e6db74
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#FFA198
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#7EE787
markup.changed, punctuation.definition.changed#FFA657
markup.ignored, markup.untracked#161B22
Meditheme by Duc Dang - VS Code Theme