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#e6e6e6
  • activityBar.background#161616
  • activityBar.border#27292b
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#343434
  • badge.background#161616
  • button.background#27292b
  • button.foreground#e6e6e6
  • checkbox.border#404754
  • dropdown.background#111111
  • dropdown.border#111111
  • dropdown.foreground#e6e6e6
  • editor.background#1A1D23
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#42557b
  • editor.findMatchHighlightBackground#6bb7ff2f
  • editor.foreground#c0c5ce
  • editor.hoverHighlightBackground#202020
  • editor.inactiveSelectionBackground#2C333B
  • editor.lineHighlightBackground#2C333B
  • editor.lineHighlightBorder#2C333B
  • editor.rangeHighlightBackground#27292b
  • editor.selectionBackground#2C333B
  • editor.selectionHighlightBackground#27292b
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#d7dae0
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#d7dae0
  • editorBracketMatch.background#2f2f2f
  • editorBracketMatch.border#303030
  • editorCodeLens.foreground#27292b
  • editorCursor.background#161616
  • editorCursor.foreground#c0c5ce
  • editorError.border#27292b
  • editorError.foreground#FF7A84
  • editorGroup.border#27292b
  • editorGroup.dropBackground#3793e01a
  • editorGroup.emptyBackground#161616
  • editorGroupHeader.tabsBackground#111111
  • editorGroupHeader.tabsBorder#27292b
  • editorGutter.background#1A1D23
  • editorHoverWidget.background#111111
  • editorHoverWidget.border#27292b
  • editorIndentGuide.background1#2f2f2f
  • editorLineNumber.activeForeground#e6e6e6
  • editorLineNumber.foreground#606b76
  • editorLink.activeForeground#999999
  • editorMarkerNavigation.background#111111
  • editorMarkerNavigationError.background#161616
  • editorMarkerNavigationWarning.background#27292b
  • editorOverviewRuler.border#27292b
  • editorOverviewRuler.commonContentForeground#27292b
  • editorOverviewRuler.currentContentForeground#FF7A84
  • editorOverviewRuler.incomingContentForeground#73c936
  • editorRuler.foreground#343434
  • editorSuggestWidget.background#111111
  • editorSuggestWidget.border#27292b
  • editorSuggestWidget.foreground#999999
  • editorSuggestWidget.selectedBackground#27292b
  • editorWarning.border#27292b
  • editorWarning.foreground#FF7A84
  • editorWhitespace.foreground#65737e
  • editorWidget.background#111111
  • editorWidget.border#27292b
  • errorForeground#FF7A84
  • focusBorder#666666
  • foreground#e6e6e6
  • input.background#27292bd3
  • input.foreground#e6e6e6
  • input.placeholderForeground#999999
  • inputOption.activeBorder#343434
  • inputValidation.errorBorder#FF7A84
  • inputValidation.infoBorder#b392f0
  • inputValidation.warningBorder#FF9800
  • list.activeSelectionBackground#27292b
  • list.activeSelectionForeground#e6e6e6
  • list.dropBackground#111111
  • list.errorForeground#FF7A84
  • list.focusBackground#27292b
  • list.highlightForeground#96a6c8
  • list.hoverBackground#27292b
  • list.inactiveSelectionBackground#27292b
  • list.inactiveSelectionForeground#e6e6e6
  • list.warningForeground#FF9800
  • menu.background#111111
  • menu.border#343434
  • menu.selectionBackground#27292b
  • menu.separatorBackground#303030
  • notificationCenter.border#343434
  • notifications.background#111111
  • notifications.border#343434
  • notifications.foreground#ffffff
  • notificationToast.border#343434
  • panelSectionHeader.background#111111
  • panelTitle.activeBorder#e6e6e6
  • peekView.border#343434
  • peekViewEditor.background#111111
  • peekViewEditor.matchHighlightBackground#3793e033
  • peekViewResult.background#111111
  • peekViewResult.fileForeground#e6e6e6
  • peekViewResult.lineForeground#e6e6e6
  • peekViewResult.matchHighlightBackground#3793e033
  • peekViewResult.selectionBackground#23252c
  • peekViewResult.selectionForeground#e6e6e6
  • peekViewTitle.background#23252c
  • peekViewTitleDescription.foreground#79b8ff
  • peekViewTitleLabel.foreground#e6e6e6
  • scrollbar.shadow#161616
  • scrollbarSlider.activeBackground#3c3f42cc
  • scrollbarSlider.background#d2e0ff2f
  • scrollbarSlider.hoverBackground#5b646c
  • selection.background#61afef40
  • sideBar.background#111111
  • sideBar.border#27292b
  • sideBar.foreground#e6e6e6
  • sideBarSectionHeader.background#161616
  • sideBarSectionHeader.border#27292b
  • sideBarSectionHeader.foreground#e6e6e6
  • sideBarTitle.foreground#e6e6e6
  • statusBar.background#111111
  • statusBar.border#27292b
  • statusBar.foreground#e6e6e6
  • statusBar.noFolderBackground#111111
  • statusBar.noFolderForeground#e6e6e6
  • statusBarItem.prominentBackground#FF7A84
  • statusBarItem.prominentHoverBackground#FF9800
  • statusBarItem.remoteBackground#BB80B0
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#161616
  • tab.activeForeground#e6e6e6
  • tab.border#27292b
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#757575
  • tab.unfocusedActiveForeground#e6e6e6
  • tab.unfocusedInactiveForeground#757575
  • tab.unfocusedInactiveModifiedBorder#FF7A84
  • terminal.background#1A1D23
  • terminal.border#2f2f2f
  • terminal.foreground#bdbdbd
  • terminal.selectionBackground#303030
  • textLink.foreground#79b8ff
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#e6e6e6
  • titleBar.border#27292b
  • titleBar.inactiveBackground#161616
  • titleBar.inactiveForeground#999999
  • walkThrough.embeddedEditorBackground#2e3440

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#F8F8F8
comment, punctuation.definition.comment, 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, string.quoted.docstring.multi.python constant.character.escape.python#65737e
constant#b8d977
entity#72AACA
keyword#fa9a4b
storage#F6F080
string#C4E2F2
support#72AACA
variable#FB9A4B
invalid#F8F8F8
text source
text.html.ruby source
entity.other.inherited-class#B7D877
string.quoted source#B7D877
string constant#B7D877
string.regexp#FFB454
string variable#EDEF7D
support.function#FFB454
support.constant#B7D877
other.preprocessor.c#8996A8
other.preprocessor.c entity#AFC4DB
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity#B7D877
meta.selector.css entity.name.tag#f5f080
meta.selector.css entity.other.attribute-name.id#FFB454
meta.selector.css entity.other.attribute-name.class#b6d877
support.type.property-name.css#72AACA
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#F6F080
meta.preprocessor.at-rule keyword.control.at-rule#F6AA11
meta.property-value support.constant.named-color.css, meta.property-value constant#EDF080
meta.constructor.argument.css#EB939A
meta.diff, meta.diff.header#F8F8F8
markup.deleted#EB939A
markup.changed#72AACA
markup.inserted#B7D877
markup.deleted.git_gutter#EB939A
markup.changed.git_gutter#72AACA
markup.inserted.git_gutter#B7D877
markup.ignored.git_gutter#798188
markup.untracked.git_gutter#798188
sublimelinter.outline.notes
sublimelinter.outline.illegal
sublimelinter.underline.illegal
sublimelinter.outline.warning
sublimelinter.underline.warning
sublimelinter.outline.violation
sublimelinter.underline.violation
entity.other.attribute-name.id.html#FFB454
entity.other.attribute-name.html#EDF080
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#65A4A4
keyword.control.at-rule.import.css#f7f09d
variable.other.less#b6d877
entity.other.less.mixin#b6d877
source.css.less keyword.unit.css#EB939A
entity.other.attribute-name.angular.html, source.angular.embedded.html#FF3A83
constant.character.entity.html#F1E94B
variable.other.readwrite.instance.coffee#b6d877
meta.brace.round.coffee, meta.brace.square.coffee#F6F080
punctuation.section.embedded.coffee#b6d877
variable.assignment.coffee variable.assignment.coffee#FFFFFF
meta.delimiter.method.period.coffee#FFAA00
meta.brace.curly.coffee#b6d877
meta.tag.sgml.doctype.xml, declaration.sgml.html declaration.doctype, declaration.sgml.html declaration.doctype entity, declaration.sgml.html declaration.doctype string, declaration.xml-processing, declaration.xml-processing entity, declaration.xml-processing string, doctype#73817D
brackethighlighter.default#72AACA
level-1#452323
level0#234523
level1#232345
level2#454523
level3#452345
level4#234545
level5#634141
level6#416341
level7#414163
level8#636341
level9#634163
level10#416363

Shiki preview

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

Loading...

Flatland - Coding Theme