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#0e4e86
  • activityBar.background#0e4e8630
  • activityBar.border#ffffff20
  • activityBar.foreground#eff6ff
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#ee5118
  • activityBarBadge.foreground#eff6ff
  • badge.background#ee5118
  • badge.foreground#eff6ff
  • breadcrumb.background#313233
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#999999
  • commandCenter.background#0e4e86
  • commandCenter.border#ffffff20
  • commandCenter.foreground#aaaaaa
  • dropdown.background#052c4f
  • dropdown.border#ffffff20
  • dropdown.foreground#eff6ff
  • dropdown.listBackground#063864
  • editor.background#1a1b1c
  • editor.foldBackground#0e4e86
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#252627
  • editor.lineHighlightBorder#252627
  • editor.linkedEditingBackground#d0900f
  • editor.selectionBackground#565758A0
  • editor.wordHighlightBackground#66aeee60
  • editor.wordHighlightBorder#66aeee60
  • editorBracketHighlight.foreground1#ffffff
  • editorBracketHighlight.foreground2#999999
  • editorBracketHighlight.foreground3#eeeeee
  • editorBracketHighlight.foreground4#888888
  • editorBracketHighlight.foreground5#dddddd
  • editorBracketHighlight.foreground6#777777
  • editorBracketMatch.background#55555550
  • editorBracketMatch.border#ffffff20
  • editorCodeLens.foreground#857a5d90
  • editorCursor.foreground#cccccc
  • editorGroupHeader.border#ffffff20
  • editorGroupHeader.noTabsBackground#101010
  • editorGroupHeader.tabsBackground#1a1b1c
  • editorGroupHeader.tabsBorder#ffffff20
  • editorGutter.addedBackground#80f01d
  • editorGutter.background#202020
  • editorGutter.deletedBackground#ee5118
  • editorGutter.foldingControlForeground#aaaaaa
  • editorGutter.modifiedBackground#2fe5f3
  • editorLineNumber.activeForeground#d0900f
  • editorLineNumber.dimmedForeground#d0900f40
  • editorLineNumber.foreground#d0900f70
  • editorOverviewRuler.background#252627
  • editorOverviewRuler.border#ffffff20
  • editorSuggestWidget.background#314a60
  • editorSuggestWidget.border#ffffff20
  • editorSuggestWidget.focusHighlightForeground#ffffff
  • editorSuggestWidget.foreground#aaaaaa
  • editorSuggestWidget.highlightForeground#aaaaaa
  • editorSuggestWidget.selectedBackground#0e4e86
  • editorSuggestWidget.selectedForeground#ffffff
  • editorSuggestWidget.selectedIconForeground#ffffff
  • gitlens.trailingLineForegroundColor#857a5d90
  • minimap.background#202020
  • minimap.errorHighlight#f82727
  • minimap.findMatchHighlight#1f7de7
  • minimap.foregroundOpacity#00000080
  • minimap.selectionHighlight#565758A0
  • minimap.selectionOccurrenceHighlight#14f5cf
  • minimap.warningHighlight#fae70d
  • minimapGutter.addedBackground#80f01d
  • minimapGutter.deletedBackground#ee5118
  • minimapGutter.modifiedBackground#2fe5f3
  • minimapSlider.activeBackground#0e4e8690
  • minimapSlider.background#80111111
  • minimapSlider.hoverBackground#0e4e8650
  • panel.background#191A1B
  • panel.border#ffffff20
  • panelSection.border#ffffff20
  • peekView.border#eff6ff
  • peekViewEditor.background#0e4e8640
  • peekViewResult.background#0e4e8640
  • peekViewTitle.background#0e4e8680
  • profileBadge.background#ecad26
  • profileBadge.foreground#eff6ff
  • scrollbar.shadow#101010
  • scrollbarSlider.activeBackground#0e4e86AA
  • scrollbarSlider.background#313233
  • scrollbarSlider.hoverBackground#0e4e8650
  • sideBar.background#191A1B
  • sideBar.border#ffffff20
  • sideBar.foreground#c2c5c9
  • sideBarSectionHeader.background#313233
  • sideBarSectionHeader.border#ffffff20
  • sideBarTitle.foreground#ffffff
  • sideBySideEditor.horizontalBorder#ffffff20
  • sideBySideEditor.verticalBorder#ffffff20
  • statusBar.background#0e4e86
  • statusBar.border#ffffff20
  • statusBar.debuggingBackground#ee5118
  • statusBar.debuggingBorder#ffffff20
  • statusBar.debuggingForeground#eff6ff
  • statusBar.focusBorder#ffffff
  • statusBar.foreground#eff6ff
  • statusBar.noFolderBackground#9a39d6
  • statusBar.noFolderBorder#ffffff20
  • statusBar.noFolderForeground#eff6ff
  • statusBar.offlineBackground#f82727
  • statusBar.offlineForeground#eff6ff
  • statusBarItem.hoverBackground#3f6280
  • statusBarItem.remoteBackground#1492ab
  • tab.activeBackground#353637
  • tab.activeBorder#ffffff20
  • tab.activeForeground#ffffff
  • tab.border#ffffff20
  • tab.inactiveBackground#252627
  • terminal.background#191A1B
  • terminal.border#ffffff20
  • terminal.foreground#eeeeee
  • terminal.selectionBackground#565758A0
  • terminalCommandDecoration.errorBackground#f82727
  • terminalCommandDecoration.successBackground#6fdb23
  • titleBar.activeBackground#0e4e8670
  • titleBar.activeForeground#eff6ff
  • titleBar.border#ffffff20
  • titleBar.inactiveBackground#0e4e8670
  • titleBar.inactiveForeground#eff6ff80
  • window.activeBorder#ee5118
  • window.inactiveBorder#ffffff20

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation, punctuation.cs, punctuation.curlybraces, punctuation.curlybraces.cs, punctuation.curlybrace.open.cs, punctuation.curlybrace.close.cs, punctuation.quasi.element, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.quasi.begin, punctuation.definition.quasi.end, punctuation.terminator.statement, punctuation.terminator.statement.cs, meta.paragraph.markdown, text.html.markdown#c1c5c9
string#1dc1c9
variable.language#5d7d52
variable.name#5d7d52
variable.other, support.variable.automatic.powershell, punctuation.definition.variable.powershell#d7c931italic
variable.other.property#ffee00italic
variable.other.object.property.cs, support.type.property-name.json.comments, source.sql#d7c931italic
variable.parameter, meta.group.array-expression.powershell, meta.group.powershell#a05b30bold
comment, comment.block.powershell, comment.block.json.comments, comment.documentation.embedded.powershell, punctuation.definition.comment.sql#7b776d
constant#5897f7bold
entity#29aca7bold
entity.name.namespace#8f8552bold
entity.name.class#29aca7bold
entity.name.type.class#2f73bdbold
entity.name.type.enum#1de3d3bold
entity.name.type.delegate.cs#b994efbold
entity.name.type.struct, string.quoted.double.json.comments#3197d6bold
entity.name.type.interface, storage.type.powershell, markup.heading.markdown, entity.name.section.markdown, punctuation.definition.heading.markdown#4596f2bold
entity.name.function, support.function.powershell, meta.scriptblock.powershell, string.quoted.single.sql, constant.numeric.sql, string.quoted.single.sql, punctuation.definition.string.begin.sql, punctuation.definition.string.end.sql, markup.underline.link.image.markdown#d08719
entity.name.method, string.other.link.description.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown#d0a519bold
entity.name.tag#d0a519bold
entity.other.attribute-name#ea6f23bold
entity.name.variable.local.cs#f1eeeb
entity.name.variable.field.cs#76dbe7
operator#ffffffbold
keyword, keyword.operator.documentation.powershell, keyword.operator.comparison.powershell, punctuation.definition.list.begin.markdown, punctuation.definition.list.end.markdown#2db0d8bold
keyword.operator#f1f2f3bold
keyword.control, keyword.control.powershell#7bd0ecbold
Dark Autumn Theme by Darkstar GmbH - VS Code Theme