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.activeBackground#d2b48c13
  • activityBar.activeBorder#d2b48c
  • activityBar.activeFocusBorder#d2b48c
  • activityBar.background#1c2427
  • activityBar.dropBorder#d2b48c
  • activityBar.inactiveForeground#cccccc
  • activityBarBadge.background#d2b48c
  • activityBarBadge.foreground#304e37
  • badge.background#d2b48c
  • badge.foreground#304e37
  • button.background#cccccc
  • button.foreground#1c2427
  • button.hoverBackground#D1DED3
  • checkbox.background#7eb08a50
  • checkbox.foreground#1c2427
  • debugIcon.breakpointForeground#7eb08a
  • debugToolBar.background#273136
  • diffEditor.insertedTextBackground#7eb08a30
  • diffEditor.insertedTextBorder#7eb08a
  • diffEditor.removedTextBackground#8fb99635
  • diffEditor.removedTextBorder#8fb996
  • dropdown.background#323e45
  • dropdown.border#323e45
  • editor.background#273136
  • editor.findMatchBorder#d2b48c
  • editor.findMatchHighlightBackground#D1DED330
  • editor.foldBackground#d2b48c30
  • editor.foreground#D1DED3
  • editor.hoverHighlightBackground#d2b48c44
  • editor.lineHighlightBackground#323e45
  • editor.selectionBackground#7eb08a30
  • editor.selectionHighlightBackground#7eb08a39
  • editor.wordHighlightBackground#d2b48c1b
  • editor.wordHighlightBorder#d2b48c
  • editor.wordHighlightStrongBackground#d2b48c11
  • editor.wordHighlightStrongBorder#d2b48c4e
  • editor.wordHighlightTextBorder#d2b48c4e
  • editorBracketHighlight.foreground1#7eb08a
  • editorBracketHighlight.foreground2#ff819f
  • editorBracketHighlight.foreground3#d2b48c
  • editorBracketHighlight.foreground4#ba8eaf
  • editorBracketHighlight.foreground5#7ea4b0
  • editorBracketHighlight.foreground6#8A7EB0
  • editorBracketHighlight.unexpectedBracket.foreground#D1DED3
  • editorBracketMatch.background#1c2427
  • editorBracketMatch.border#D1DED3
  • editorBracketPairGuide.activeBackground1#7eb08a
  • editorBracketPairGuide.activeBackground2#ff819f
  • editorBracketPairGuide.activeBackground3#d2b48c
  • editorBracketPairGuide.activeBackground4#ba8eaf
  • editorBracketPairGuide.activeBackground5#7ea4b0
  • editorBracketPairGuide.activeBackground6#8A7EB0
  • editorCodeLens.foreground#d2b48c
  • editorCursor.background#273136
  • editorCursor.foreground#7eb08a
  • editorError.foreground#7eb08a
  • editorGroup.border#273136
  • editorGroup.dropBackground#d2b48c30
  • editorGroupHeader.noTabsBackground#1c2427
  • editorGroupHeader.tabsBackground#1c2427
  • editorGutter.addedBackground#7eb08a
  • editorGutter.background#273136
  • editorGutter.deletedBackground#7eb08a
  • editorGutter.modifiedBackground#ba8eaf
  • editorHoverWidget.background#273136
  • editorHoverWidget.border#7eb08a80
  • editorInfo.foreground#d2b48c
  • editorInlayHint.background#d2b48c30
  • editorInlayHint.foreground#d2b48cCC
  • editorInlayHint.parameterBackground#d2b48c30
  • editorInlayHint.parameterForeground#d2b48cCC
  • editorInlayHint.typeBackground#7ea4b030
  • editorInlayHint.typeForeground#7ea4b0CC
  • editorLineNumber.activeForeground#D1DED3
  • editorLineNumber.foreground#D1DED350
  • editorLink.activeForeground#d2b48c
  • editorMarkerNavigation.background#1c2427
  • editorMarkerNavigationError.background#7eb08a
  • editorMarkerNavigationInfo.background#d2b48c
  • editorMarkerNavigationWarning.background#ba8eaf
  • editorOverviewRuler.addedForeground#7eb08a
  • editorOverviewRuler.border#d2b48c
  • editorOverviewRuler.bracketMatchForeground#d2b48c
  • editorOverviewRuler.deletedForeground#7eb08a
  • editorOverviewRuler.errorForeground#7eb08a
  • editorOverviewRuler.infoForeground#d2b48c
  • editorOverviewRuler.modifiedForeground#ba8eaf
  • editorOverviewRuler.selectionHighlightForeground#d2b48c51
  • editorOverviewRuler.warningForeground#ba8eaf
  • editorPane.background#032139
  • editorRuler.foreground#d2b48c
  • editorSuggestWidget.background#323e45
  • editorSuggestWidget.border#7eb08a80
  • editorSuggestWidget.highlightForeground#7eb08a
  • editorUnnecessaryCode.border#d2b48c
  • editorUnnecessaryCode.opacity#d2b48c
  • editorWarning.border#ba8eaf
  • editorWarning.foreground#ba8eaf
  • editorWhitespace.foreground#304e37
  • editorWidget.background#1c2427
  • editorWidget.resizeBorder#d2b48c
  • errorForeground#7eb08a
  • extensionButton.prominentBackground#d2b48c
  • extensionButton.prominentForeground#304e37
  • extensionButton.prominentHoverBackground#ff819f
  • focusBorder#d2b48c80
  • foreground#D1DED3
  • gitDecoration.addedResourceForeground#7eb08a
  • gitDecoration.conflictingResourceForeground#7eb08a
  • gitDecoration.deletedResourceForeground#7eb08a
  • gitDecoration.ignoredResourceForeground#d2b48c
  • gitDecoration.modifiedResourceForeground#ba8eaf
  • gitDecoration.renamedResourceForeground#ba8eaf
  • gitDecoration.stageDeletedResourceForeground#7eb08a
  • gitDecoration.stageModifiedResourceForeground#ba8eaf
  • gitDecoration.untrackedResourceForeground#7eb08a
  • input.background#273136
  • input.border#323e45
  • inputOption.activeBorder#7eb08a
  • inputValidation.errorBackground#7eb08a
  • inputValidation.errorBorder#7eb08a
  • inputValidation.errorForeground#273136
  • inputValidation.infoBackground#d2b48c
  • inputValidation.infoBorder#d2b48c
  • inputValidation.infoForeground#273136
  • inputValidation.warningBackground#ba8eaf
  • inputValidation.warningBorder#ba8eaf
  • inputValidation.warningForeground#273136
  • list.activeSelectionBackground#d2b48c20
  • list.dropBackground#d2b48c20
  • list.errorForeground#d2b48c
  • list.focusBackground#d2b48c30
  • list.highlightForeground#7eb08a
  • list.hoverBackground#d2b48c20
  • list.inactiveSelectionBackground#d2b48c25
  • list.warningForeground#d2b48c
  • menu.background#1c2427
  • menu.foreground#D1DED3
  • menu.selectionBackground#d2b48cDD
  • menu.selectionForeground#304e37
  • menu.separatorBackground#D1DED3
  • minimap.background#273136
  • minimap.errorHighlight#d2b48c
  • minimap.selectionHighlight#d2b48c80
  • minimap.warningHighlight#ba8eaf
  • minimapGutter.addedBackground#7eb08a
  • minimapGutter.deletedBackground#7eb08a
  • minimapGutter.modifiedBackground#ba8eaf
  • notifications.background#1c2427
  • notificationsErrorIcon.foreground#d2b48c
  • notificationsInfoIcon.foreground#d2b48c
  • notificationsWarningIcon.foreground#d2b48c
  • panel.background#1c2427
  • panel.border#304e37
  • panel.dropBorder#d2b48c
  • panelTitle.activeBorder#d2b48c
  • peekView.border#7eb08a44
  • peekViewEditor.background#1C2427
  • peekViewEditor.matchHighlightBackground#1c2427
  • peekViewEditor.matchHighlightBorder#ff819f
  • peekViewResult.background#323e45
  • peekViewResult.matchHighlightBackground#273136
  • peekViewResult.selectionBackground#1c2427
  • peekViewTitle.background#273136
  • pickerGroup.border#1c2427
  • pickerGroup.foreground#d2b48c
  • ports.iconRunningProcessForeground#DB7E58
  • problemsErrorIcon.foreground#7eb08a
  • problemsInfoIcon.foreground#d2b48c
  • problemsWarningIcon.foreground#ba8eaf
  • progressBar.background#d2b48c
  • quickInput.background#273136
  • quickInput.foreground#D1DED3
  • quickInputList.focusBackground#273136
  • quickInputList.focusForeground#D1DED3
  • quickInputList.focusIconForeground#7eb08a
  • scrollbar.shadow#1c2427
  • scrollbarSlider.activeBackground#D1DED3
  • scrollbarSlider.background#7eb08a30
  • scrollbarSlider.hoverBackground#d2b48c
  • selection.background#d2b48c80
  • settings.modifiedItemIndicator#ba8eaf
  • sideBar.background#323E45
  • sideBarSectionHeader.background#273136
  • statusBar.background#273136
  • statusBar.debuggingBackground#7eb08ada
  • statusBar.debuggingForeground#273136
  • statusBar.foreground#D1DED3
  • statusBar.noFolderBackground#7eb08ada
  • statusBar.noFolderForeground#273136
  • statusBarItem.hoverBackground#304e3730
  • statusBarItem.prominentBackground#304e3730
  • statusBarItem.prominentForeground#273136
  • statusBarItem.prominentHoverBackground#7eb08a
  • statusBarItem.remoteBackground#273136
  • statusBarItem.remoteForeground#D1DED3
  • tab.activeBackground#273136
  • tab.activeBorder#7eb08a
  • tab.activeModifiedBorder#ba8eaf
  • tab.border#1c2427
  • tab.hoverBackground#323e45
  • tab.inactiveBackground#1c2427
  • tab.lastPinnedBorder#d2b48c50
  • terminal.ansiBlack#323E45
  • terminal.ansiBlue#7EA4B0
  • terminal.ansiBrightBlack#323E45
  • terminal.ansiBrightBlue#7EA4B0
  • terminal.ansiBrightCyan#7ea4b0
  • terminal.ansiBrightGreen#7eb08a
  • terminal.ansiBrightMagenta#ba8eaf
  • terminal.ansiBrightRed#8fb996
  • terminal.ansiBrightWhite#D1DED3
  • terminal.ansiBrightYellow#d2b48c
  • terminal.ansiCyan#7ea4b0
  • terminal.ansiGreen#7eb08a
  • terminal.ansiMagenta#ba8eaf
  • terminal.ansiRed#8fb996
  • terminal.ansiWhite#D1DED3
  • terminal.ansiYellow#d2b48c
  • terminal.selectionBackground#d2b48c30
  • terminalCursor.background#273136
  • terminalCursor.foreground#7eb08a
  • textLink.activeForeground#d2b48c
  • textLink.foreground#d2b48c
  • textPreformat.foreground#7eb08a
  • textSeparator.foreground#1c2427
  • titleBar.activeBackground#273136
  • titleBar.border#304e37
  • titleBar.inactiveBackground#1c2427
  • widget.shadow#1c2427

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#C5C8C6
meta.embedded, source.groovy.embedded, variable.legacy.builtin.python#C5C8C6
comment#9A9B99
string#D1DED3
string source#D1DED3
constant.numeric#D1DED3
constant.language#408080
constant.character, constant.other#8080FF
support#D1DED3
storage#9872A2
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#D1DED3
entity.other.inherited-class, punctuation.separator.namespace.ruby#D1DED3
entity.name.function#D1DED3
variable.parameter#6089B4
support.function#9872A2
keyword#676867
variable.other, variable.js, punctuation.separator.variable#6089B4
invalid#7eb08a
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#676867
meta.property-group support.constant.property-value, meta.property-value support.constant.property-value#CE6700
variable.language.js#CE6700
punctuation.definition.template-expression, punctuation.section.embedded.coffee#D08442
meta.template.expression#C5C8C6
meta.function-call.object.php#D0B344
punctuation.definition.string.end.php, punctuation.definition.string.begin.php#9AA83A
source.php.embedded.line.html#676867
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#D9B700
punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby#D08442
keyword.other.DML.sql#D0B344
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#7eb08a
markup.changed#cb4b16
markup.inserted#219186
markup.quote#9872A2
markup.list#9AA83A
markup.bold, markup.italic#6089B4
markup.inline.raw#FF0080
markup.heading#D0B344
markup.heading.setext#D0B344
markup.heading.markdownbold
markup.quote.markdown#9AA83Aitalic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#AE81FF
markup.underline.link.markdown,markup.underline.link.image.markdown#AE81FF
markup.italic.markdownitalic
markup.strikethroughstrikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown#9AA83A
punctuation.definition.list.begin.markdown#9AA83A
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#7eb08a
token.debug-token#b267e6
variable.language#d2b48c
keyword.other.import.java, keyword.other.package.java, keyword.other.import.kotlin, keyword.other.package.kotlin, storage.modifier.java, storage.modifier.kotlin, keyword.control.java, keyword.control.kotlin, keyword.operator.instanceof.java, keyword.operator.new.java#ba8eaf
storage.type.annotation.java, storage.type.annotation.kotlin, punctuation.definition.annotation.java, punctuation.definition.annotation.kotlin#d2b48c
entity.name.type.class.java, entity.name.type.class.kotlin, entity.name.type.interface.java, entity.name.type.interface.kotlin#7ea4b0
keyword.other.kotlin, storage.type.kotlin, keyword.operator.declaration.kotlin#ba8eafitalic
string.quoted.double.kotlin, punctuation.definition.string.begin.kotlin, punctuation.definition.string.end.kotlin, variable.parameter.kotlin#9AA83A
storage.type.generic.java, storage.type.generic.kotlin, storage.type.java, storage.type.kotlin, storage.type.object.array.java#8A7EB0
entity.name.function.java, entity.name.function.kotlin#D1DED3
variable.other.property.kotlin, variable.other.object.property.kotlin#D1DED3
entity.name.type.object.kotlin, variable.language.kotlin#D1DED3italic
string.quoted.double.terminal, string.quoted.single.terminal#A7CCCF
constant.numeric.terminal#E1C185
keyword.terminal#C99178
comment.terminal#7C9C97italic
entity.name.function.terminal#B5CEA8
entity.name.class.terminal#8FB6CC
variable.other.terminal#D4AA9A
meta.function-call.terminal#e7e7a9
entity.name.tag.terminal#9CDCFE
entity.other.attribute-name.terminal#CE9178
variable.parameter.function.terminal#AAB9C5
variable.parameter.function.type.terminal#C4C1B8
variable.parameter.function.name.terminal#C3CEA3
variable.parameter.function.value.terminal#B88E84
meta.function.decorator.python, entity.name.function.decorator.python#D9B07Eitalic
entity.name.tag.jsx, entity.name.tag.tsx#AC9DB1
meta.property-value.css, support.constant.property-value.css#93AD88
meta.object-literal.key.js, meta.object-literal.key.ts#BFA89E
markup.inline.raw.markdown, markup.inline.raw.string.markdown#A7DBCE
entity.name.tag.yaml, support.type.property-name.json#CBCB92
keyword.other.import.java, keyword.other.package.java, keyword.other.import.kotlin, keyword.other.package.kotlin, storage.modifier.java, storage.modifier.kotlin, keyword.control.java, keyword.control.kotlin, keyword.operator.instanceof.java, keyword.operator.new.java#ba8eaf
storage.type.primitive.java, storage.type.primitive.kotlin, storage.type.java, storage.type.kotlin, storage.type.generic.java, storage.type.generic.kotlin, storage.type.object.array.java#8A7EB0
support.class.java, support.class.builtin.java, entity.name.type.class.java#7ea4b0
support.function.java, support.class.java, variable.other.object.java, variable.other.object.property.java, meta.method-call.java, meta.method.java#7eb08a
keyword.control.flow.python, keyword.control.import.python, keyword.control.loop.python, storage.type.function.python, storage.type.class.python, storage.modifier.declaration.python#ba8eaf
support.function.builtin.python, support.type.python, support.variable.magic.python#7eb08aitalic
keyword.control.js, keyword.control.ts, keyword.control.flow.js, keyword.control.flow.ts, storage.type.js, storage.type.ts, storage.type.function.js, storage.type.function.ts, storage.type.class.js, storage.type.class.ts, storage.modifier.js, storage.modifier.ts#ba8eaf
support.class.builtin.js, support.class.builtin.ts, support.function.js, support.function.ts, support.variable.dom.js, support.variable.dom.ts, support.constant.js, support.constant.ts#7eb08a
keyword.control.c, keyword.control.cpp, storage.type.c, storage.type.cpp, storage.modifier.c, storage.modifier.cpp, keyword.operator.sizeof.c, keyword.operator.sizeof.cpp#ba8eaf
storage.type.built-in.primitive.c, storage.type.built-in.primitive.cpp, entity.name.type.c, entity.name.type.cpp#8A7EB0
keyword.control.go, keyword.function.go, keyword.import.go, keyword.package.go, keyword.type.go, keyword.var.go, storage.type.go#ba8eaf
support.function.go, support.type.builtin.go#7eb08a
keyword.control.php, storage.type.php, storage.modifier.php, keyword.other.namespace.php#ba8eaf
support.function.builtin.php, support.class.builtin.php#7eb08a
keyword.control.ruby, keyword.control.def.ruby, keyword.control.class.ruby, keyword.control.module.ruby, keyword.control.ruby.start-block, storage.type.class.ruby, storage.type.module.ruby, storage.type.function.ruby#ba8eaf
support.function.builtin.ruby, support.class.ruby#7eb08a
Botany Theme by Prabin Panta - VS Code Theme