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#4b4563
  • activityBar.foreground#f4eef8
  • activityBar.inactiveForeground#b5aec5
  • activityBarBadge.background#d98fb0
  • activityBarBadge.foreground#231f31
  • badge.background#d98fb0
  • badge.foreground#241f30
  • button.background#8d7ab8
  • button.foreground#fff8fb
  • button.hoverBackground#9b88c5
  • chat.avatarBackground#8d7ab8
  • chat.avatarForeground#fff8fb
  • chat.checkpointSeparator#6d6487
  • chat.editedFileForeground#8fc4d8
  • chat.editor.background#4b4563
  • chat.linesAddedForeground#b8e1cf
  • chat.linesRemovedForeground#e18d99
  • chat.panel.background#4b4563
  • chat.requestBackground#4b4563
  • chat.requestBorder#7a7097
  • chat.requestBubbleBackground#5a5274
  • chat.requestBubbleHoverBackground#62597c
  • chat.requestCodeBorder#7a7097
  • chat.slashCommandBackground#746994
  • chat.slashCommandForeground#f3ecf6
  • chat.thinkingShimmer#d6a6cf
  • chatManagement.sashBorder#6d6487
  • descriptionForeground#b7afc8
  • dropdown.background#5a5274
  • dropdown.border#7a7097
  • editor.background#4b4563
  • editor.findMatchBackground#e9d6a466
  • editor.findMatchHighlightBackground#e9d6a433
  • editor.foreground#f3ecf6
  • editor.inactiveSelectionBackground#73688f55
  • editor.lineHighlightBackground#61597c
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#8478aa66
  • editor.selectionHighlightBackground#a492d033
  • editor.wordHighlightBackground#90c5d833
  • editor.wordHighlightStrongBackground#d99ab633
  • editorBracketHighlight.foreground1#f3ecf6
  • editorBracketHighlight.foreground2#8fc4d8
  • editorBracketHighlight.foreground3#d6a6cf
  • editorBracketHighlight.foreground4#efe0b1
  • editorBracketHighlight.foreground5#b8e1cf
  • editorBracketHighlight.foreground6#aab4ea
  • editorBracketHighlight.unexpectedBracket.foreground#e18d99
  • editorCursor.foreground#f6d6e6
  • editorError.foreground#e18d99
  • editorGroup.border#6d6487
  • editorGroupHeader.tabsBackground#4b4563
  • editorHint.foreground#b8e1cf
  • editorHoverWidget.background#5c5477
  • editorHoverWidget.border#7a7097
  • editorIndentGuide.activeBackground1#998fbc
  • editorIndentGuide.background#706789
  • editorIndentGuide.background1#706789
  • editorInfo.foreground#8fc4d8
  • editorLineNumber.activeForeground#f7f1fa
  • editorLineNumber.foreground#a89fb8
  • editorLink.activeForeground#8fc4d8
  • editorPane.background#4b4563
  • editorSuggestWidget.background#5a5274
  • editorSuggestWidget.border#7a7097
  • editorSuggestWidget.foreground#f1e9f5
  • editorSuggestWidget.selectedBackground#746994
  • editorWarning.foreground#e8c98c
  • editorWhitespace.foreground#7f759a
  • editorWidget.background#5a5274
  • editorWidget.border#7a7097
  • errorForeground#e18d99
  • focusBorder#8d7ab8
  • foreground#f3ecf6
  • inlineChat.background#5a5274
  • inlineChat.border#7a7097
  • inlineChat.foreground#f3ecf6
  • inlineChat.shadow#00000022
  • inlineChatInput.background#4d4667
  • inlineChatInput.border#7a7097
  • inlineChatInput.focusBorder#8d7ab8
  • inlineChatInput.placeholderForeground#aba2bc
  • input.background#4d4667
  • input.border#7a7097
  • input.foreground#f2ebf6
  • input.placeholderForeground#aba2bc
  • list.activeSelectionBackground#7d70a3
  • list.activeSelectionForeground#fff9fc
  • list.dropBackground#766a95
  • list.hoverBackground#6e648d
  • list.hoverForeground#f7f1fa
  • list.inactiveSelectionBackground#6a6087
  • list.inactiveSelectionForeground#f2ebf6
  • minimap.selectionHighlight#8478aa88
  • panel.background#4b4563
  • panel.border#6d6487
  • panelSection.border#6d6487
  • panelSectionHeader.background#5a5274
  • panelSectionHeader.foreground#f6eef9
  • panelTitle.activeForeground#fff7fb
  • panelTitle.inactiveForeground#c1b9cf
  • peekView.border#8d7ab8
  • peekViewEditor.background#524b6c
  • peekViewResult.background#5a5274
  • peekViewResult.selectionBackground#7b6fa0
  • peekViewTitle.background#62597c
  • quickInput.background#5a5274
  • quickInput.foreground#f2ebf6
  • quickInputList.focusBackground#746994
  • quickInputTitle.background#62597c
  • scrollbarSlider.activeBackground#ffffff44
  • scrollbarSlider.background#ffffff22
  • scrollbarSlider.hoverBackground#ffffff33
  • sideBar.background#4b4563
  • sideBar.border#6d6487
  • sideBar.foreground#eee6f3
  • sideBarSecondary.background#4b4563
  • sideBarSecondary.border#6d6487
  • sideBarSecondary.foreground#eee6f3
  • sideBarSectionHeader.background#62597c
  • sideBarSectionHeader.foreground#f6eef9
  • sideBarTitle.foreground#fff6fb
  • statusBar.background#9a7ad1
  • statusBar.debuggingBackground#d98fb0
  • statusBar.debuggingForeground#2d263b
  • statusBar.foreground#fff8fc
  • statusBar.noFolderBackground#8c6dc2
  • tab.activeBackground#4b4563
  • tab.activeForeground#fff7fb
  • tab.border#6d6487
  • tab.hoverBackground#665d82
  • tab.inactiveBackground#4b4563
  • tab.inactiveForeground#c7c0d4
  • terminal.ansiBlack#4d4765
  • terminal.ansiBlue#8fc4d8
  • terminal.ansiCyan#9ad7dd
  • terminal.ansiGreen#b8e1cf
  • terminal.ansiMagenta#d6a6cf
  • terminal.ansiRed#e18d99
  • terminal.ansiWhite#f3ecf6
  • terminal.ansiYellow#e8c98c
  • terminal.background#4f4868
  • terminal.foreground#f3ecf6
  • textLink.foreground#8fc4d8
  • titleBar.activeBackground#4b4566
  • titleBar.activeForeground#f5eff9
  • titleBar.inactiveBackground#4b4566
  • titleBar.inactiveForeground#c2bbd0
  • window.activeBorder#00000000
  • window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f3ecf6
comment#9a92aa
punctuation.definition.comment, comment punctuation.definition.comment#8f869f
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python, storage.type, storage.modifier, meta.preprocessor, constant.language, variable.language#bca7eabold
keyword.operator#f0e6ef
entity.name.function, support.function, meta.function-call, support.function.magic#b8e1cfbold
variable, variable.other.readwrite, variable.other.object, variable.other.object.property, variable.parameter, meta.definition.variable.name, support.variable#f0e1c2
meta.object-literal.key, meta.structure.dictionary.key.python, entity.other.attribute-name, variable.other.property, support.variable.property.dom#f4d4df
support.class, support.type, entity.name.type, entity.name.class, entity.name.type.module, support.function.builtin, support.constant.math, support.constant.dom, support.constant.json, meta.return-type, storage.type.function.arrow#8fc4d8bold
constant.numeric, constant.regexp, keyword.other.unit#aab4ea
string, string storage.type.string, markup.inline.raw#f0be9f
string.quoted.docstring.multi, string.quoted.docstring.multi storage.type.string#e9c9b6italic
constant.character.escape, punctuation.definition.string.template, punctuation.section.embedded.begin, punctuation.section.embedded.end#f4d4df
entity.name.function.decorator, entity.name.function.decorator support.type.python, meta.annotation, storage.type.annotation.java, storage.type.annotation.groovy#d998bc
variable.language.special, variable.parameter.function.language.special, variable.parameter.function-call.python#d998bc
constant, constant.other, constant.character, token.error-token, invalid#e18d99
entity.name.tag, punctuation.definition.tag, meta.selector#e8d7a7
markup.heading, markup.bold#f6eef9bold
markup.italic#f1e9f5italic
markup.inserted#b8e1cf
markup.deleted#e18d99
markup.changed#8fc4d8
beginning.punctuation.definition.quote.markdown, beginning.punctuation.definition.list.markdown, token.info-token, token.warn-token, token.debug-token#8fc4d8
Dream Dew by calico-moon - VS Code Theme