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.activeBorder#228a96
  • activityBar.activeFocusBorder#28a1af
  • activityBar.background#0e101a
  • activityBar.foreground#c5c8c6
  • activityBarBadge.background#228a96
  • activityBarBadge.foreground#3d3a53
  • badge.background#228a96
  • badge.foreground#ffffff
  • button.background#228a96
  • button.foreground#ffffff
  • diffEditor.diagonalFill#3d3a5380
  • diffEditor.insertedTextBackground#799d6a30
  • diffEditor.removedTextBackground#b8533540
  • dropdown.background#0a0b12
  • dropdown.border#0a0b12
  • dropdown.foreground#c5c8c6
  • editor.background#0a0b12
  • editor.findMatchBackground#ffb96480
  • editor.findMatchBorder#ffb964
  • editor.findMatchHighlightBackground#546b8860
  • editor.findMatchHighlightBorder#ffb964dd
  • editor.foreground#c5c8c6
  • editor.hoverHighlightBackground#228a9622
  • editor.lineHighlightBackground#8787af15
  • editor.selectionBackground#8787af50
  • editor.wordHighlightBackground#e6eaef22
  • editor.wordHighlightStrongBackground#6ba77f22
  • editorBracketMatch.background#228a9644
  • editorBracketMatch.border#6ba77f
  • editorCursor.foreground#ffffff
  • editorGroupHeader.tabsBackground#121421
  • editorGutter.addedBackground#a7da1e
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorIndentGuide.background#0a0b12
  • editorLineNumber.foreground#3d3a53
  • editorLink.activeForeground#228a96
  • editorOverviewRuler.addedForeground#a7da1e
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#6ba77f55
  • editorOverviewRuler.infoForeground#9d37fc
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#3d3a5340
  • editorSuggestWidget.border#c6b6ee40
  • editorSuggestWidget.highlightForeground#228a96
  • editorSuggestWidget.selectedBackground#228a9690
  • editorWhitespace.foreground#232a32
  • editorWidget.background#242842
  • editorWidget.border#228a96
  • editorWidget.foreground#ffffff
  • extensionButton.prominentBackground#228a96
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#2bb0c0
  • focusBorder#228a96
  • foreground#c5c8c6
  • gitDecoration.conflictingResourceForeground#9d37fc
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#4d5d6e
  • gitDecoration.modifiedResourceForeground#f7b83d
  • gitDecoration.untrackedResourceForeground#a7da1e
  • input.background#0a0b12
  • input.border#2d3741
  • input.foreground#c5c8c6
  • input.placeholderForeground#343f4a
  • inputOption.activeBorder#6ba77f
  • list.activeSelectionBackground#228a96
  • list.activeSelectionForeground#0a0b12
  • list.focusBackground#3d3a5375
  • list.hoverBackground#3d3a53
  • list.inactiveSelectionBackground#0a0b12
  • panel.background#0e101a
  • panel.border#384450
  • panelTitle.activeBorder#228a96
  • panelTitle.inactiveForeground#576a7d
  • peekView.border#228a96
  • peekViewEditor.background#060708
  • peekViewEditor.matchHighlightBackground#6ba77f55
  • peekViewEditorGutter.background#0a0c0e
  • peekViewResult.background#181e23
  • peekViewResult.fileForeground#a2afbb
  • peekViewResult.lineForeground#909fae
  • peekViewResult.matchHighlightBackground#6ba77f55
  • peekViewResult.selectionBackground#12161a
  • peekViewResult.selectionForeground#c5c8c6
  • peekViewTitle.background#0a0c0e
  • peekViewTitleDescription.foreground#a5b1be
  • peekViewTitleLabel.foreground#c5c8c6
  • progressBar.background#e6eaef
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#228a96aa
  • scrollbarSlider.background#3d3a53aa
  • scrollbarSlider.hoverBackground#228a9655
  • sideBar.background#121421
  • sideBar.foreground#c5c8c6
  • sideBarSectionHeader.background#3d3a53
  • sideBarSectionHeader.foreground#aeb9c4
  • statusBar.background#3d3a53
  • statusBar.debuggingBackground#ffb964
  • statusBar.debuggingForeground#121421
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#28a1af
  • tab.activeBackground#0a0b12
  • tab.activeBorder#0a0b12
  • tab.activeBorderTop#228a96
  • tab.border#121421
  • tab.inactiveBackground#121421
  • tab.inactiveForeground#62778c
  • terminal.ansiBlack#1c1c1c
  • terminal.ansiBlue#667899
  • terminal.ansiBrightBlack#3d3a53
  • terminal.ansiBrightBlue#8197bf
  • terminal.ansiBrightCyan#8fbfdc
  • terminal.ansiBrightGreen#99ad6a
  • terminal.ansiBrightMagenta#c6b6ee
  • terminal.ansiBrightRed#cf6a4c
  • terminal.ansiBrightWhite#e8e8d3
  • terminal.ansiBrightYellow#fad07a
  • terminal.ansiCyan#668799
  • terminal.ansiGreen#799d6a
  • terminal.ansiMagenta#8787af
  • terminal.ansiRed#b85335
  • terminal.ansiWhite#546b88
  • terminal.ansiYellow#ffb964
  • terminal.background#0a0b12
  • terminal.foreground#c5c8c6
  • titleBar.activeBackground#060708
  • widget.shadow#0e101a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#aeb9c4
comment#546b88
string#addbbc
constant.numeric#61bcc6
constant.language#6ba77f
constant.character, constant.other#6ba77f
variable
keyword#228a96
storage#6ba77f
storage.type#228a96
entity.name.class#6ba77funderline
entity.other.inherited-class#6ba77f
entity.name.function#e6eaef
variable.parameter#bed0e2
entity.name.tag#228a96
entity.other.attribute-name#6ba77f
support.function#6ba77f
support.constant#6ba77f
support.type, support.class#8197bf
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#addbbc
meta.diff, meta.diff.header#546b88
markup.deleted#e61f44
markup.inserted#A6E22E
markup.changed#f7b83d
constant.numeric.line-number.find-in-files - match#8FBE00A0
entity.name.filename.find-in-files#E6DB74
keyword.other#64778a
meta.property-value, support.constant.property-value, constant.other.color#addbbc
meta.structure.dictionary.json string.quoted.double.json#6ba77f
meta.structure.dictionary.value.json string.quoted.double.json#addbbc
meta.property-name support.type.property-name
meta.property-value punctuation.separator.key-value#aeb9c4
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#228a96
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#228a96
variable.other#bed0e2
variable.parameter.function.coffee#61bcc6
entity.name.section.markdown#6ba77f
punctuation.definition.heading.markdown#228a96
markup.raw.inline.markdown#addbbc
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#228a96
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#228a96
punctuation.definition.metadata.markdown#228a96
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#228a96
markup.bold.markdown, markup.italic.markdown#228a96
markup.italic.markdownitalic
markup.bold.markdownbold
markup.raw.block.markdown#664e4d
markup.deleted.git_gutter#e61f44
markup.inserted.git_gutter#a7da1e
markup.changed.git_gutter#f7b83d
meta.template.expression#aeb9c4
meta.type.annotation#8197bf
meta.return.type#8197bf
storage.modifier.async#ADDBBC

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Jelly Theme - Coding Theme