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.background#2e0c2a
  • activityBar.foreground#F5F7FA
  • activityBarBadge.background#CE3ECF
  • button.background#010821
  • contrastActiveBorder#CE3ECF
  • contrastBorder#141414
  • dropdown.background#2e0c2a
  • editor.background#2e0c2a
  • editor.foreground#F5F7FA
  • editor.lineHighlightBackground#2e0c2a
  • editor.selectionBackground#CE3ECF4D
  • editor.selectionHighlightBackground#CE3ECF90
  • editor.wordHighlightBackground#2B78FF4D
  • editor.wordHighlightStrongBackground#F287054D
  • editorCursor.foreground#F28705
  • editorGroupHeader.tabsBackground#2e0c2a
  • editorIndentGuide.activeBackground#CE3ECF
  • editorIndentGuide.background#2B78FF
  • editorLineNumber.activeForeground#F5F7FA
  • editorWhitespace.foreground#2B78FF
  • focusBorder#076DF2
  • git.blame.editorDecorationForeground#888888
  • gitDecoration.addedResourceForeground#39FF14
  • gitDecoration.conflictingResourceForeground#FF0066
  • gitDecoration.deletedResourceForeground#FF0066
  • gitDecoration.ignoredResourceForeground#888888
  • gitDecoration.modifiedResourceForeground#00CCFF
  • gitDecoration.renamedResourceForeground#CE3ECF
  • gitDecoration.stageDeletedResourceForeground#F23005
  • gitDecoration.stageModifiedResourceForeground#FF9900
  • gitDecoration.submoduleResourceForeground#AAAAAA
  • gitDecoration.untrackedResourceForeground#39FF14
  • inputOption.activeBorder#076DF2
  • list.activeSelectionBackground#CE3ECF
  • list.highlightForeground#F28705
  • list.hoverBackground#2B78FF
  • list.inactiveSelectionBackground#010821
  • menu.background#010821
  • menu.foreground#F5F7FA
  • minimap.selectionHighlight#CE3ECF4D
  • panelTitle.activeForeground#F5F7FA
  • peekView.border#2B78FF
  • pickerGroup.foreground#FFD380
  • ports.iconRunningProcessForeground#F5F7FA
  • quickInputList.focusBackground#CE3ECF
  • sideBar.background#2e0c2a
  • sideBarSectionHeader.background#2B78FF
  • statusBar.background#2e0c2a
  • statusBar.debuggingBackground#2e0c2a
  • statusBar.noFolderBackground#2e0c2a
  • statusBarItem.remoteBackground#2B78FF
  • tab.border#2e0c2a
  • tab.inactiveBackground#2c4875
  • tab.inactiveForeground#F5F7FA
  • tab.lastPinnedBorder#2B78FF
  • terminal.ansiBlack#2e0c2a
  • terminal.ansiBlue#2B78FF
  • terminal.ansiBrightBlack#2c4875
  • terminal.ansiBrightBlue#33CCFF
  • terminal.ansiBrightCyan#33FFFF
  • terminal.ansiBrightGreen#33FF99
  • terminal.ansiBrightMagenta#FF33B5
  • terminal.ansiBrightRed#F23005
  • terminal.ansiBrightWhite#F5F7FA
  • terminal.ansiBrightYellow#FFFF66
  • terminal.ansiCyan#56ADBC
  • terminal.ansiGreen#39FF14
  • terminal.ansiMagenta#CE3ECF
  • terminal.ansiRed#FF0066
  • terminal.ansiWhite#F5F7FA
  • terminal.ansiYellow#F28705
  • terminal.background#2e0c2a
  • terminal.border#5e1656
  • terminal.dropBackground#39FF1430
  • terminal.findMatchBackground#CE3ECF40
  • terminal.findMatchBorder#CE3ECF
  • terminal.findMatchHighlightBackground#CE3ECF20
  • terminal.findMatchHighlightBorder#CE3ECF
  • terminal.foreground#EEEEEE
  • terminal.hoverHighlightBackground#2e0c2a
  • terminal.inactiveSelectionBackground#39FF1420
  • terminal.initialHintForeground#888888
  • terminal.selectionBackground#39FF1440
  • terminal.tab.activeBorder#CE3ECF
  • terminalCommandDecoration.defaultBackground#444444
  • terminalCommandDecoration.errorBackground#FF0066
  • terminalCommandDecoration.successBackground#39FF14
  • terminalCommandGuide.foreground#AAAAAA
  • terminalCursor.background#0E1926
  • terminalCursor.foreground#FF0066
  • terminalOverviewRuler.border#2e0c2a
  • terminalOverviewRuler.cursorForeground#FF0066
  • terminalOverviewRuler.findMatchForeground#CE3ECF40
  • terminalStickyScroll.background#0E1926
  • terminalStickyScroll.border#2e0c2a
  • terminalStickyScrollHover.background#222222
  • titleBar.activeBackground#2e0c2a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#F5F7FA
meta.embedded, source.groovy.embedded, variable.legacy.builtin.python#F5F7FA
comment#9A9B99
string#9AA83A
string source#D08442
constant.numeric#6089B4
constant.language#408080
constant.character, constant.other#8080FF
keyword#6089B4
support#C7444A
storage#9872A2
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#F23005
entity.other.inherited-class, punctuation.separator.namespace.ruby#C7444A
entity.name.function#CE6700
entity.name.function, source.powershell variable.other.member, entity.name.operator.custom-literal#CE6700
variable.parameter#6089B4
entity.name.tag#9872A2
entity.other.attribute-name#9872A2
support.function#9872A2
keyword#888888
variable.other, variable.js, punctuation.separator.variable#6089B4
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#008200
invalid#F23005
variable.other.php, variable.other.normal#6089B4
meta.function-call.object#9872A2
variable.other.property#9872A2
keyword.control, keyword.operator.new.cpp, keyword.operator.delete.cpp, keyword.other.using, keyword.other.directive.using, keyword.other.operator#9872A2
meta.tag#D0B344
entity.name.tag#6089B4
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#9AA83A
meta.tag.inline source, text.html.php.source#9AA83A
meta.tag.other, entity.name.tag.style, entity.name.tag.script, meta.tag.block.script, source.js.embedded punctuation.definition.tag.html, source.css.embedded punctuation.definition.tag.html#9872A2
entity.other.attribute-name, meta.tag punctuation.definition.string#D0B344
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#6089B4
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#D0B344
meta.toc-list.id#9AA83A
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.end.html source, string.quoted.double.html source#9AA83A
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#6089B4
meta.selector entity.other.attribute-name.id#9872A2
source.css support.type.property-name#888888
meta.property-group support.constant.property-value, meta.property-value support.constant.property-value#C7444A
variable.language.js#CC555A
punctuation.definition.template-expression, punctuation.section.embedded.coffee#D08442
meta.template.expression#F5F7FA
meta.function-call.object.php#D0B344
punctuation.definition.string.end.php, punctuation.definition.string.begin.php#9AA83A
source.php.embedded.line.html#888888
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#D08442
constant.other.symbol.ruby#9AA83A
variable.language.ruby#D0B344
keyword.other.special-method.ruby#F28705
punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby#D08442
keyword.other.DML.sql#D0B344
meta.diff, meta.diff.header#F5F7FAitalic
markup.deleted#F23005
markup.changed#F28705
markup.inserted#219186
markup.quote#9872A2
markup.list#9AA83A
markup.bold, markup.italic#6089B4
markup.inline.raw#FF77AA
markup.heading#D0B344
markup.heading.setext#D0B344
markup.heading.markdown#ff0000bold
markup.quote.markdown, fenced_code.block.markdown#9872A2italic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#914BF2
markup.underline.link.markdown,markup.underline.link.image.markdown#6796e6italic underline
markup.italic.markdownitalic
markup.strikethroughstrikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown
punctuation.definition.list.begin.markdown
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#F23005
token.debug-token#b267e6
variable.language#C7444A
h3xsh VSCode Theme by h3xsh - VS Code Theme