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

Shiki preview

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

Loading...

OneMoreDark - Coding Theme