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#DDD6C1
  • activityBar.foreground#584C27
  • activityBarBadge.background#B58900
  • badge.background#B58900AA
  • button.background#AC9D57
  • debugExceptionWidget.background#DDD6C1
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#DDD6C1
  • dropdown.background#EEE8D5
  • dropdown.border#D3AF86
  • editor.background#FDF6E3
  • editor.lineHighlightBackground#EEE8D5
  • editor.selectionBackground#D5CDB6
  • editorBracketHighlight.foreground1#825DC0
  • editorBracketHighlight.foreground2#00978A
  • editorBracketHighlight.foreground3#C44392
  • editorBracketHighlight.foreground4#006DCE
  • editorBracketHighlight.foreground5#BC5819
  • editorBracketHighlight.foreground6#428B00
  • editorBracketHighlight.unexpectedBracket.foreground#CC1729
  • editorBracketMatch.border#657B83A0
  • editorBracketPairGuide.activeBackground1#825DC0
  • editorBracketPairGuide.activeBackground2#00978A
  • editorBracketPairGuide.activeBackground3#C44392
  • editorBracketPairGuide.activeBackground4#006DCE
  • editorBracketPairGuide.activeBackground5#BC5819
  • editorBracketPairGuide.activeBackground6#428B00
  • editorCursor.background#EEE8D5
  • editorCursor.foreground#657B83
  • editorGhostText.foreground#90999590
  • editorGroup.border#DDD6C1
  • editorGroup.dropBackground#DDD6C1AA
  • editorGroupHeader.tabsBackground#D9D2C2
  • editorIndentGuide.activeBackground1#909995
  • editorIndentGuide.background1#D5CDB6
  • editorLineNumber.activeForeground#586E75
  • editorLink.activeForeground#006DCE
  • editorStickyScroll.background#EEE8D5
  • editorStickyScrollHover.background#586E7530
  • editorWhitespace.foreground#586E7580
  • editorWidget.background#EEE8D5
  • extensionButton.prominentBackground#B58900
  • extensionButton.prominentHoverBackground#584C27AA
  • focusBorder#D3AF86
  • input.background#EEE8D5
  • input.border#586E754A
  • input.foreground#586E75
  • input.placeholderForeground#586E75AA
  • inputOption.activeBorder#D3AF86
  • list.activeSelectionBackground#DFCA88
  • list.activeSelectionForeground#6C6C6C
  • list.focusBackground#DFCA8866
  • list.highlightForeground#B58900
  • list.hoverBackground#DFCA8844
  • list.inactiveSelectionBackground#D1CBB8
  • minimap.selectionHighlight#00212B40
  • notebook.cellEditorBackground#FBF3DB
  • notebook.editorBackground#FDF6E3
  • panel.border#DDD6C1
  • peekView.border#B58900
  • peekViewEditor.background#FDF6E3
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#EEE8D5
  • peekViewTitle.background#EEE8D5
  • pickerGroup.border#2AA19899
  • pickerGroup.foreground#2AA19899
  • ports.iconRunningProcessForeground#2AA19899
  • progressBar.background#B58900
  • selection.background#DFCA8866
  • sideBar.background#EEE8D5
  • sideBarTitle.foreground#586E75
  • statusBar.background#EEE8D5
  • statusBar.debuggingBackground#B58900
  • statusBar.foreground#073642
  • statusBar.noFolderBackground#EEE8D5
  • statusBarItem.prominentBackground#DDD6C1
  • statusBarItem.prominentHoverBackground#DDD6C199
  • statusBarItem.remoteBackground#AC9D57
  • tab.activeBackground#FDF6E3
  • tab.activeModifiedBorder#CB4B16
  • tab.border#DDD6C1
  • tab.inactiveBackground#D3CBB7
  • tab.inactiveForeground#586E75
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#006DCE
  • terminal.ansiBrightBlack#586e75
  • terminal.ansiBrightBlue#268BD2
  • terminal.ansiBrightCyan#2AA198
  • terminal.ansiBrightGreen#859900
  • terminal.ansiBrightMagenta#D33682
  • terminal.ansiBrightRed#DC322F
  • terminal.ansiBrightWhite#FBF3DB
  • terminal.ansiBrightYellow#B58900
  • terminal.ansiCyan#00978A
  • terminal.ansiGreen#428B00
  • terminal.ansiMagenta#C44392
  • terminal.ansiRed#CC1729
  • terminal.ansiWhite#EEE8D5
  • terminal.ansiYellow#A78300
  • terminal.background#FDF6E3
  • terminal.foreground#53676D
  • terminal.selectionBackground#DDD6C1
  • titleBar.activeBackground#EEE8D5
  • walkThrough.embeddedEditorBackground#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#DC322F
comment, punctuation.definition.comment#93A1A1italic
keyword, storage#8762C6
keyword.operator, punctuation, entity.name.function.operator, constant.other.color#2AA198
constant.character.escape#2AA198bold
keyword.other.unit, storage.type.numeric#009C8Fitalic
punctuation.definition.directive.c, punctuation.definition.directive.cpp, punctuation.definition.annotation.java#8762C6
constant, variable.other.constant, support.constant, meta.property-value.css#CB4B16
constant.numeric#C25D1E
string#489100
string.regexp#2AA198
constant.character, constant.other.placeholder#CB4B16
variable#53676D
variable.language#DC322F
support.other.variable#CF4B56
variable.parameter#657B83italic
entity.name.label#53676D
entity.name.type, entity.name.namespace#B58900
entity.name.function, variable.function#268BD2bold
support.function, support.function.magic#009C8Fbold
entity.name.class, entity.name.type.class, support.type, support.class#B58900
constant.other.enum.java#00978A
source.python#B58900italic
support.variable.magic.python#53676D
storage.type.string.pythonbold
punctuation.definition.decorator.python#268BD2bold
variable.parameter.function.language.special.self.python#C25D1Eitalic
support.function.js, meta.class.js#268BD2
source.sql#53676D
entity.name.tag#CF4B56
entity.other.attribute-name#6C71C4
text.html.derivative, meta.jsx, text.svelte#53676D
entity.name.tag.css#CF4B56
entity.other.attribute-name.css, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#6C71C4
entity.other.keyframe-offset.css#CF4B56
meta.property-value.css#CB4B16
markup.heading.markdown#489100
punctuation.definition.heading.markdown#CF4B56
text.html.markdown#53676D
markup.bold.markdownbold
markup.italic.markdownitalic
punctuation.definition.list.begin.markdown#268BD2
string.other.link.title.markdown#268BD2
string.other.link.description.markdown#CF4B56
markup.underline.link.markdown, markup.underline.link.image.markdown#489100underline
fenced_code.block.languagebold
markup.inline.raw.string.markdown#CB4B16
markup.quote.markdown#93A1A1italic
meta.separator.markdown#93A1A1bold
markup.strikethrough.markdownstrikethrough
entity.name.tag.yaml#B58900
entity.name.type.anchor.yaml, variable.other.alias.yaml#2AA198
keyword.control.flow.block-scalar.folded.yaml, keyword.control.flow.block-scalar.literal.yaml#2AA198bold
entity.name.section.group-title.ini#B58900
keyword.other.definition.ini#B58900
source.ini#CB4B16
entity.name.tag.xml, entity.name.tag.localname.xml#CF4B56
entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml#6C71C4
text.xml#53676D
source.dockerfile#CB4B16
source.makefile#CB4B16
source.cmake#CB4B16
meta.context.http.nginx, source.nginx#53676D
entity.name.context.location.nginx, string.regexp.nginx#268BD2bold
meta.context.server.nginx#489100
Solarized Light Enhanced by Kasen - VS Code Theme