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#e8eeda
  • activityBar.foreground#2f2f2f
  • activityBarBadge.background#fdf2f2
  • activityBarBadge.foreground#2f2f2f
  • badge.background#fdf2f2
  • badge.foreground#2f2f2f
  • breadcrumb.foreground#d6baa2
  • button.background#43bf83
  • checkbox.background#43bf83
  • dropdown.background#e8eeda
  • dropdown.foreground#2f2f2f
  • editor.background#FDF6E3
  • editor.findMatchBackground#ffefb9
  • editor.findMatchBorder#f7b85a
  • editor.findMatchHighlightBackground#ffefb9
  • editor.foreground#ca9494
  • editor.hoverHighlightBackground#f8e9e9
  • editor.inactiveSelectionBackground#8e81952d
  • editor.lineHighlightBackground#fde4cc
  • editor.selectionBackground#ebd8f589
  • editor.selectionHighlightBorder#f7b85a
  • editor.wordHighlightBackground#ffffff00
  • editor.wordHighlightBorder#f7b85a
  • editor.wordHighlightStrongBackground#fdf036
  • editor.wordHighlightStrongBorder#f7b85a
  • editorBracketMatch.background#2f2f2f
  • editorBracketMatch.border#2f2f2f
  • editorCursor.background#ffffff
  • editorCursor.foreground#ff00ff
  • editorGroup.border#ecd0b7
  • editorGroup.dropBackground#e8eeda9e
  • editorGroupHeader.tabsBackground#e8eeda
  • editorIndentGuide.activeBackground#696565
  • editorIndentGuide.background#ffffff00
  • editorWhitespace.foreground#cec2a8
  • editorWidget.background#fdf2f2
  • focusBorder#2f2f2f
  • gitDecoration.ignoredResourceForeground#ccb2b2
  • gitDecoration.untrackedResourceForeground#51a069
  • gitlens.trailingLineForegroundColor#d6baa2
  • input.border#fdf2f2
  • inputOption.activeBackground#abe1ba
  • list.activeSelectionBackground#abe1ba
  • list.dropBackground#fafff1
  • list.errorForeground#e46273
  • list.focusBackground#fac1c1
  • list.highlightForeground#2f2f2f
  • list.hoverBackground#fff9f9
  • list.inactiveSelectionBackground#abe1ba76
  • list.warningForeground#c7a442
  • panel.background#e8eeda
  • peekViewEditor.matchHighlightBackground#ff0000
  • pickerGroup.foreground#8c8b8b
  • progressBar.background#abe1ba
  • quickInput.foreground#696565
  • scrollbar.shadow#cec6a17d
  • scrollbarSlider.activeBackground#d5b45b45
  • scrollbarSlider.background#d5b45b45
  • scrollbarSlider.hoverBackground#d5b45b45
  • sideBar.background#e8eeda
  • sideBar.foreground#8c8b8b
  • sideBarSectionHeader.background#e8eeda
  • statusBar.background#e8eeda
  • statusBar.foreground#8c8b8b
  • statusBar.noFolderBackground#e8eeda
  • tab.activeForeground#2f2f2f
  • tab.inactiveBackground#e8eeda
  • tab.inactiveForeground#8c8b8b
  • tab.unfocusedActiveForeground#8c8b8b
  • widget.shadow#cec6a17d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
text.html, meta.jsx#a2b5d6
keyword.operator#d53cc5
punctuation.accessor, punctuation.separator, punctuation.terminator, support.type#b68ca8
punctuation.section, punctuation.terminator.statement, punctuation.curlybrace, punctuation.parenthesis, punctuation.definition.directive, punctuation.definition.capture, punctuation.definition.parameters, punctuation.definition.block, punctuation.definition.binding-pattern, punctuation.definition.template-expression, punctuation.definition.keyword, punctuation.separator.scope-resolution, meta.brace, meta.structure, meta.object-binding-pattern-variable, meta.function.definition.parameters, keyword.control.directive#e2c1b5
meta.import, keyword.control.import, keyword.control.from#696565
string, constant.other.symbol, constant.language, punctuation.definition.string#91a7cc
constant.numeric, entity.other.inherited-class, keyword.other.unit, meta.parens#c396ce
entity.name.function, support.function, support.function.any-method, storage.function, storage.type.function.arrow, keyword.other.special-method, support.variable.object.process#4b9895
meta.function-callitalic
keyword, punctuation.definition.keyword#39ADB5
keyword.control.export, keyword.control.defaultitalic
storage.modifier, variable.parameter, variable.parameter.function, variable.other.constant, meta.function.definition.body.lambda, entity.name.variable.local, variable.other.readwrite, meta.embedded.expression, entity.name.variable.parameter, variable.other.object.access, variable.object.property, support.variable.property, variable.scss, variable.argument.css#9a47c7
variable.language.this, keyword.other.this#daaaaa
support.type.primitive, entity.name.type, keyword.type, keyword.other.set, keyword.other.get, storage.type, support.class.builtin#da76dd
entity.name.variable, variable.other.object, variable.other.property, variable.other.constant.property, meta.definition.variable, storage.type.class, storage.type.interface, storage.modifier#c7aae4
storage.modifieritalic
entity.name.type.class, entity.name.scope-resolution, meta.object, support.class.component, entity.other.attribute-name.class#b65aaa
entity.name.type, support.type.primitiveitalic
punctuation.definition.comment, comment#bfbfccitalic
support.class.console, support.function.console#f80303
meta.tag, entity.name.tag, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.html#7e4b96
entity.other.attribute-name, entity.name.tag.yaml, punctuation.definition.block.sequence.item.yaml#b386ab
text.html.markdown#7e737c
Oasis by oasis banner - VS Code Theme