Skip to main content
Coding Theme

Color themes

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#0c1a25
  • activityBar.dropBackground#ffb59a80
  • activityBarBadge.background#ffb59a
  • activityBarBadge.foreground#111111
  • badge.background#ffb59a
  • badge.foreground#111111
  • button.background#ffb59a
  • button.foreground#111111
  • debugToolBar.background#0c1a25
  • dropdown.background#0e1e2b
  • editor.background#09131b
  • editor.foreground#FFFFFF
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorCursor.foreground#fff7ad
  • editorGroup.dropBackground#ffb59a80
  • editorGroup.focusedEmptyBorder#ffb59a
  • editorGroupHeader.tabsBackground#0a1620
  • editorHoverWidget.background#0a1620
  • editorLineNumber.activeForeground#ffb59a
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#0a1620
  • editorWidget.background#0a1620
  • focusBorder#7e2200
  • foreground#FFFFFF
  • input.background#0e1e2b
  • inputOption.activeBorder#ffb59a
  • list.activeSelectionBackground#ffb59a80
  • list.activeSelectionForeground#f8f8f8
  • list.dropBackground#ffb59a80
  • list.focusBackground#ffb59a80
  • list.focusForeground#f8f8f8
  • list.highlightForeground#ffb59a
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#0a1620
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#FFFFFF80
  • panelTitle.inactiveForeground#FFFFFF80
  • peekView.border#ffb59a
  • peekViewEditor.background#070f15
  • peekViewResult.background#0a1620
  • peekViewTitle.background#09131b
  • pickerGroup.border#FFFFFF1a
  • sash.hoverBorder#ffb59a
  • selection.background#ffb59a
  • sideBar.background#0a1620
  • sideBarSectionHeader.background#0c1a25
  • statusBar.background#070f15
  • statusBar.debuggingBackground#ffb59a
  • statusBar.debuggingForeground#111111
  • statusBar.noFolderBackground#070f15
  • statusBarItem.activeBackground#ffb59a80
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#ffb59a
  • statusBarItem.remoteForeground#111111
  • tab.activeBorder#ffb59a
  • tab.activeModifiedBorder#ffb59a
  • tab.border#00000033
  • tab.inactiveBackground#0c1a25
  • tab.inactiveModifiedBorder#993c1c
  • tab.lastPinnedBorder#ffb59a
  • tab.unfocusedActiveModifiedBorder#cc5025
  • tab.unfocusedInactiveModifiedBorder#993c1c
  • titleBar.activeBackground#070f15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#FFFFFF
string#8df1c9
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#b4fde0
constant.language.boolean#ffb59a
constant.numeric#fff7ad
variable, support.variable, support.class, support.constant, meta.definition.variable, entity.name.function#a8a2ff
variable.other.constant#ffa2b6
keyword, modifier, variable.language.this, support.type.object, constant.language#bae0f8
keyword.control.flow.js#fff7ad
entity.name.function, support.function#fff7ad
storage.type, storage.modifier, keyword.operator.expression#ffb59a
support.module, support.node#ff9746italic
support.type#ffca75
entity.name.type, entity.other.inherited-class#ffca75
comment#577997italic
entity.name.type.class#ffca75underline
variable.object.property, meta.field.declaration entity.name.function#bae0f8
meta.definition.method entity.name.function#bae0f8
meta.function, entity.name.function#bae0f8
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#ffb59a
meta.embedded, source.groovy.embedded, meta.template.expression#FFFFFF
entity.name.tag.yaml#ff9746
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#bae0f8
constant.language.json#ffb59a
entity.other.attribute-name.class#ffb59a
entity.other.attribute-name.id#8df1c9
source.css entity.name.tag#bae0f8
meta.tag, punctuation.definition.tag#ffb59a
entity.name.tag#ffcfab
entity.other.attribute-name#fff7ad
markup.heading#ffb59a
text.html.markdown meta.link.inline, meta.link.reference#ff9746
text.html.markdown beginning.punctuation.definition.list#ffb59a
markup.italic#ff9746italic
markup.bold#ff9746bold
markup.bold markup.italic, markup.italic markup.bold#ff9746italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#8df1c9
markup.inline.raw.string.markdown#8df1c9
punctuation.definition.heading.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown, markup.fenced_code.block.markdown, meta.separator.markdown#356ea0
keyword.other.definition.ini#ff9746
entity.name.section.group-title.ini#ffb59a
source.cs meta.class.identifier storage.type#bae0f8underline
source.cs meta.method.identifier entity.name.function#bae0f8
source.cs meta.method-call meta.method, source.cs entity.name.function#fff7ad
source.cs storage.type#bae0f8
source.cs meta.method.return-type#bae0f8
source.cs meta.preprocessor#1b3951
source.cs entity.name.type.namespace#FFFFFF
Global settings#FFFFFF
modifier, this, comment, storage.modifier.js, storage.modifier.ts, storage.modifier.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.html, keyword.control.flow.jsitalic
codeSTACKr Theme by codestackr - VS Code Theme