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#ffffff00
  • activityBar.activeBorder#00f8f8
  • activityBar.activeFocusBorder#00f8f8
  • activityBar.background#191919
  • activityBar.border#101010
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff20
  • activityBarBadge.background#ffffff
  • activityBarBadge.foreground#181818
  • badge.background#1f1f1f
  • breadcrumb.background#181818
  • button.background#141414
  • button.foreground#ffffff
  • contrastBorder#101010
  • dropdown.background#202020
  • dropdown.border#00000000
  • editor.background#141414
  • editor.findMatchBackground#ff91003d
  • editor.findMatchBorder#ff9100
  • editor.findMatchHighlightBorder#ff9100
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#ff91003d
  • editor.lineHighlightBackground#ffffff05
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#ffffff20
  • editor.wordHighlightBackground#ff91003d
  • editor.wordHighlightBorder#ff9100
  • editorCursor.foreground#d3af86
  • editorGroup.border#101010
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#101010
  • editorHoverWidget.background#181818
  • editorIndentGuide.activeBackground#00f8f8
  • editorIndentGuide.background#ffffff10
  • editorLineNumber.activeForeground#adadad
  • editorLineNumber.foreground#ffffff20
  • editorOverviewRuler.border#00000000
  • editorRuler.foreground#D3AF86
  • editorWhitespace.foreground#ffffff10
  • editorWidget.background#161616
  • editorWidget.border#101010
  • editorWidget.resizeBorder#00f8f8
  • focusBorder#04040400
  • input.background#202020
  • input.border#00000000
  • inputOption.activeBorder#00f8f8
  • inputValidation.errorBackground#5f0d0d
  • inputValidation.errorBorder#e05d10
  • inputValidation.infoBackground#2b2a42
  • inputValidation.infoBorder#1b60a5
  • inputValidation.warningBackground#51412c
  • list.activeSelectionBackground#ffffff10
  • list.focusBackground#ffffff10
  • list.highlightForeground#e3b583
  • list.hoverBackground#ffffff10
  • list.inactiveSelectionBackground#ffffff10
  • menu.background#181818
  • menu.border#101010
  • menu.foreground#cccccc
  • menu.selectionBackground#ffffff10
  • menu.separatorBackground#101010
  • menubar.selectionBackground#ffffff10
  • merge.border#101010
  • minimap.selectionHighlight#84613daa
  • notificationCenter.border#101010
  • notifications.background#181818
  • panel.border#101010
  • panelInput.border#101010
  • peekView.border#101010
  • peekViewEditor.background#181818
  • peekViewEditor.matchHighlightBackground#84613daa
  • peekViewResult.background#362712
  • peekViewTitle.background#362712
  • pickerGroup.border#e3b583
  • pickerGroup.foreground#e3b583
  • progressBar.background#00f8f8
  • scrollbar.shadow#04040400
  • searchEditor.findMatchBackground#181818
  • searchEditor.findMatchBorder#101010
  • selection.background#84613daa
  • sideBar.background#171717
  • sideBar.border#101010
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#101010
  • statusBar.background#181818
  • statusBar.border#101010
  • statusBar.debuggingBackground#423523
  • statusBar.foreground#ffffff50
  • statusBar.noFolderBackground#161616
  • statusBarItem.remoteBackground#00000000
  • statusBarItem.remoteForeground#ffffff50
  • tab.activeBackground#141414
  • tab.activeBorder#00f8f8
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#00f8f8
  • tab.border#101010
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#ffffff80
  • tab.inactiveModifiedBorder#a7a7a780
  • tab.unfocusedActiveBackground#141414
  • tab.unfocusedActiveBorder#00f8f857
  • tab.unfocusedActiveForeground#ffffff80
  • tab.unfocusedActiveModifiedBorder#c4c4c480
  • tab.unfocusedInactiveForeground#ffffff40
  • tab.unfocusedInactiveModifiedBorder#bbbbbb40
  • terminal.border#101010
  • textLink.activeForeground#00f8f8
  • textLink.foreground#00f8f8
  • textSeparator.foreground#101010
  • titleBar.activeBackground#202020
  • titleBar.border#101010
  • titleBar.inactiveBackground#202020
  • tree.indentGuidesStroke#00f8f8
  • widget.shadow#04040400

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#D3AF86
variable.parameter.function#D3AF86
comment, punctuation.definition.comment#A57A4C
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#D3AF86
none#D3AF86
keyword.operator#D3AF86
keyword, keyword.control, keyword.operator.new.cpp, keyword.operator.delete.cpp, keyword.other.using, keyword.other.operator#98676A
variable#ee7dc8
entity.name.function, meta.require, support.function.any-method#8AB1B0
support.class, entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#F06431
keyword.other.special-method#8AB1B0
storage#98676A
support.function#7E602C
string, constant.other.symbol, entity.other.inherited-class#d8a6f0
constant.numeric#F79A32
none#F79A32
none#F79A32
constant#F79A32
entity.name.tag#ee7dc8
entity.other.attribute-name#F79A32
entity.other.attribute-name.id, punctuation.definition.entity#8AB1B0
meta.selector#98676A
none#F79A32
markup.heading, markup.heading.setext, punctuation.definition.heading, entity.name.section#8AB1B0
keyword.other.unit#F79A32
markup.bold, punctuation.definition.bold#F06431bold
markup.italic, punctuation.definition.italic#98676Aitalic
markup.inline.raw#889B4A
string.other.link#ee7dc8
meta.link#F79A32
markup.list#ee7dc8
markup.quote#F79A32
meta.separator#D3AF86
markup.inserted#889B4A
markup.deleted#ee7dc8
markup.changed#98676A
constant.other.color#7E602C
string.regexp#7E602C
constant.character.escape#7E602C
punctuation.section.embedded, variable.interpolation#088649
invalid.illegal#ee7dc8
comment#686868
punctuation.definition.comment#686868
string#D3AF86
meta.embedded.assembly#FF9318
keyword - keyword.operator#ee7dc8
keyword.control#ee7dc8
storage#ee7dc8
storage.type#ee7dc8
constant.numeric#FF9318
entity.name.type#EE7DC8
entity.name.class#EE7DC8
support.type#EE7DC8
support.class#EE7DC8
entity.name.function#00F8F8
support.function#00F8F8
variable#FFFFFF
entity.name.variable#FFFFFF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

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

Loading...

Artemis - Coding Theme