Skip to main content
Coding Theme

Color themes

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#161b22
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#c71335
  • activityBarBadge.foreground#ffffff
  • badge.background#008a50
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ecf2f8
  • breadcrumb.background#161b22
  • breadcrumb.focusForeground#ecf2f8
  • breadcrumb.foreground#ecf2f8
  • button.background#0e639c
  • button.foreground#ffffff
  • button.hoverBackground#1177bb
  • button.secondaryBackground#3a3d41
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#45494e
  • checkbox.background#21262d
  • checkbox.border#00000000
  • checkbox.foreground#cccccc
  • debugExceptionWidget.background#21262d
  • debugExceptionWidget.border#425264
  • debugToolBar.background#21262d
  • debugToolBar.border#425264
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#478c6c33
  • diffEditor.removedTextBackground#94233333
  • dropdown.background#21262d
  • dropdown.border#00000000
  • dropdown.foreground#cccccc
  • editor.background#1b2027
  • editor.findMatchBackground#515c6a
  • editor.findMatchBorder#74879f
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#3a3d4166
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#264f784d
  • editor.foreground#ecf2f8
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#313841
  • editor.lineHighlightBackground#293038
  • editor.lineHighlightBorder#00000060
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#28384f
  • editor.selectionHighlightBackground#add6ff26
  • editor.selectionHighlightBorder#495F77
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightStrongBackground#2f465eb8
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#999999
  • editorCursor.background#000000
  • editorCursor.foreground#ecf2f8
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#f48771
  • editorGroup.border#ffffff2a
  • editorGroup.emptyBackground#1b2027
  • editorGroupHeader.tabsBackground#21262d
  • editorGutter.addedBackground#298c25
  • editorGutter.background#161b22
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#b42027
  • editorGutter.foldingControlForeground#c5c5c5
  • editorGutter.modifiedBackground#0c7d9d
  • editorHoverWidget.background#13171d
  • editorHoverWidget.border#bad5ff2c
  • editorHoverWidget.foreground#c6cdd5
  • editorIndentGuide.activeBackground#89929bb3
  • editorIndentGuide.background#89929b2c
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#ecf2f8
  • editorLineNumber.foreground#89929b
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#161b22
  • editorMarkerNavigationError.background#8a332a
  • editorMarkerNavigationInfo.background#4877b4
  • editorMarkerNavigationWarning.background#d7a14c
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#89929b3a
  • editorSuggestWidget.background#0d1117
  • editorSuggestWidget.border#63bdff36
  • editorSuggestWidget.foreground#ecf2f8
  • editorSuggestWidget.highlightForeground#2e85be
  • editorSuggestWidget.selectedBackground#21262d
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#2a3038
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#5F5F5F
  • focusBorder#77bdfb
  • foreground#ecf2f8
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • icon.foreground#ecf2f8
  • input.background#21262d
  • input.border#00000000
  • input.foreground#cccccc
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#007fd466
  • inputOption.activeBorder#007acc00
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#12385a
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#303741
  • list.focusBackground#161b22
  • list.focusForeground#cccccc
  • list.highlightForeground#2a92d7
  • list.hoverBackground#161b22
  • list.hoverForeground#ecf2f8
  • list.inactiveSelectionBackground#161b22
  • list.inactiveSelectionForeground#ecf2f8c5
  • listFilterWidget.background#7b4134
  • listFilterWidget.noMatchesOutline#0000005c
  • listFilterWidget.outline#00000000
  • menu.background#21262d
  • menu.border#00000085
  • menu.foreground#cccccc
  • menu.selectionBackground#161b22
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#ffffff20
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionForeground#cccccc
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#383838
  • merge.currentContentBackground#27403B
  • merge.currentHeaderBackground#367366
  • merge.incomingContentBackground#28384B
  • merge.incomingHeaderBackground#395F8F
  • minimap.background#1b2027
  • minimap.errorHighlight#f48771
  • minimap.findMatchHighlight#515c6a
  • minimap.selectionHighlight#28384f
  • minimap.warningHighlight#cca700
  • minimapGutter.addedBackground#298c25
  • minimapGutter.deletedBackground#b42027
  • minimapGutter.modifiedBackground#0c7d9d
  • notificationCenter.border#697cc72e
  • notificationCenterHeader.background#161b22
  • notificationCenterHeader.foreground#a2cfffc5
  • notifications.background#161b22
  • notifications.border#697cc72e
  • notifications.foreground#ecf2f8
  • notificationsErrorIcon.foreground#f48771
  • notificationsInfoIcon.foreground#75beff
  • notificationsWarningIcon.foreground#cca700
  • notificationToast.border#9aa6d72e
  • panel.background#161b22
  • panel.border#ffffff1a
  • panelSection.border#80808059
  • panelTitle.activeBorder#ecf2f8
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#e7e7e799
  • peekView.border#1376b8
  • peekViewEditor.background#121821
  • peekViewEditor.matchHighlightBackground#ff6c003a
  • peekViewEditor.matchHighlightBorder#cb755b6a
  • peekViewEditorGutter.background#121821
  • peekViewResult.background#161d28
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#161d28
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#3794ff
  • progressBar.background#77bdfb
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#104879
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#ecf2f8
  • sideBar.background#21262d
  • sideBar.dropBackground#303741
  • sideBar.foreground#ecf2f8
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#cccccc33
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#ecf2f8
  • statusBar.background#161b22
  • statusBar.debuggingBackground#ba1323
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#089062
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#161b22
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#ffffff
  • tab.border#00000052
  • tab.inactiveBackground#21262d
  • tab.inactiveForeground#ffffff80
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.border#80808059
  • terminal.foreground#cccccc
  • terminal.selectionBackground#ffffff0c
  • terminalCursor.background#0087FF
  • terminalCursor.foreground#ffffff
  • textLink.foreground#3794ff
  • titleBar.activeBackground#21262d
  • titleBar.activeForeground#cccccc
  • titleBar.border#00000000
  • titleBar.inactiveBackground#3c3c3c99
  • titleBar.inactiveForeground#cccccc99
  • tree.indentGuidesStroke#48505a
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#ecf2f8—
comment#858DB7 italic
string#94BFFF—
constant.numeric#F1B3F1—
constant.language#F1B3F1—
constant.character, constant.other#F1B3F1—
variable#39FFBA
keyword#FF476E—
storage#FF476E
storage.type#01F7F7italic
entity.name.class#39FFBAunderline
entity.other.inherited-class#FFEE7Aitalic underline
entity.name.function#FF476E
variable.parameter#FFEE7Aitalic
entity.name.tag#FF476E
entity.other.attribute-name#39FFBA
support.function#39FFBA
support.constant#FFEE7A
support.type, support.class#39FFBAitalic
support.other.variable#FFEE7A
invalid#F8F8F0
invalid.deprecated#F8F8F0—
source.js meta.brace.curly.js, source.js meta.function.js punctuation.definition.parameters.begin.js, source.js meta.function.js punctuation.definition.parameters.end.js, source.js meta.brace.round.js, source.js meta.delimiter.object.comma.js#4F5987—
source.python meta.class.python punctuation.definition.inheritance.begin.python, source.python meta.class.python punctuation.definition.inheritance.end.python, source.python meta.function.python punctuation.definition.parameters.begin.python, source.python meta.function.python punctuation.definition.parameters.end.python, source.python meta.function-call.python punctuation.definition.arguments.begin.python, source.python meta.function-call.python punctuation.definition.arguments.end.python, source.python meta.function.python meta.function.parameters.python punctuation.separator.parameters.python#4F5987—
source.ruby meta.function.method.with-arguments.ruby punctuation.definition.parameters.ruby, source.ruby punctuation.section.array.ruby, source.ruby punctuation.section.function.ruby, source.ruby meta.require.ruby meta.environment-variable.ruby, source.ruby punctuation.separator.variable.ruby#4F5987—
markup.strike#ffca7aitalic
meta.link.inline, meta.link.reference#01f7f7bold
markup.bold#ffca7abold
markup.italic#ffca7aitalic
markup.heading#39ffbabold
punctuation.definition.list_item.markdown#f1b3f1—
markup.quote#94bfffitalic
punctuation.definition.blockquote.markdown#94bfffitalic
meta.separator#858db7—
text.html.markdown markup.raw.inline#39ffba—
text.html.markdown markup.raw.inline#ffca7aunderline
markup.raw.block#39ffba—
markup.raw.block.fenced.markdown source#eff0f6—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#858db7italic
variable.language.fenced.markdown#858db7italic
punctuation.accessor#f1b3f1—
meta.function.return-type#f1b3f1—
punctuation.section.block.begin#eff0f6—
punctuation.section.block.end#eff0f6—
punctuation.section.embedded.begin#f1b3f1—
punctuation.section.embedded.end#f1b3f1—
punctuation.separator.namespace#f1b3f1—
variable.function#39ffba—
variable.other#eff0f6—
variable.language#f1b3f1—
entity.name.module.ruby#94bfff—
entity.name.constant.ruby#f1b3f1—
support.function.builtin.ruby#eff0f6—
storage.type.namespace.cs#f1b3f1—
entity.name.namespace.cs#94bfff—
OneMoreDark by Avetis - VS Code Theme