Skip to main content
CodingTheme

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.activeBorder#9a4d24
  • activityBar.background#202020
  • activityBar.border#444444
  • activityBar.foreground#c49b3d
  • activityBar.inactiveForeground#c0c0c0
  • activityBarBadge.background#9a4d24
  • activityBarBadge.foreground#202020
  • badge.background#9a4d24
  • badge.foreground#202020
  • banner.background#202020
  • banner.foreground#c49b3d
  • banner.iconForeground#c49b3d
  • breadcrumb.activeSelectionForeground#cc9421
  • breadcrumb.background#202020
  • breadcrumb.focusForeground#daa520
  • breadcrumb.foreground#c0c0c0
  • breadcrumbPicker.background#202020
  • button.background#9a4d24
  • button.foreground#161616
  • button.hoverBackground#0d8060
  • debugToolBar.background#202020
  • debugToolBar.border#444444
  • debugView.exceptionLabelBackground#202020
  • debugView.exceptionLabelForeground#c49b3d
  • debugView.stateLabelBackground#202020
  • debugView.stateLabelForeground#c49b3d
  • diffEditor.insertedTextBackground#00d89023
  • diffEditor.removedTextBackground#ff474720
  • dropdown.background#161616
  • dropdown.border#9a4d24
  • dropdown.foreground#dddddd
  • editor.background#202020
  • editor.findMatchBackground#20486b7f
  • editor.findMatchHighlightBackground#20486b7f
  • editor.findRangeHighlightBackground#20486b7f
  • editor.focusedStackFrameHighlightBackground#303030
  • editor.foreground#dddddd
  • editor.inactiveSelectionBackground#20486b7f
  • editor.inlineValuesBackground#202020
  • editor.inlineValuesForeground#c49b3d
  • editor.lineHighlightBackground#09385a7f
  • editor.lineHighlightBorder#09385a5a
  • editor.selectionBackground#20486b7f
  • editor.selectionHighlightBackground#20486b7f
  • editor.snippetFinalTabstopHighlightBackground#202020
  • editor.snippetFinalTabstopHighlightBorder#444444
  • editor.snippetTabstopHighlightBackground#202020
  • editor.snippetTabstopHighlightBorder#444444
  • editor.stackFrameHighlightBackground#303030
  • editor.wordHighlightBackground#20486b7f
  • editor.wordHighlightStrongBackground#20486b7f
  • editorBracketMatch.border#c0c0c0
  • editorCursor.foreground#c49b3d
  • editorError.border#ffffff00
  • editorError.foreground#ee6767
  • editorGroup.border#444444
  • editorGroup.dropBackground#3333337f
  • editorGroupHeader.tabsBackground#161616
  • editorGroupHeader.tabsBorder#444444
  • editorGutter.addedBackground#7ddd70
  • editorGutter.deletedBackground#ee6767
  • editorGutter.modifiedBackground#dbdd70
  • editorHoverWidget.background#161616
  • editorHoverWidget.border#444444
  • editorIndentGuide.activeBackground#6d6d6d
  • editorIndentGuide.background#161616
  • editorInlayHint.background#333333
  • editorInlayHint.foreground#dddddd
  • editorLineNumber.activeForeground#c49b3d
  • editorLineNumber.foreground#c0c0c0
  • editorLink.activeForeground#c49b3d
  • editorSuggestWidget.background#161616
  • editorSuggestWidget.border#444444
  • editorSuggestWidget.foreground#dddddd
  • editorSuggestWidget.highlightForeground#9a4d24
  • editorSuggestWidget.selectedBackground#4d4d4d
  • editorWarning.border#ffffff00
  • editorWarning.foreground#dbdd70
  • editorWhitespace.foreground#161616
  • editorWidget.background#161616
  • editorWidget.border#444444
  • errorForeground#ee6767
  • focusBorder#44444433
  • foreground#dddddd
  • gitDecoration.conflictingResourceForeground#ffc107
  • gitDecoration.deletedResourceForeground#992530
  • gitDecoration.ignoredResourceForeground#4d4d4d
  • gitDecoration.modifiedResourceForeground#138799
  • gitDecoration.untrackedResourceForeground#1f8035
  • input.background#161616
  • input.border#9a4d24
  • input.foreground#dddddd
  • input.placeholderForeground#c0c0c07f
  • inputOption.activeBorder#e8b77b
  • list.activeSelectionBackground#09385a
  • list.activeSelectionForeground#c49b3d
  • list.focusBackground#20486b
  • list.focusForeground#c49b3d
  • list.highlightForeground#c49b3d
  • list.hoverBackground#20486b
  • list.hoverForeground#c49b3d
  • list.inactiveSelectionBackground#09385a
  • list.inactiveSelectionForeground#c49b3d
  • menu.background#202020
  • menu.border#444444
  • menu.foreground#c0c0c0
  • menu.selectionBackground#09385a
  • menu.selectionBorder#9a4d24
  • menu.selectionForeground#c49b3d
  • menu.separatorBackground#444444
  • menubar.selectionBackground#202020
  • menubar.selectionBorder#444444
  • menubar.selectionForeground#c49b3d
  • minimap.background#202020
  • panel.background#202020
  • panel.border#444444
  • panelSection.border#444444
  • panelSectionHeader.border#444444
  • panelTitle.activeBorder#9a4d24
  • panelTitle.activeForeground#c49b3d
  • panelTitle.inactiveForeground#c0c0c0
  • progressBar.background#9a4d24
  • scrollbar.shadow#181818
  • scrollbarSlider.activeBackground#c49b3d7f
  • scrollbarSlider.background#9a4d2433
  • scrollbarSlider.hoverBackground#9a4d2433
  • selection.background#20486b7f
  • sideBar.background#1b1b1b
  • sideBar.border#444444
  • sideBar.foreground#c0c0c0
  • sideBarSectionHeader.background#202020
  • sideBarSectionHeader.foreground#e2e2e2
  • sideBarTitle.foreground#dddddd
  • statusBar.background#202020
  • statusBar.border#444444
  • statusBar.foreground#c0c0c0
  • statusBarItem.activeBackground#daa520
  • statusBarItem.hoverBackground#cc9421
  • tab.activeBackground#3333337f
  • tab.activeBorderTop#9a4d24
  • tab.activeForeground#c49b3d
  • tab.border#444444
  • tab.inactiveBackground#161616
  • tab.inactiveForeground#c0c0c0
  • terminal.ansiBlack#1b1b1b
  • terminal.ansiBlue#e8b77b
  • terminal.ansiBrightBlack#2d2d2d
  • terminal.ansiBrightBlue#e8b77b
  • terminal.ansiBrightCyan#e8b77b
  • terminal.ansiBrightGreen#9a4d24
  • terminal.ansiBrightMagenta#9a4d24
  • terminal.ansiBrightRed#f694ff
  • terminal.ansiBrightWhite#dddddd
  • terminal.ansiBrightYellow#c49b3d
  • terminal.ansiCyan#e8b77b
  • terminal.ansiGreen#9a4d24
  • terminal.ansiMagenta#9a4d24
  • terminal.ansiRed#ee6767
  • terminal.ansiWhite#c0c0c0
  • terminal.ansiYellow#c49b3d
  • terminal.background#1b1b1b
  • terminal.border#444444
  • terminal.foreground#dddddd
  • terminal.selectionBackground#20486b7f
  • terminal.tab.activeBorder#c49b3d
  • terminalCursor.background#2d2d2d
  • terminalCursor.foreground#c49b3d
  • textLink.activeForeground#daa520
  • textLink.foreground#cc9421
  • titleBar.activeBackground#202020
  • titleBar.activeForeground#c0c0c0
  • titleBar.border#444444
  • titleBar.inactiveBackground#202020
  • titleBar.inactiveForeground#c0c0c0
  • toolbar.activeBackground#cc9421
  • toolbar.hoverBackground#daa520
  • toolbar.hoverOutline#9a4d24
  • tree.indentGuidesStroke#4d4d4d
  • widget.shadow#161616

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage, support, entity.name.tag, variable.language, keyword.control.flow, storage.modifier, keyword.operator, entity.other.attribute-name.class.css, entity.other.keyframe-offset, markup.heading, markup.underline.link, variable.other.env, punctuation.definition.list.begin.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, constant.length.units.css, constant.percentage.units.css#c58d79
string, markup.inserted, markup.raw, constant, source.env, support.type.builtin.graphql, variable.other.quoted.double, markup.inline.raw.string.markdown, entity.other.attribute-name.id.css, meta.jsx.children, JSXNested#e8b77b
markup.changed, entity, entity.name.function, entity.name.function.elixir, entity.name.function-call.elixir, support.class.component.tsx, support.class.component.open.jsx, support.class.component.close.jsx, meta.function-call.generic.python, entity.name.section.markdown#c49b3d
invalid, markup.deleted#ee6767
string.unquoted, punctuation.separator, entity.other.attribute-name, meta.object-literal.key, variable.object.property, variable.other.property, variable.other.object.property, variable.other.constant.property, meta.type.annotation, support.type.property-name.css, support.type.vendored, constant.language.symbol.elixir, variable.graphql, meta.attribute.python#f694ff
variable, markup.list, support.constant.property-value.css, variable.parameter.keyframe-list.css, source.css, support.constant.font-name, support.constant.vendored.property-value, variable.parameter, meta.class, meta.method.declaration, parameter.variable.function.elixir, punctuation.definition.tag, punctuation.section.embedded, meta.embedded.expression#dddddd
comment, string.quoted.docstring.multi.python#6d6d6d
entity.name.function, support.function#98b8ff
entity.name.type, entity.name.class, support.class.builtin, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.quasi.element.begin, punctuation.quasi.element.end, entity.other.inherited-class, variable.other.constant.elixir, entity.other.attribute-name.class.css#82e2ff
meta.parameters, meta.type.parameters, meta.return.type, entity.name.type.interface, meta.type.annotation, meta.function.parameters, markup.italic.markdownitalic
markup.underlineunderline
markup.bold.markdownbold

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Dark Brown Theme by blono - VS Code Theme